Gulp實現css、js、圖片的壓縮以及css、js文件的MD5命名

目前作代碼壓縮合並的工具備不少，諸如gulp，webpack，grunt等等，能夠說這些項目構建工具的功能很是之強大：圖片壓縮、圖片轉base64、css和js的壓縮以及合併，文件的md5重命名 ……。本人以前也是在項目中沒具體使用過，閒來無事，查查資料，本身寫了一個用gulp工具的小demo，有不少不足之處，歡迎指點。

  須要購買阿里雲產品和服務的，點擊此連接領取優惠券紅包，優惠購買哦，領取後一個月內有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

第一步：安裝node和npm

不用說，要用gulp，得先安裝node和npm（安裝完node後，自帶有npm）

Node官網下載地址：https://nodejs.org/en/download/（具體怎麼安裝請自行查資料）

第二步：安裝須要的插件

使用npm安裝須要的插件（命令後面加 -g 表示全局安裝，加 --save-dev 只安裝到當前項目）

因爲當前項目要使用，因此這些插件必須得安裝到本項目中

安裝命令以下：

npm init     //- 會生成一個package.json文件
npm install gulp --save-dev     //- gulp插件的核心
npm install gulp-minify-css --save-dev     //- 壓縮CSS文件
npm install gulp-rev --save-dev         //- 對css、js文件名加MD5後綴
npm install gulp-rev-collector --save-dev   //- 路徑替換
npm install gulp-clean --save-dev            //- 用於刪除文件
npm install gulp-uglify --save-dev            //- 壓縮js代碼
npm install gulp-imagemin --save-dev      //- 壓縮圖片
npm install gulp-base64 --save-dev        //- 把小圖片轉成base64字符串

安裝完畢以後，會在項目中生成一個node_moudles目錄，全部的插件所有在該目錄下。

 

第三步：構建項目目錄結構以及編寫項目代碼

本例代碼只用作測試而已，目錄結構以及代碼是我隨意寫的

個人目錄結構，以下圖：（目錄沒有所有展開）

 

目前index.html文件中的css和js的引用路徑是這樣的，以下圖：

 

其餘目錄下的html文件也是這樣的，都引用的是未壓縮和md5命名的css和js文件。

第四步：建立一個gulpfile.js文件，該文件和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');                      //- 對css、js文件名加MD5後綴
var revCollector = require('gulp-rev-collector');   //- 路徑替換
var clean = require('gulp-clean');                  //- 用於刪除文件
var uglify = require('gulp-uglify');                //- 壓縮js代碼
var imagemin = require('gulp-imagemin');            //- 壓縮圖片
var base64 = require('gulp-base64');                //- 把小圖片轉成base64字符串
var q = require('q');                               //- 用於解決任務執行順序的問題（一個任務執行完畢才執行另一個任務）（暫時還沒用到）

/*清理文件*/
gulp.task('clean',function () {                     //刪除dist目錄下的全部文件
    gulp.src('dist/*',{read:false})
        .pipe(clean());
});

/*壓縮js文件，並生成md5後綴的js文件*/
gulp.task('compress-js',function (callback) {       //- 建立一個名爲compress-js的task
    gulp.src(['webContent/js/**/*.js'])             //- 須要處理的js文件，放到一個字符串數組裏
        .pipe(uglify())                             //- 壓縮文件
        .pipe(rev())                                //- 文件名加MD5後綴
        .pipe(gulp.dest('dist/js'))                 //- 另存壓縮後的文件
        .pipe(rev.manifest())                       //- 生成一個rev-manifest.json
        .pipe(gulp.dest('rev-js'))                  //- 將rev-manifest.json保存到 rev-js 目錄內
        .on('end',function () {
            console.log('compress-js has been completed');
            callback();
        });
});

