目前做代碼壓縮合並的工具有很多，諸如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不久，只能實現這樣一些功能，肯定還有很多不足的地方，還有很多需要不斷完善優化的地方以及很多還不知道的功能，。或許在稍微大型一點的項目中也不知會不會出現問題。所有的這一切，包括其他工具的使用等等，都需要后續的繼續努力學習。