摘要：簡單做點通俗的講解。如果你想要創建一個序列化的隊列，并以特定的順序執行，嗯，戳文檔文檔。自然是表示任意，全部。到這里，其實就是一個小規模的調試環境，接下來，讓我們升級一下，開始構造簡單的發布環境壓縮采用的是插件。做一個的就好，只需要。

gulp作為一個自動化構建工具，在前端開發中大大的提高了開發效率，前端開發者們可以利用他減少許多繁復無腦的操作。
這里簡單構建一個小環境，就可以在以后的學習中，直接新建各種test.html測試我們新學習的知識點啦~
【看不明白的，有疏漏的，歡迎指出，我更改措辭或者bug】

入門就不講了，會用npm的同學應該都清楚，這里貼一個既有的官方指南。gulp入門指南

詳細的配置我就不講了，api文檔戳進去看。簡單做點通俗的講解。

gulp是由每個小task組成的，我們可以類似函數一樣，把我們需要的一個個小功能以各種task分開寫，然后可以在cmd里使用gulp 方式來執行。

當然任務多了，我們就需要一鍵執行所有操作，所以一般情況下，我們只運行 gulp 命令，則會執行所注冊的名為 default 的 task，然后在default這個任務后面，添加我們寫好的其它task名的數組，則會挨個執行我們寫好的各種task。不然只執行function。
如果沒有default這個 task，那么gulp命令會報錯。

gulp.task("default", function() {
  // 將你的默認的任務代碼放在這
});

注意： 默認的，task 將以最大的并發數執行，也就是說，gulp 會一次性運行所有的 task 并且不做任何等待。如果你想要創建一個序列化的 task 隊列，并以特定的順序執行，嗯，戳文檔api文檔。

其實說白了就是匹配我們要處理的文件，src就是路徑。

gulp.src("client/templates/*.jade")

*自然是表示任意，全部。
glob 請參考 node-glob 語法 或者，你也可以直接寫文件的路徑。

其實就是把src匹配到的文件傳遞到后面來執行。括號里就是我們要進行的各種操作。

有點類似js語法，不難理解，用.接起來，一步步執行。
一般我們會一行行寫，可讀性好點，寫一行不友好。

gulp.src("client/templates/*.jade")
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest("build/minified_templates"));

生成處理好的文件。
你可以將它 pipe 到多個文件夾。如果某文件夾不存在，將會自動創建它。

gulp.src("./client/templates/*.jade")
  .pipe(jade())
  .pipe(gulp.dest("./build/templates"))
  .pipe(minify())
  .pipe(gulp.dest("./build/minified_templates"));

監視文件，并且可以在文件發生改動時候做一些事情。

gulp.watch(glob [, opts], tasks) 
或
gulp.watch(glob [, opts, cb])

需要在文件變動后執行的一個或者多個通過 gulp.task() 創建的 task 的名字，

var watcher = gulp.watch("js/**/*.js", ["uglify","reload"]);
watcher.on("change", function(event) {
  console.log("File " + event.path + " was " + event.type + ", running tasks...");
});

也可以直接執行function，一樣的。

gulp.watch("js/**/*.js", function(event) {
  console.log("File " + event.path + " was " + event.type + ", running tasks...");
});

gulp的很多操作都是用插件執行的，當然，詳細操作自然是每個插件看作者文檔了！而且同一個功能的插件也層出不窮，大家可以根據需要自行選擇。好了，開始我們的構建，注意，提到的每一個插件都要npm安裝

注意：每一個插件都存在可配置的空間，所以關于最大化利用好每個插件，也是參照文檔來的，這里我們取一些通用配置，具體視項目情況而定。

無可厚非，代碼實時保存，瀏覽器實時刷新，是前端最想要的功能，手動刷新瀏覽器相信是每一個前端新手要吐的操作。

采用gulp-connect插件。
根目錄下開啟服務，端口號為2323，開啟實時刷新，局域網內可用。

var connect = require("gulp-connect");
var serverConfig = {
root: "./",
port: 2323,
livereload: true,
host: "::"
}
gulp.task("server",function(){
    connect.server(serverConfig);
});

采用gulp-livereload。
開啟刷新，監聽html變化，并實時刷新。

var livereload = require("gulp-livereload")
gulp.task("watch", function () {
    livereload.listen();
    gulp.watch(["*.html"],function(event){
        livereload.changed(event.path);
    })
});

其實到這里，一個微型的服務就搭建起來了，最后別忘了最根本的一句

var gulp = require("gulp");

不然是起不來的。
為了簡便，可以在gulpfiles.js里添加一行,

gulp.task("default",["server","watch"]);

直接運行gulp就好,讓他們依次執行。

到這里，其實就是一個小規模的調試環境，接下來，讓我們升級一下，開始構造簡單的發布環境

采用的是gulp-htmlmin插件。
抽取src目錄下的所有html文件，導入到htmlmin插件進行處理，并將結果輸出到public目錄，最后重新刷新已開啟的服務。

var htmlmin = require("gulp-htmlmin");
gulp.task("html", function(){
    gulp.src("src/*.html")
        .pipe(htmlmin({
            collapseWhitespace: true,
              removeComments: true
        }))
        .pipe(gulp.dest("public"))
        .pipe(connect.reload());
});

采用的是gulp-uglify插件，但同時，我們也用到了另一個插件gulp-concat，這個是用來連接各個文件組成一個文件。
抽取src/js下的所有js文件，將其合并，然后壓縮，輸出到public/js目錄，最后服務重載。

var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
gulp.task("script",function(){
    gulp.src("src/js/*.js")
        .pipe(concat("main.js"))
        .pipe(uglify({mangle:false}))
        .pipe(gulp.dest("public/js"))
    .pipe(connect.reload());
});

采用的是gulp-cssnano插件。類似js，不解釋了。

var cssnano = require("gulp-cssnano");
gulp.task("css",function(){
gulp.src("src/css/*.css")
    .pipe(concat("animate.css"))
    .pipe(cssnano())
    .pipe(gulp.dest("public/css"))
    .pipe(connect.reload());
})

采取的是gulp-smushit插件，類似js，不解釋。

var smushit = require("gulp-smushit");
gulp.task("imagemin",function(){
    gulp.src(["src/images/*.png","src/images/*.jpg"])
        .pipe(smushit({
            verbose:true
        }))
        .pipe(gulp.dest("public/images"))
        .pipe(connect.reload());
});

這個gulp-watch在前面有講到，其實就是開啟監聽，并重新執行各個html
，js，css，imagemin壓縮任務。
相信大家對比前面的gulp-livereload能夠看的出來，這里兩者是有沖突的，一個只是調試下刷新頁面，一個卻每次都要壓縮。
所以其實實際項目中是不會把壓縮任務配置到watch里，會造成資源浪費，你每保存一次，就會壓縮。只會在最后調試完成，執行壓縮一次。

gulp.task("watch", function () {
  gulp.watch(["src/*.html"], ["html"]);
  gulp.watch(["src/js/*.js"], ["script"]);
  gulp.watch(["src/css/*.css"], ["css"]);
  gulp.watch(["src/images/*.*"], ["imagemin"]);
});

做一個min的task就好，只需要gulp min。

gulp.task("min",["html","script","css","imagemin"]);