我的新作觀點網(wǎng)http://www.guandn.com?(觀點網(wǎng)是一個獵獲新奇、收獲知識、重在獨立思考的網(wǎng)站)，它前端js、css的壓縮、合并、md5命名等就使用了gulp自動化構(gòu)建技術(shù)，gulp很小巧使用起來很舒服。ps：接下來我會逐一開源觀點網(wǎng)開發(fā)過程中的前后端技術(shù)，如：lucene全文索引、自定義富文本編輯器、圖片上傳壓縮水印等等。

一、什么是gulp

gulp是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務(wù)。例如：css、js的合并與壓縮（減少http請求，縮小文件大小）、html壓縮、md5名生成與替換（一般解決瀏覽器緩存）、線上配置文件自動替換、搭建本地web服務(wù)器做到實時刷新等。

二、環(huán)境搭建

gulp是基于Node.js的插件工具

搭建Node.js環(huán)境：https://nodejs.org/en/download/?下載相應(yīng)系統(tǒng)的node安裝包。進(jìn)入終端：鍵入：node -v如果出現(xiàn)node版本號，則node.js安裝成功。

安裝gulp：

（1）、安裝全局gulp：終端鍵入：npm install gulp -g 等待完成；

（2）、cd進(jìn)入到項目根目錄 -->:終端鍵入：npm init 【生成node.js插件管理json文件：package.json】：如圖：

【注：如圖紅色箭頭、一路enter即可（每一項的意義都很明確，無需解釋！我只是提一下license選項，這一項是開源協(xié)議：通常的開源協(xié)議有：GPL、Apache License、 BSD、ISC.. 等等，有興趣的可以參考：開源協(xié)議

（3）、鍵入：npm install gulp --save-dev 安裝gulp到當(dāng)前目錄，等待安裝完成。鍵入gulp-v 出現(xiàn)全局版本，和當(dāng)前版本，安裝完成。如圖：

鍵入:gulp，出現(xiàn)：“No gulpfile fount”，說明前三步執(zhí)行成功。

(4)、從上面提示可以看出，運行g(shù)ulp需要gulpfile文件。故而：在當(dāng)前文件夾新建文件：gulpfile.js備用。

三、gulpfile.js文件編寫（重點）

在gulpfile.js中寫入：

vargulp =require("gulp");//申明gulp變量gulp.task("start",function(){console.log("痞子貓**************");});

終端鍵入：gulp start 執(zhí)行g(shù)ulp中的start任務(wù)，出現(xiàn)打印，說明gulpfile.js編寫沒什么問題！如圖：

下面開始進(jìn)入正題，

壓縮、合并等這些操作可以依靠gulp插件完成：插件安裝命令：npm install [module] --save-dev?;

如：npm install gulp-concat --save-dev 這是安裝合并插件。使用如下：

vargulp =require("gulp");//申明gulp變量varconcat =require('gulp-concat');// require：加載插件，參數(shù)為：插件名//合并任務(wù)gulp.task("concat",function(){//concat為任務(wù)名，運行g(shù)ulp concat執(zhí)行此任務(wù)。returngulp.src("./js/*.js")//需要合并的js目錄，支持正則.pipe(concat("all.js"))//concat(),合并操作，參數(shù)：合并后的名字.pipe(gulp.dest("./js/"))//合并后放入的目錄});

終端鍵入：gulp concat 執(zhí)行此任務(wù)。

這就是一個簡單的合并任務(wù)，前面提到了node是基于流，也就是管道操作的。gulp.src（）管道的入口，pipe()獲得處理管道中的數(shù)據(jù)，pipe(gulp.dest())處理后數(shù)據(jù)的出口。說別了就是一個流水線操作。

所有的gulp插件運用也就是這個套路了：常用插件集合：

1.gulp-sass(sass編譯)

2.gulp-compass(sass編譯)

3.gulp-autoprefixer(添加CSS3前綴)

4.gulp-clean-css(壓縮CSS)

5.gulp-include（文件包含）

6.gulp-concat(文件合并)

7.del(文件刪除)

8.gulp-uglify(壓縮js)

9.gulp.spritesmith(合成雪碧圖)

10.run-sequence(隊列執(zhí)行)

