摘要：但是頻繁的關(guān)閉服務(wù)與重啟服務(wù)，這樣就造成了很多時(shí)間浪費(fèi)，所以我們需要利用來(lái)監(jiān)視文件的改動(dòng)，并將這些改動(dòng)重新發(fā)布到生產(chǎn)目錄，并重啟服務(wù)非手動(dòng)。三預(yù)處理器文件編譯暫時(shí)沒(méi)用到，后面用到再增加，可以參考其他人的

關(guān)于gulp，grunt,webpack，剛走前端模塊化的我，真的是傻傻分不清楚，幸好有大神各種答疑解惑，使我略知一二，你也想知道的，也許還想知道點(diǎn)啥，資源羅列：
1、中文官方文檔；
2、阮老師的gulp入門(mén)；
3、我的參考;
本次開(kāi)發(fā),受尤大神知乎上的回答提示，沒(méi)有采用vue-cli直接入手vue框架，而是采用vue全家桶+requireJs+gulp著手自己的前端構(gòu)建，gulp為自己第一次使用，所以寫(xiě)下此文，算是對(duì)自己成長(zhǎng)的一次記錄。關(guān)于gulp，首先你得知道npm,node這些常識(shí)，其次官方的API應(yīng)該細(xì)度加實(shí)踐一下，其四個(gè)基本操作：gulp.task、gulp.src、gulp.dest、gulp.watch四個(gè)基本方法，需用知道是干什么的，該怎么用。gulp有什么用？文章將基于以下4條逐一展開(kāi)講：
1、搭建web服務(wù)器
2、優(yōu)化資源，比如壓縮CSS、JavaScript、壓縮圖片；
3、使用預(yù)處理器LESS，jade，JSX需要編譯發(fā)布；
4、文件保存時(shí)自動(dòng)重載瀏覽器；

通常開(kāi)發(fā)時(shí)，我們不可能一直寫(xiě)靜態(tài)頁(yè)面，我們需要在其他設(shè)備查看效果或者與后臺(tái)的動(dòng)態(tài)交互，使前端開(kāi)發(fā)變得更有意義。所以與后端交付之前，你得有一個(gè)本地服務(wù)器來(lái)發(fā)布你的內(nèi)容。直白點(diǎn)說(shuō)，沒(méi)有服務(wù)器，我們是通過(guò)這樣的鏈接（file:///D:/vueProject/myblog/dist/index.html）訪問(wèn)我們的頁(yè)面的，而有了服務(wù)器依賴，我們是通過(guò)這樣的鏈接（http://localhost/）訪問(wèn)我們的頁(yè)面的，應(yīng)用上線的感覺(jué)，有沒(méi)有？其實(shí)以前基于JavaWeb開(kāi)發(fā)（tomcat）網(wǎng)頁(yè)時(shí)，根本就沒(méi)這檔子事。閑話少扯，進(jìn)入正題。利用gulp資源，開(kāi)啟一個(gè)服務(wù)器，你需要下載安裝gulp-webserver這個(gè)插件，然后這樣配置,源碼：

var gulp = require("gulp");
var webserver = require("gulp-webserver");
gulp.task("Server",function(){
    gulp.src("dist")  //你web資源的根目錄
    .pipe(webserver({
        port:80,
        host:"127.0.0.1",
        liveload:true,
        directoryListing:{
            path:"index.html", //你web資源的起始頁(yè)，在dist目錄下
            enable:true
        }
    }))
});

基于以上，然后在命令行中輸入gulp Server就可以開(kāi)啟一個(gè)本地端口為80（也可以為其他）的本地服務(wù)器，很簡(jiǎn)單有木有，但上面的服務(wù)器有一個(gè)問(wèn)題，只有本機(jī)能訪問(wèn)，局域網(wǎng)內(nèi)其他設(shè)備無(wú)法訪問(wèn)該站點(diǎn)，別信網(wǎng)上那些啥開(kāi)防火墻，開(kāi)端口胡扯的，根本沒(méi)關(guān)系，因?yàn)間ulp的web-server就只有這點(diǎn)功能，想要服務(wù)器局域網(wǎng)都能訪問(wèn)，在gulp-webserver官方文檔的FAQ給出了解決方案：Set 0.0.0.0 as host option.

gulp的主要功能就是文件的合并，壓縮，MD5，由于我的前端JS是基于requireJS構(gòu)建的，為了在頁(yè)面加載時(shí)提高響應(yīng)速度，就需要減少文件請(qǐng)求數(shù)量并壓縮文件的大小，為了做這些操作，需要下載gulp-requirejs-optimize（requireJS序列化工具），gulp-rename，gulp-concat，gulp-minify-css，gulp-rev，gulp-rev-collector，through2，gulp-clean，run-sequence等插件包。我要達(dá)到的目如下圖所示，重新生成發(fā)布目錄、CSS文件的合并壓縮，JS文件的優(yōu)化及壓縮及重命名帶上MD5序列號(hào)。上源碼：，

