Gulp學習指南之CSS合併、壓縮與MD5命名及路徑替換

接上一篇文章：Gulp學習指南，這裏主要記錄一下用 gulp 來合併、壓縮CSS以及進行 MD5命名以及替換文件中引入的CSS文件，固然這一系列操做都是用基於gulp插件的，主要會用到下面的幾個插件：

var concat = require('gulp-concat');
//- 多個文件合併爲一個；

var minifyCss = require('gulp-minify-css');
//- 壓縮CSS爲一行； 

var rev = require('gulp-rev');
//- 對文件名加MD5後綴

var revCollector = require('gulp-rev-collector');
//- 路徑替換

安裝Gulp插件到本地項目

npm init
//- 生成一個 package.json，裏面是一些常規的配置信息

npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev
//- 安裝插件到項目目錄內

完成上面兩步後，會在咱們的項目內生成一個package.json文件以及一個node_modules目錄

建立配置文件 gulpfile.js

在項目根目錄內建立一個 gulpfile.js 文件(必須是這個文件名喲~)，內容就是上面幾個插件的配置信息：

var gulp = require('gulp');
var concat = require('gulp-concat');                            //- 多個文件合併爲一個；
var minifyCss = require('gulp-minify-css');                     //- 壓縮CSS爲一行；
var rev = require('gulp-rev');                                  //- 對文件名加MD5後綴
var revCollector = require('gulp-rev-collector');               //- 路徑替換

gulp.task('concat', function() {                                //- 建立一個名爲 concat 的 task
    gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css'])    //- 須要處理的css文件，放到一個字符串數組裏
        .pipe(concat('wap.min.css'))                            //- 合併後的文件名
        .pipe(minifyCss())                                      //- 壓縮處理成一行
        .pipe(rev())                                            //- 文件名加MD5後綴
        .pipe(gulp.dest('./css'))                               //- 輸出文件本地
        .pipe(rev.manifest())                                   //- 生成一個rev-manifest.json
        .pipe(gulp.dest('./rev'));                              //- 將 rev-manifest.json 保存到 rev 目錄內
});

gulp.task('rev', function() {
    gulp.src(['./rev/*.json', './application/**/header.php'])   //- 讀取 rev-manifest.json 文件以及須要進行css名替換的文件
        .pipe(revCollector())                                   //- 執行文件內css名的替換
        .pipe(gulp.dest('./application/'));                     //- 替換後的文件輸出的目錄
});

gulp.task('default', ['concat', 'rev']);

運行結果

經過以上的配置以後，就能夠開始運行 gulp 對咱們的項目進行相關的操做啦；

使用 gulp 命令，運行Gulp.js 構建程序

首先運行 concat 這個 task 生成一個 rev-manifest.json 文件
而後再運行 rev 這個 task 替換掉文件中引入的 css

YuanWingdeMacBook-Pro:m YuanWing$ gulp concat
[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:03] Starting 'concat'...
[11:47:03] Finished 'concat' after 12 ms
YuanWingdeMacBook-Pro:m YuanWing$ gulp rev
[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:17] Starting 'rev'...
[11:47:17] Finished 'rev' after 10 ms
YuanWingdeMacBook-Pro:m YuanWing$

rev-manifest.json文件內容：

{
  "wap.min.css": "wap.min-c49f62a273.css"
}

header.php替換先後對比：

替換前：<link rel="stylesheet" href="/css/wap.min.css" />

替換後：<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />

gulp-rev-collector進行文件路徑替換是依據 rev-manifest.json 的，因此要先成生 .json 文件，而後再進行替換；

結語

上面用到的幾個插件都只用到了他們自身功能很小很小的一部份，感興的能夠本身去好好體驗一下：

gulp-rev
gulp-rev-collector
gulp-minify-css
gulp-concat