11.browser-sync(瀏覽器同步刷新)

12.gulp-babel(js編譯)

13.gulp-imagemin(圖片壓縮)

gulp-imageisux(騰訊智圖壓縮，慎用)

imagemin-jpegtran(jpg圖片壓縮)

imagemin-pngquant(png圖片壓縮)

gulp-image-resize(圖片大小調(diào)整)

14.gulp-rename(重命名)

15.gulp-live-server(輕量服務(wù)器)

16.gulp-livereload

17.gulp-util(工具集)

18.require-dir(引入整個文件夾文件)

19.connect-livereload(熱更新同步)

20.gulp-if(是否運行插件)

21.gulp-plumber

22.gulp-eslint(eslint代碼檢查)

23.gulp-htmlmin(html壓縮)

24.gulp-clean(刪除文件/文件夾)

25.gulp-less

26.gulp-load-plugins(加載gulp插件)

再次強調(diào)安裝插件命令：npm install [module] --save-dev

至于運用我覺得沒啥可說的：就拿常見的舉個例子吧：

del：描述：刪除：

vardel =require('del');del('./dist');// 刪除整個dist文件夾

gulp-rename：描述：重命名文件。

varrename= require("gulp-rename");? ? gulp.src('./hello.txt')? ? .pipe(rename('gb/goodbye.md'))// 直接修改文件名和路徑? .pipe(gulp.dest('./dist'));? ? ? gulp.src('./hello.txt')? ? .pipe(rename({dirname:"text",// 路徑名? basename:"goodbye",// 主文件名? prefix:"pre-",// 前綴? suffix:"-min",// 后綴? extname:".html"http:// 擴展名? }))? ? .pipe(gulp.dest('./dist'));

gulp-filter：描述：在虛擬文件流中過濾文件。

varfilter= require('gulp-filter');constf =filter(['**','!*/index.js']);? gulp.src('js/**/*.js')? ? ? .pipe(f)// 過濾掉index.js這個文件? .pipe(gulp.dest('dist'));constf1 =filter(['**','!*/index.js'], {restore:true});? gulp.src('js/**/*.js')? ? ? .pipe(f1)// 過濾掉index.js這個文件? .pipe(uglify())// 對其他文件進(jìn)行壓縮? .pipe(f1.restore)// 返回到未過濾執(zhí)行的所有文件? .pipe(gulp.dest('dist'));// 再對所有文件操作，包括index.js?

gulp-uglify：描述：壓縮js文件大小。

varuglify =require("gulp-uglify");? ? gulp.src('./hello.js')? ? ? .pipe(uglify())// 直接壓縮hello.js? .pipe(gulp.dest('./dist'))? ? ? ? gulp.src('./hello.js')? ? ? .pipe(uglify({mangle:true,// 是否修改變量名，默認(rèn)為 true? compress:true,// 是否完全壓縮，默認(rèn)為 true? preserveComments:'all'// 保留所有注釋? }))? ? ? .pipe(gulp.dest('./dist'))

gulp-csso：描述：壓縮優(yōu)化css。

varcsso =require('gulp-csso');? ? gulp.src('./css/*.css')? ? ? .pipe(csso())? ? ? .pipe(gulp.dest('./dist/css'))

gulp-html-minify：描述：壓縮HTML。

varhtmlminify =require('gulp-html-minify');? ? gulp.src('index.html')? ? ? .pipe(htmlminify())? ? ? .pipe(gulp.dest('./dist'))

gulp-imagemin：描述：壓縮圖片。

varimagemin =require('gulp-imagemin');? ? gulp.src('./img/*.{jpg,png,gif,ico}')? ? ? .pipe(imagemin())? ? ? .pipe(gulp.dest('./dist/img'))

gulp-autoprefixer：描述：自動為css添加瀏覽器前綴。

varautoprefixer = require('gulp-autoprefixer');? ? gulp.src('./css/*.css')? ? ? .pipe(autoprefixer())// 直接添加前綴? .pipe(gulp.dest('dist'))? ? gulp.src('./css/*.css')? ? ? .pipe(autoprefixer({? ? ? ? ? browsers: ['last 2 versions'],// 瀏覽器版本? cascade：true// 美化屬性，默認(rèn)true? add:true// 是否添加前綴，默認(rèn)true? remove:true// 刪除過時前綴，默認(rèn)true? flexbox:true// 為flexbox屬性添加前綴，默認(rèn)true? }))? ? ? .pipe(gulp.dest('./dist'))

