摘要：簡(jiǎn)單做點(diǎn)通俗的講解。如果你想要?jiǎng)?chuàng)建一個(gè)序列化的隊(duì)列，并以特定的順序執(zhí)行，嗯，戳文檔文檔。自然是表示任意，全部。到這里，其實(shí)就是一個(gè)小規(guī)模的調(diào)試環(huán)境，接下來(lái)，讓我們升級(jí)一下，開(kāi)始構(gòu)造簡(jiǎn)單的發(fā)布環(huán)境壓縮采用的是插件。做一個(gè)的就好，只需要。

gulp作為一個(gè)自動(dòng)化構(gòu)建工具，在前端開(kāi)發(fā)中大大的提高了開(kāi)發(fā)效率，前端開(kāi)發(fā)者們可以利用他減少許多繁復(fù)無(wú)腦的操作。
這里簡(jiǎn)單構(gòu)建一個(gè)小環(huán)境，就可以在以后的學(xué)習(xí)中，直接新建各種test.html測(cè)試我們新學(xué)習(xí)的知識(shí)點(diǎn)啦~
【看不明白的，有疏漏的，歡迎指出，我更改措辭或者bug】

入門(mén)就不講了，會(huì)用npm的同學(xué)應(yīng)該都清楚，這里貼一個(gè)既有的官方指南。gulp入門(mén)指南

詳細(xì)的配置我就不講了，api文檔戳進(jìn)去看。簡(jiǎn)單做點(diǎn)通俗的講解。

gulp是由每個(gè)小task組成的，我們可以類(lèi)似函數(shù)一樣，把我們需要的一個(gè)個(gè)小功能以各種task分開(kāi)寫(xiě)，然后可以在cmd里使用gulp 方式來(lái)執(zhí)行。

當(dāng)然任務(wù)多了，我們就需要一鍵執(zhí)行所有操作，所以一般情況下，我們只運(yùn)行 gulp 命令，則會(huì)執(zhí)行所注冊(cè)的名為 default 的 task，然后在default這個(gè)任務(wù)后面，添加我們寫(xiě)好的其它task名的數(shù)組，則會(huì)挨個(gè)執(zhí)行我們寫(xiě)好的各種task。不然只執(zhí)行function。
如果沒(méi)有default這個(gè) task，那么gulp命令會(huì)報(bào)錯(cuò)。

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

注意： 默認(rèn)的，task 將以最大的并發(fā)數(shù)執(zhí)行，也就是說(shuō)，gulp 會(huì)一次性運(yùn)行所有的 task 并且不做任何等待。如果你想要?jiǎng)?chuàng)建一個(gè)序列化的 task 隊(duì)列，并以特定的順序執(zhí)行，嗯，戳文檔api文檔。

其實(shí)說(shuō)白了就是匹配我們要處理的文件，src就是路徑。

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

*自然是表示任意，全部。
glob 請(qǐng)參考 node-glob 語(yǔ)法 或者，你也可以直接寫(xiě)文件的路徑。

其實(shí)就是把src匹配到的文件傳遞到后面來(lái)執(zhí)行。括號(hào)里就是我們要進(jìn)行的各種操作。

有點(diǎn)類(lèi)似js語(yǔ)法，不難理解，用.接起來(lái)，一步步執(zhí)行。
一般我們會(huì)一行行寫(xiě)，可讀性好點(diǎn)，寫(xiě)一行不友好。

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

生成處理好的文件。
你可以將它 pipe 到多個(gè)文件夾。如果某文件夾不存在，將會(huì)自動(dòng)創(chuàng)建它。

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

監(jiān)視文件，并且可以在文件發(fā)生改動(dòng)時(shí)候做一些事情。

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

需要在文件變動(dòng)后執(zhí)行的一個(gè)或者多個(gè)通過(guò) gulp.task() 創(chuàng)建的 task 的名字，

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

也可以直接執(zhí)行function，一樣的。

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

gulp的很多操作都是用插件執(zhí)行的，當(dāng)然，詳細(xì)操作自然是每個(gè)插件看作者文檔了！而且同一個(gè)功能的插件也層出不窮，大家可以根據(jù)需要自行選擇。好了，開(kāi)始我們的構(gòu)建，注意，提到的每一個(gè)插件都要npm安裝

注意：每一個(gè)插件都存在可配置的空間，所以關(guān)于最大化利用好每個(gè)插件，也是參照文檔來(lái)的，這里我們?nèi)∫恍┩ㄓ门渲?，具體視項(xiàng)目情況而定。

無(wú)可厚非，代碼實(shí)時(shí)保存，瀏覽器實(shí)時(shí)刷新，是前端最想要的功能，手動(dòng)刷新瀏覽器相信是每一個(gè)前端新手要吐的操作。

采用gulp-connect插件。
根目錄下開(kāi)啟服務(wù)，端口號(hào)為2323，開(kāi)啟實(shí)時(shí)刷新，局域網(wǎng)內(nèi)可用。

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

采用gulp-livereload。
開(kāi)啟刷新，監(jiān)聽(tīng)html變化，并實(shí)時(shí)刷新。

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

其實(shí)到這里，一個(gè)微型的服務(wù)就搭建起來(lái)了，最后別忘了最根本的一句

var gulp = require("gulp");

不然是起不來(lái)的。
為了簡(jiǎn)便，可以在gulpfiles.js里添加一行,

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

直接運(yùn)行gulp就好,讓他們依次執(zhí)行。

到這里，其實(shí)就是一個(gè)小規(guī)模的調(diào)試環(huán)境，接下來(lái)，讓我們升級(jí)一下，開(kāi)始構(gòu)造簡(jiǎn)單的發(fā)布環(huán)境

采用的是gulp-htmlmin插件。
抽取src目錄下的所有html文件，導(dǎo)入到htmlmin插件進(jìn)行處理，并將結(jié)果輸出到public目錄，最后重新刷新已開(kāi)啟的服務(wù)。

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插件，但同時(shí)，我們也用到了另一個(gè)插件gulp-concat，這個(gè)是用來(lái)連接各個(gè)文件組成一個(gè)文件。
抽取src/js下的所有js文件，將其合并，然后壓縮，輸出到public/js目錄，最后服務(wù)重載。

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插件。類(lèi)似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插件，類(lèi)似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());
});

這個(gè)gulp-watch在前面有講到，其實(shí)就是開(kāi)啟監(jiān)聽(tīng)，并重新執(zhí)行各個(gè)html
，js，css，imagemin壓縮任務(wù)。
相信大家對(duì)比前面的gulp-livereload能夠看的出來(lái)，這里兩者是有沖突的，一個(gè)只是調(diào)試下刷新頁(yè)面，一個(gè)卻每次都要壓縮。
所以其實(shí)實(shí)際項(xiàng)目中是不會(huì)把壓縮任務(wù)配置到watch里，會(huì)造成資源浪費(fèi)，你每保存一次，就會(huì)壓縮。只會(huì)在最后調(diào)試完成，執(zhí)行壓縮一次。

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"]);
});

做一個(gè)min的task就好，只需要gulp min。

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