摘要：但是頻繁的關閉服務與重啟服務，這樣就造成了很多時間浪費，所以我們需要利用來監視文件的改動，并將這些改動重新發布到生產目錄，并重啟服務非手動。三預處理器文件編譯暫時沒用到，后面用到再增加，可以參考其他人的

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

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

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資源的起始頁，在dist目錄下
            enable:true
        }
    }))
});

基于以上，然后在命令行中輸入gulp Server就可以開啟一個本地端口為80（也可以為其他）的本地服務器，很簡單有木有，但上面的服務器有一個問題，只有本機能訪問，局域網內其他設備無法訪問該站點，別信網上那些啥開防火墻，開端口胡扯的，根本沒關系，因為gulp的web-server就只有這點功能，想要服務器局域網都能訪問，在gulp-webserver官方文檔的FAQ給出了解決方案：Set 0.0.0.0 as host option.

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

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文件轉移到發布目錄*/
gulp.task("revJs",function(){
    gulp.src("js/main/*.js")
    .pipe(gulp.dest("dist/js/main"))
});
/*將所有的圖片轉移到發布目錄*/
gulp.task("revImg",function(){
    gulp.src("img/**/*")
    .pipe(gulp.dest("dist/img"))
});
/*將css文件合并壓縮轉移到發布目錄*/
gulp.task("revCss",function(){  
     gulp.src("css/*.css")
    .pipe(contact("index.css"))
    .pipe(minifyCss())//{compatibility: "ie8"}
    .pipe(gulp.dest("dist/css"))
});
/*將主文件依賴管理合并、壓縮、重命名、并去掉.js操作，然后轉移到發布目錄，操作后文件名如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}))  //- 生成一個rev-manifest.json，記錄版本映射
    .pipe(gulp.dest(""))    
    .pipe(modify(replaceSuffix))            //- 對去掉rev-manifest問件中的文件去掉.js后綴，這主要是考慮requireJs的操作規范
    .pipe(gulp.dest(""))       
    .on("end",cb);   
});    
/*由于對app.js重命名加入了md5序列號值，所以需要替換原始index.html中關于app.js的引用*/
/*這里需要注意，revCollector()相當于一個全文件查找替換的過程，以我的為例*/ 
/*我的rev-manifest.json文件中對應的映射是："app": "app-1da68b69e1"，所以這個函數在操作時，會對index.html全文模糊搜索‘app’這三個關鍵字，然后替換為app-1da68b69e1，*/
/*這其中容易出錯就在于他是模糊搜索，所以如果你的文件中有個css的class名或自定義的標簽名會內容帶有app三個字母，它都會進行替換，所以，在轉換過程中，要避開這個坑*/      
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,就可以達到上述目的，這樣是不是有點繁瑣，能不能一步到位？當然可以，我們可以幫上述任務寫到一個命令中，當然你也可以寫到default任務中，然后執行gulp alltask

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

上述代碼有一個問題，特別是針對我的項目，因為我的updateHtml是基于optimizeJS執行完后生成的rev-manifest.json執行的，但gulp.task中的任務組，默認是并行執行的，但我希望的是前三個轉移并行執行，后面兩個串行執行，經過資料查找得知，在gulp 4之前，需要依賴run-sequence來管理任務的執行順序，而gulp 4引入了連個新的API：gulp.series（串行）和gulp.parallel（并行）來保證任務按指定的順序執行。在這里我采用了run-sequence的解決方案：

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

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

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

var browserSync = require("browser-sync").create(); //引入模塊 
/*每次發布生產文件前，先將dist目錄下的文件情況*/
gulp.task("clean",function () {
    return gulp.src([
        "rev-manifest.json",
        "dist/js/*.js",
        "dist/index.html"
    ]).pipe(clean());
});   
/*每次app.js變動時，需要清除rev-manifest.json文件中的映射，使其保證只有唯一的一個映射*/
gulp.task("JSreload",function(){
    return gulp.src(["rev-manifest.json", "dist/js/*.js","dist/index.html"]).pipe(clean());
})     
/*每次任務發起前，先清空溫江，然后再依次發布文件，啟動服務器，監聽變動*/
gulp.task("server", ["clean"], function() {  
    runSequence(       
        "revImg",
        "revCss",
        "revJs",
        "optimizeJS",        //- - 文件合并與md5并去.js后綴
        "updateHtml"      //- 首頁路徑替換為md5后的路徑
    );      
    browserSync.init({  
        port: 80,  
        server: {  
            baseDir: ["dist"]  
        }  
    });  
  //監控文件變化，自動更新 
    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事務，注冊為默認任務/
gulp.task("default",["server"]);
基于以上操作，命令行運行gulp ,我們就開啟了一個基于browserSync的本地服務器如下圖所示，并且局域網內的設備都可以通過主機IP+port訪問應用。

暫時沒用到，后面用到再增加，可以參考其他人的