其實在列舉沒啥意思，都是一個套路，想了解那個插件的參數(shù)、使用方法等，直接上https://www.npmjs.com/?上面查詢吧！

注意事項：

src入口匹配說明：

app.js 精確匹配

*.js 能匹配js后綴的文件

*/.js 能匹配多級目錄下的js文件（也包含當(dāng)前目錄下）

!js/app.js 精確排除

return說明

不加return返回，默認(rèn)異步執(zhí)行；加上return意思很明確，就是等待流處理結(jié)束~可做同步處理任務(wù)條件

默認(rèn)任務(wù)說明

只要任務(wù)名字為default，當(dāng)運行g(shù)ulp時是可省略任務(wù)名執(zhí)行，直接鍵入：gulp

任務(wù)依賴說明

gulp.task("task1",function(){//});gulp.task("task2",["task1"],function(){//});

如上代碼：task2依賴于task1，也就是說等待task1任務(wù)結(jié)束后再執(zhí)行

同步執(zhí)行說明

gulp默認(rèn)全部任務(wù)為異步執(zhí)行，其實在實際場景很多需要同步操作：如:拷貝-壓縮操作，必須拷貝完成才能壓縮。

故而推薦一種簡單的方法處理同步問題：使用插件：gulp-sequence

vargulp =require("gulp");//申明gulp變量vargulpSequence =require('gulp-sequence');//同步執(zhí)行模塊gulp.task("task1",function(){returnxxx//具體任務(wù)});gulp.task("task2",function(){returnxxx//具體任務(wù)});gulp.task("task3",function(){returnxxx//具體任務(wù)});//這樣可保證，task1-》task2-》task3的執(zhí)行順序，任務(wù)必須return，已解釋原因gulp.task("default",function(callback){gulpSequence("task1","task2","task3",? ? ? ? ? ? callback);});

啥？你不想看這么多！那也簡單~

1、安裝node?

2、執(zhí)行 npm install gulp -g

3、復(fù)制下面代碼到：package.json（新建）

{"name":"guandn","version":"1.0.0","description":"","main":"index.js","directories": {"lib":"lib"},"dependencies": {"gulp":"^3.9.1"},"devDependencies": {"del":"^3.0.0","gulp-concat":"^2.6.1","gulp-html-minify":"0.0.14","gulp-htmlmin":"^4.0.0","gulp-minify-css":"^1.2.4","gulp-rename":"^1.2.2","gulp-rev":"^8.1.1","gulp-rev-collector":"^1.2.4","gulp-sequence":"^1.0.0","gulp-smushit":"^1.2.0","gulp-uglify":"^3.0.0","gulp-useref":"^3.1.4","merge-stream":"^1.0.1"},"scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"repository": {"type":"git","url":"https://gitee.com/quzhuanpanDesigner/guandn.git"},"author":"broom","license":"ISC"}

4、執(zhí)行：npm install 【根據(jù)package.json安裝插件】

5、復(fù)制下面代碼到：gulpfile.js（新建）

vargulp =require("gulp");//申明gulp變量vardel =require('del');//刪除模塊varfs =require("fs");//文件操作模塊varconcat =require('gulp-concat');// 拼接工具varuglify =require('gulp-uglify');// 壓縮js工具varminifyCss =require('gulp-minify-css');// 壓縮css工具varminiHtml =require("gulp-html-minify");//壓縮html/jspvarsmushit =require('gulp-smushit');//無損壓縮jpg、png圖片varrev =require('gulp-rev');// 加md5后綴的工具varrevCollector =require('gulp-rev-collector');//與rev共同使用varuseref =require('gulp-useref');// 替換文件中的鏈接的工具,一般與gulp-rev共同使用vargulpSequence =require('gulp-sequence');//同步執(zhí)行模塊varmergeStream =require("merge-stream");//合并多個stream//資源配置varconfig={dist:"./dist/guandn/",//目標(biāo)目錄target:'./target/guandn/',//資源}//MD5地圖json地址varrevJsonConfig = {js:'./rev/rev-manifest-js.json',css:'./rev/rev-manifest-css.json',base:'./rev/'}//js壓縮參數(shù)varuglifyConfig = {mangle:false,//類型：Boolean 默認(rèn)：true 是否修改變量名compress:true,//類型：Boolean 默認(rèn)：true 是否完全壓縮}varUtil = {fetchScripts:function(readFile, basePath){//文件操作工具，取得需要合并的jsvarsources = fs.readFileSync(readFile);? ? ? ? ? ? sources =/\[([^\]]+\.js'[^\]]+)\]/.exec(sources);? ? ? ? ? ? sources = sources[1].replace(/\/\/.*\n/g,'\n').replace(/'|"|\n|\t|\s/g,'');? ? ? ? ? ? sources = sources.split(",");console.log("搜索js合并地址：讀取文件： "+readFile);? ? ? ? ? ? sources.forEach(function(filepath, index){? ? ? ? ? ? ? ? sources[ index ] = basePath + filepath;console.log("地址："+ basePath + filepath);? ? ? ? ? ? });returnsources;? ? ? ? },fetchStyles:function(readFile, basePath){//文件操作工具，取得需要合并的cssvarsources = fs.readFileSync(readFile),? ? ? ? ? ? ? ? filepath =null,? ? ? ? ? ? ? ? pattern =/@import\s+([^;]+)*;/g,? ? ? ? ? ? ? ? src = [];console.log("搜索css合并地址：讀取文件： "+readFile);while(filepath = pattern.exec(sources)) {? ? ? ? ? ? ? ? src.push(basePath + filepath[1].replace(/'|"/g,""));console.log("地址："+ basePath + filepath[1].replace(/'|"/g,""));? ? ? ? ? ? }returnsrc;? ? ? ? }? ? };gulp.task("copy",function(){console.log("拷貝代碼到dist************************")returngulp.src(config.target+"/**/*").? ? ? ? ? ? ? ? pipe(gulp.dest(config.dist));});gulp.task("del",function(){console.log("刪除dist、rev目錄************************")returndel([config.dist,revJsonConfig.base]);});//合并任務(wù)gulp.task("combine",function(){console.log("合并任務(wù)開始************************")varcommonJs = Util.fetchScripts(config.dist+"media/common.app.js", config.dist+"media/");varcommJsStream =? gulp.src(commonJs)? ? ? ? .pipe(concat("common.app.js"))? ? ? ? .pipe(uglify())//壓縮.pipe(rev())//加名字MD5.pipe(gulp.dest(config.dist+"media/"))//保存.pipe(rev.manifest({//生成MD5地圖path: revJsonConfig.js,merge:true}))? ? ? ? .pipe(gulp.dest("./"));varcommonCss = Util.fetchStyles(config.dist +"media/common.app.css", config.dist +"media/");varcommCssStream = gulp.src(commonCss)? ? ? ? .pipe(concat("common.app.css"))? ? ? ? .pipe(minifyCss())? ? ? ? .pipe(rev())? ? ? ? .pipe(gulp.dest(config.dist+"media/"))? ? ? ? .pipe(rev.manifest({path: revJsonConfig.css,merge:true}))? ? ? ? .pipe(gulp.dest("./"));varpluginsJs = Util.fetchScripts(config.dist+"media/plugins/plugin.common.app.js", config.dist+"media/plugins/");varpluginJsStream = gulp.src(pluginsJs)? ? ? ? .pipe(concat("plugin.common.app.js"))? ? ? ? .pipe(uglify())//.pipe($.rev()).pipe(gulp.dest(config.dist+"media/plugins/"))//.pipe($.rev.manifest({//? ? path: revJsonConfig.js,//? ? merge: true//})) //.pipe(gulp.dest("./"));varpluginCss = Util.fetchStyles(config.dist +"media/plugins/plugin.common.app.css", config.dist+"media/plugins/");varpluginCssStream = gulp.src(pluginCss)? ? ? ? .pipe(concat("plugin.common.app.css"))? ? ? ? .pipe(minifyCss())//.pipe($.rev()).pipe(gulp.dest(config.dist+"media/plugins/"))//.pipe($.rev.manifest({//? ? path: revJsonConfig.css,//? ? merge: true//})) //.pipe(gulp.dest("./"));//合并編輯器varguandnEditor = Util.fetchScripts(config.dist+"media/plugins/guandnEditor/editor.commbine.min.js", config.dist+"media/plugins/");vareditor = gulp.src(guandnEditor)? ? ? ? .pipe(concat("editor.commbine.min.js"))? ? ? ? .pipe(uglify())? ? ? ? .pipe(rev())? ? ? ? .pipe(gulp.dest(config.dist+"media/plugins/guandnEditor/"))? ? ? ? .pipe(rev.manifest({path: revJsonConfig.js,merge:true}))? ? ? ? .pipe(gulp.dest("./"));//合并上傳插件varguanzhi = Util.fetchScripts(config.dist+"media/plugins/jQuery-File-Upload-master/js/jquery.fileuplaod.all.min.js", config.dist+"media/plugins/")varguanzhiFileUulpad = gulp.src(guanzhi)? ? ? ? ? ? .pipe(concat("jquery.fileuplaod.all.min.js"))? ? ? ? ? ? .pipe(uglify(uglifyConfig))? ? ? ? ? ? .pipe(gulp.dest(config.dist+"media/plugins/jQuery-File-Upload-master/js/"))returnmergeStream(commJsStream,commCssStream,pluginJsStream,pluginCssStream,editor,guanzhiFileUulpad);});//壓縮js，cssgulp.task("compress",function(callback){console.log("壓縮任務(wù)開始***************************")varcompressCss = gulp.src([config.dist+"media/**/*.css","!**/*.min.css","!**/plugins/**/*"])? ? ? ? .pipe(minifyCss())? ? ? ? .pipe(gulp.dest(config.dist+"media/"));varcompressJs = gulp.src([config.dist+"media/**/*.js","!**/*.min.js","!**/plugins/**/*"])? ? ? ? .pipe(uglify(uglifyConfig))? ? ? ? .pipe(gulp.dest(config.dist+"media/"));returnmergeStream(compressCss, compressJs);});//靜態(tài)文件替換gulp.task("replaceJC",function(){console.log("替換靜態(tài)文件**************************");varrevJson = revJsonConfig.base+"**/*.json";varcommonCss = gulp.src([revJson, config.dist+"media/css/common/*.jsp"])? ? ? ? ? .pipe(revCollector({replaceReved:true}))? ? ? ? .pipe(gulp.dest(config.dist+"media/css/common/"));varcommonJs = gulp.src([revJson, config.dist+"media/js/common/*.jsp"])? ? ? ? ? .pipe(revCollector({replaceReved:true}))? ? ? ? .pipe(gulp.dest(config.dist+"media/js/common/"));vareditor = gulp.src([revJson, config.dist+"WEB-INF/pages/**/*.jsp"])? ? ? .pipe(revCollector({replaceReved:true}))? ? .pipe(gulp.dest(config.dist+"WEB-INF/pages/"));returnmergeStream(commonCss, commonJs);});//可異步執(zhí)行操作【最后操作】gulp.task("asyn",function(){console.log("壓縮jsp、拷貝配置**********************************")//? ? gulp.src(config.dist+"WEB-INF/pages/**/*.jsp")//? ? ? ? .pipe(miniHtml({//? ? ? ? ? ? empty: true? //刪除空格//? ? ? ? }))//? ? ? ? .pipe(gulp.dest(config.dist + "WEB-INF/pages/"));//圖片壓縮（費時操作）//? ? gulp.src(config.dist+'media/img/**/*')//? ? ? ? .pipe(smushit({//? ? ? ? ? ? verbose: true//? ? ? ? }))//? ? ? ? .pipe(gulp.dest(config.dist+'media/img/'));});gulp.task("finishedDel",function(){returndel([revJsonConfig.base]);});gulp.task("default",function(callback){? ? gulpSequence("del","copy","combine","compress","replaceJC","finishedDel","asyn",? ? ? ? ? ? callback);});

6、修改gulpfile中的路徑，文件等.

至此gulp的基本使用已經(jīng)沒啥問題了！