var gulp = require("gulp"),
reqOptimize =require("gulp-requirejs-optimize"),
rename = require("gulp-rename"),
changed = require("gulp-changed"),
contact =require("gulp-concat"),
rev =require("gulp-rev"),
through2 = require("through2"),
revCollector = require("gulp-rev-collector"),
clean = require("gulp-clean"),
runSequence = require("run-sequence"),
minifyCss = require("gulp-minify-css");
/*將requireJs文件轉(zhuǎn)移到發(fā)布目錄*/
gulp.task("revJs",function(){
    gulp.src("js/main/*.js")
    .pipe(gulp.dest("dist/js/main"))
});
/*將所有的圖片轉(zhuǎn)移到發(fā)布目錄*/
gulp.task("revImg",function(){
    gulp.src("img/**/*")
    .pipe(gulp.dest("dist/img"))
});
/*將css文件合并壓縮轉(zhuǎn)移到發(fā)布目錄*/
gulp.task("revCss",function(){  
     gulp.src("css/*.css")
    .pipe(contact("index.css"))
    .pipe(minifyCss())//{compatibility: "ie8"}
    .pipe(gulp.dest("dist/css"))
});
/*將主文件依賴管理合并、壓縮、重命名、并去掉.js操作，然后轉(zhuǎn)移到發(fā)布目錄，操作后文件名如app-1da68b69e1.js*/        
function modify(modifier) {
    return through2.obj(function(file, encoding, done) {
        var content = modifier(String(file.contents));      
        file.contents = new Buffer(content);
        this.push(file);
        done();
    });
}   
function replaceSuffix(data) {
    return data.replace(/.js/gmi, "");
}    
gulp.task("optimizeJS", function (cb) {
    gulp.src("js/app.js")
    .pipe(reqOptimize({
    optimize:"none",
    paths:{
        vue:"lib/vue",
        vueRouter:"lib/vue-router",
        vueResource:"lib/vue-resource",
        temp:"component/template",
        resize:"component/resizeWindow"
    }
    }))
    .pipe(rev())  //- 文件名加MD5后綴
    .pipe(gulp.dest("dist/js"))   //- 生成MD5后的文件
    .pipe(rev.manifest({merge:true}))  //- 生成一個(gè)rev-manifest.json，記錄版本映射
    .pipe(gulp.dest(""))    
    .pipe(modify(replaceSuffix))            //- 對(duì)去掉rev-manifest問(wèn)件中的文件去掉.js后綴，這主要是考慮requireJs的操作規(guī)范
    .pipe(gulp.dest(""))       
    .on("end",cb);   
});    
/*由于對(duì)app.js重命名加入了md5序列號(hào)值，所以需要替換原始index.html中關(guān)于app.js的引用*/
/*這里需要注意，revCollector()相當(dāng)于一個(gè)全文件查找替換的過(guò)程，以我的為例*/ 
/*我的rev-manifest.json文件中對(duì)應(yīng)的映射是："app": "app-1da68b69e1"，所以這個(gè)函數(shù)在操作時(shí)，會(huì)對(duì)index.html全文模糊搜索‘a(chǎn)pp’這三個(gè)關(guān)鍵字，然后替換為app-1da68b69e1，*/
/*這其中容易出錯(cuò)就在于他是模糊搜索，所以如果你的文件中有個(gè)css的class名或自定義的標(biāo)簽名會(huì)內(nèi)容帶有app三個(gè)字母，它都會(huì)進(jìn)行替換，所以，在轉(zhuǎn)換過(guò)程中，要避開(kāi)這個(gè)坑*/      
gulp.task("updateHtml",function (cb) {
    gulp.src(["rev-manifest.json", "index.html"])  
        .pipe(revCollector())                   //- 替換為MD5后的文件名
        .pipe(rename("index.html"))
        .pipe(gulp.dest("dist"))
        .on("end", cb);
});

基于以上源碼，在命令行中依次輸入gulp revJs,gulp revImg,gulp revCss, gulp optimizeJS,gulp updateHtml,就可以達(dá)到上述目的，這樣是不是有點(diǎn)繁瑣，能不能一步到位？當(dāng)然可以，我們可以幫上述任務(wù)寫(xiě)到一個(gè)命令中，當(dāng)然你也可以寫(xiě)到default任務(wù)中，然后執(zhí)行g(shù)ulp alltask