/*壓縮css文件，並生成md5後綴的css文件*/
gulp.task('compress-css', function(callback) {      //- 建立一個名爲compress-css的task
    gulp.src(['webContent/css/**/*.css'])           //- 須要處理的css文件，放到一個字符串數組裏
        // .pipe(concat('css/wap.min.css'))         //- 合併後的文件名
        .pipe(minifyCss())                          //- 壓縮處理成一行
        .pipe(rev())                                //- 文件名加MD5後綴
        .pipe(gulp.dest('dist/css'))                //- 輸出文件到dist/css目錄下
        .pipe(rev.manifest())                       //- 生成一個rev-manifest.json
        .pipe(gulp.dest('rev-css'))                 //- 將rev-manifest.json保存到rev-css目錄內
        .on('end',function () {
            console.log('compress-css has been completed');
            callback();
        });
});

/*修改html文件的link標籤和script標籤引用的css和js文件名，並把html文件輸出到指定的位置*/
gulp.task('rev-html',['compress-css','compress-js'], function() {          //- compress-css和compress-js任務執行完畢再執行rev-index任務
    /*修改index.html文件的link標籤和script標籤引用的css和js文件名，並把html文件輸出到指定的位置*/
    gulp.src(['rev-css/*.json','rev-js/*.json', 'webContent/index.html'])   //- 讀取兩個rev-manifest.json文件以及須要進行css和js名替換的html文件
        .pipe(revCollector())                                               //- 執行文件內css和js名的替換
        .pipe(gulp.dest('dist/'));                                          //- 替換後的html文件輸出的目錄

    /*修改其它html文件的link標籤和script標籤引用的css和js文件名，並把html文件輸出到指定的位置*/
    gulp.src(['rev-css/*.json','rev-js/*.json', 'webContent/views/**/*.html'])     //- 讀取兩個rev-manifest.json文件以及須要進行css和js名替換的html文件
        .pipe(revCollector())                                                      //- 執行文件內css和js名的替換
        .pipe(gulp.dest('dist/views'));                                            //- 替換後的html文件輸出的目錄
});

/*壓縮並複製圖片*/
gulp.task('compress-img',function () {
    gulp.src('webContent/images/**/*.*')    //原圖片的位置
        .pipe(imagemin())                   //執行圖片壓縮
        .pipe(gulp.dest('dist/images'));    //壓縮後的圖片輸出的位置
});

/*最終執行的任務-css*/
gulp.task('rev',['rev-html','compress-img']);

//***********************************************************************************************

//命令行順序: clean, rev

第五步：運行gulp命令

運行以下命令：gulp rev

運行完該命令後會生成如下三個目錄：dist、rev-css、rev-js。其中dist目錄下就是新的html文件、css文件、js文件和圖片，目錄和以前的webContent目錄下的結構是同樣的。

運行完命令後的項目總體結構以下：

 

WebContent目錄的結構和dist目錄的結構是同樣的，以下：

             

 

全部的css和js文件都加了md5命名了，全部的圖片體積也小了，但用肉眼看不出來圖片質量有變化。 

此時dist目錄下全部的html文件引用的css和js的引用路徑都變成帶有md5命名的了。例如index.html，見下圖

 

此時dist目錄下的東西就是咱們能夠上線的文件了。（固然還有不少不完善的地方，還有不少缺陷，畢竟我的知識能力有限。）

第六步：代碼的改動

若是後續代碼有改動的話，執行一次gulp clean命令，再執行一次gulp rev 命令：

gulp clean命令就能夠把dist目錄下生成的全部文件所有刪除，gulp rev命令會根據新的代碼從新生成全部文件到dist目錄下。

命令截圖以下：

 

另外原本也想在本例中使用圖片轉成base64，但是一直沒成功解決。若是哪位大神有知道的，還望能在評論區給個連接，讓我也學習學習。

說明：因爲本人知識有限，才接觸gulp不久，只能實現這樣一些功能，確定還有不少不足的地方，還有不少須要不斷完善優化的地方以及不少還不知道的功能，。或許在稍微大型一點的項目中也不知會不會出現問題。全部的這一切，包括其餘工具的使用等等，都須要後續的繼續努力學習。