gulp 插件之 gulp-clean-css 和 gulp-make-css-url-version

gulp-clean-css 和 gulp-make-css-url-version 的簡介：

            gulp-clean-css 插件用來壓縮 css 文件。

            gulp-make-css-url-version 插件用來給 css 文件裏的 url 加版本號（根據引用文件的 MD5 生成版本號）。

一、gulp-clean-css 和 gulp-make-css-url-version 插件的使用

1、安裝 “gulp-clean-css 和 gulp-make-css-url-version”插件命令（在終端進入到項目根目錄執行）

            npm install --save-dev  gulp-load-plugins gulp-concat gulp-rename gulp-clean-css gulp-make-css-url-version

2、在項目根目錄下提供 "gulp-clean-css" 插件任務配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）

            mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-clean-css 和 gulp-make-css-url-version"

 具體示例：
var gulp = require('gulp'),    
      cssmin = require('gulp-clean-css'),
      cssurl = require('gulp-make-css-url-version'),
      plugins = require('gulp-load-plugins')();    // 裝載插件
      
gulp.task('css', function () {                               // 自定義 "css" 任務
    return gulp.src('src/css/*.css')                       // 模糊匹配 src/css 目錄下所有 css 文件 
        .pipe(cssurl())                                            // 給 css 文件裏 url 引用加版本號（文件 MD5）
        .pipe(plugins.concat('main.css'))              // 合併匹配到的 css 文件並命名爲 "main.css"
        .pipe(cssmin({
                        advanced: false,                       // 類型：Boolean 默認：true 是否開啓高級優化（合併選擇器等）
                        compatibility: 'ie7',                  // 類型：String 默認：' ' or  '*' [ 啓用兼容模式：'ie7'：IE7 兼容模式，'ie8'：IE8 兼容模式，'*'：IE9+ 兼容模式 ]    
                        keepBreaks: true,                    // 類型：Boolean 默認：false   是否保留換行
                        keepSpecialComments: '*'     // 保留所有特殊前綴，當你用 autoprefixer 生成瀏覽器前綴時，如果不加這個參數，有可能將會刪除你的部分前綴
        }))
        .pipe(plugins.rename('mainmin.css'))    // 將匹配到的 css 文件合併壓縮後重命名爲 "mainmin.css"
        .pipe(gulp.dest('dist/css'));                    // 壓縮後的文件存放路徑
});

4、最後在終端運行 "gulp css" 命令

PS：如果沒有錯誤提示信息，證明就沒什麼問題了。現在去項目根目錄下看是否生成 "dist/css" 目錄和目標文件。未完待續。。。。