原文：http://www.ydcss.com/archives/41

簡介：

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

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

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

1.2、本示例目錄結構如下：

2、本地安裝gulp-minify-css

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

2.2、安裝：命令提示符執行?cnpm install gulp-minify-css --save-dev

2.3、注意：沒有安裝cnpm請使用?npm install gulp-minify-css --save-dev?什么是cnpm，如何安裝？

2.4、說明：--save-dev?保存配置信息至 package.json 的 devDependencies 節點。為什么要保存至package.json？

3、配置gulpfile.js

3.1、基本使用

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.2、gulp-minify-css 最終是調用clean-css，其他參數查看這里

JavaScript

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

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 [是否保留換行] ????????????keepSpecialComments: '*' ????????????//保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴 ????????})) ????????.pipe(gulp.dest('dist/css')); });

3.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.3、若想保留注釋，這樣注釋即可：

CSS

1 2 3

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

4、執行任務

4.1、命令提示符執行：gulp testCssmin

轉載于:https://www.cnblogs.com/HendSame-JMZ/articles/6183034.html

總結

以上是生活随笔為你收集整理的gulp教程之gulp-minify-css【gulp-clean-css】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。