gulp教程之gulp-minify-css

簡介：

使用gulp-minify-css壓縮css文件，減少文件大小，並給引用url添加版本號避免緩存。重要：gulp-minify-css已經被廢棄，請使用gulp-clean-css，用法一致。

一、安裝nodejs/全局安裝gulp/本地安裝gulp/建立package.json和gulpfile.js文件

1.一、gulp基本使用還未掌握？請參看： gulp詳細入門教程

1.二、本示例目錄結構以下：

二、本地安裝gulp-minify-css

2.一、github：https://github.com/jonathanepollack/gulp-minify-css

2.二、安裝：命令提示符執行 cnpm install gulp-minify-css --save-dev

2.三、注意：沒有安裝cnpm請使用 npm install gulp-minify-css --save-dev 什麼是cnpm，如何安裝？

2.四、說明：--save-dev 保存配置信息至 package.json 的 devDependencies 節點。爲何要保存至package.json？

三、配置gulpfile.js

3.一、基本使用

JavaScript

 

1 2 3 4 5 6 7 8

var gulp = require('gulp'),     cssmin = require('gulp-minify-css');   gulp.task('testCssmin', function () {     gulp.src('src/css/*.css')         .pipe(cssmin())         .pipe(gulp.dest('dist/css')); });

3.二、gulp-minify-css 最終是調用clean-css，其餘參數查看這裏

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12

var gulp = require('gulp'),     cssmin = require('gulp-minify-css');   gulp.task('testCssmin', function () {     gulp.src('src/css/*.css')         .pipe(cssmin({             advanced: false,//類型：Boolean 默認：true [是否開啓高級優化（合併選擇器等）]             compatibility: 'ie7',//保留ie7及如下兼容寫法 類型：String 默認：''or'*' [啓用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]             keepBreaks: true//類型：Boolean 默認：false [是否保留換行]         }))         .pipe(gulp.dest('dist/css')); });

3.三、給css文件裏引用url加版本號（根據引用文件的md5生產版本號），像這樣：

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

var gulp = require('gulp'),     cssmin = require('gulp-minify-css');     //確保已本地安裝gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]     cssver = require('gulp-make-css-url-version');   gulp.task('testCssmin', function () {     gulp.src('src/css/*.css')         .pipe(cssver()) //給css文件裏引用文件加版本號（文件MD5）         .pipe(cssmin())         .pipe(gulp.dest('dist/css')); });

3.三、若想保留註釋，這樣註釋便可：

CSS

 

1 2 3

/*!    Important comments included in minified output. */

四、執行任務

4.一、命令提示符執行：gulp testCssmin

五、結束語

5.一、本文有任何錯誤，或有任何疑問，歡迎留言說明。

來源：http://www.ydcss.com/archives/41