gulp.task("alltask",["revJs","revImg","revCss","optimizeJS","updateHtml"])

上述代碼有一個(gè)問(wèn)題，特別是針對(duì)我的項(xiàng)目，因?yàn)槲业膗pdateHtml是基于optimizeJS執(zhí)行完后生成的rev-manifest.json執(zhí)行的，但gulp.task中的任務(wù)組，默認(rèn)是并行執(zhí)行的，但我希望的是前三個(gè)轉(zhuǎn)移并行執(zhí)行，后面兩個(gè)串行執(zhí)行，經(jīng)過(guò)資料查找得知，在gulp 4之前，需要依賴run-sequence來(lái)管理任務(wù)的執(zhí)行順序，而gulp 4引入了連個(gè)新的API：gulp.series（串行）和gulp.parallel（并行）來(lái)保證任務(wù)按指定的順序執(zhí)行。在這里我采用了run-sequence的解決方案：

gulp.task("default", function(callback) {
    runSequence(
        "clean",                //- 上一次構(gòu)建的結(jié)果清空
        "revImg",
        "revCss",
        "revJs",                
        "optimizeJS",        //- - 文件合并與md5并去.js后綴
        "updateHtml",      //- 首頁(yè)路徑替換為md5后的路徑
        "Server",   //- 服務(wù)器開(kāi)啟
        callback);
});

下一步重點(diǎn)研究，怎樣將生成后的JS及CSS文件帶上如browser-sync-client.js?v=2.18.12版本號(hào)的形式。

在我們的開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)修改html，CSS，js文件，由于我們的生產(chǎn)目錄與開(kāi)發(fā)目錄不一致，所以需要執(zhí)行GULP命令來(lái)發(fā)布文件到生產(chǎn)目錄。但是頻繁的關(guān)閉服務(wù)與重啟服務(wù)，這樣就造成了很多時(shí)間浪費(fèi)，所以我們需要利用gulp.watch來(lái)監(jiān)視文件的改動(dòng)，并將這些改動(dòng)重新發(fā)布到生產(chǎn)目錄，并重啟服務(wù)（非手動(dòng)）。由于個(gè)人覺(jué)得gulp-webServer與gulp-livereload的局限性，所以講服務(wù)采用browser-sync來(lái)代替gulp-webServer，后者自身支持熱更新，無(wú)需在瀏覽器安裝任何插件（gulp-livereload需要安裝livereload插件），直接上源碼：

var browserSync = require("browser-sync").create(); //引入模塊 
/*每次發(fā)布生產(chǎn)文件前，先將dist目錄下的文件情況*/
gulp.task("clean",function () {
    return gulp.src([
        "rev-manifest.json",
        "dist/js/*.js",
        "dist/index.html"
    ]).pipe(clean());
});   
/*每次app.js變動(dòng)時(shí)，需要清除rev-manifest.json文件中的映射，使其保證只有唯一的一個(gè)映射*/
gulp.task("JSreload",function(){
    return gulp.src(["rev-manifest.json", "dist/js/*.js","dist/index.html"]).pipe(clean());
})     
/*每次任務(wù)發(fā)起前，先清空溫江，然后再依次發(fā)布文件，啟動(dòng)服務(wù)器，監(jiān)聽(tīng)變動(dòng)*/
gulp.task("server", ["clean"], function() {  
    runSequence(       
        "revImg",
        "revCss",
        "revJs",
        "optimizeJS",        //- - 文件合并與md5并去.js后綴
        "updateHtml"      //- 首頁(yè)路徑替換為md5后的路徑
    );      
    browserSync.init({  
        port: 80,  
        server: {  
            baseDir: ["dist"]  
        }  
    });  
  //監(jiān)控文件變化，自動(dòng)更新 
    gulp.watch("js/app.js", function(){
            runSequence(
            "JSreload",
            "optimizeJS",           
            "updateHtml", 
            browserSync.reload     
        );       
    });  
    gulp.watch("css/*.css",  function(){
            runSequence(
            "revCss",
            browserSync.reload     
        );       
    });
    gulp.watch("index.html",  function(){
            runSequence(
            "updateHtml", 
            browserSync.reload    
        );       
    }); 
});

/將server事務(wù)，注冊(cè)為默認(rèn)任務(wù)/
gulp.task("default",["server"]);
基于以上操作，命令行運(yùn)行g(shù)ulp ,我們就開(kāi)啟了一個(gè)基于browserSync的本地服務(wù)器如下圖所示，并且局域網(wǎng)內(nèi)的設(shè)備都可以通過(guò)主機(jī)IP+port訪問(wèn)應(yīng)用。

暫時(shí)沒(méi)用到，后面用到再增加，可以參考其他人的