摘要：從大約年開始前端不再是當(dāng)初那個(gè)切圖排版的前端了，各種框架庫(kù)工具呈井噴之勢(shì)層出不窮。作為一個(gè)怕麻煩的懶人，對(duì)于前端的繁雜工作當(dāng)然是要找一個(gè)自動(dòng)化工具來(lái)處理，于是我遇到了。

從(大約)2014年開始,前端不再是當(dāng)初那個(gè)切圖排版的前端了，各種MV*框架、庫(kù)、工具呈井噴之勢(shì)層出不窮。構(gòu)建工具比較有名的如Grunt、Gulp、Yeoman、webpack；依賴管理比如bower、npm，當(dāng)然最流行最廣為人知的還是作為Nodejs的管理器npm；模塊化出現(xiàn)了CMD、AMD、UMD等，例如requirejs、seajs等的。

當(dāng)然，許多技術(shù)、技術(shù)思維等出現(xiàn)的時(shí)代甚至可以追溯至上個(gè)世紀(jì)。但進(jìn)入大眾視線，并逐步投產(chǎn)的時(shí)代卻為時(shí)尚早。

作為一個(gè)怕麻煩的懶人，對(duì)于前端的繁雜工作當(dāng)然是要找一個(gè)自動(dòng)化工具來(lái)處理，于是我遇到了Gulp。作為自動(dòng)化工具，Gulp經(jīng)常被拿來(lái)和Grunt比較，孰優(yōu)孰劣不能一概而論，畢竟每個(gè)人關(guān)注的地方也不一樣。關(guān)于Gulp與Grunt的對(duì)比，網(wǎng)絡(luò)上有許多總結(jié)好的特點(diǎn)，有興趣的可以去搜索查看閱讀，我在這里就不湊字?jǐn)?shù)了。

要使用Gulp，首先要做的第一步當(dāng)然是要安裝她啦！Gulp是基于NodeJs的一個(gè)自動(dòng)化構(gòu)建工具，既然是基于NodeJs了，那么安裝Gulp之前自然要保證你已經(jīng)安裝了NodeJS，這里我會(huì)從安裝NodeJS開始。

我這里使用Ubuntu 16.04 LTS版本作為主機(jī)環(huán)境，其他版本的請(qǐng)自行注意差異。Windows相對(duì)Ubuntu來(lái)說就更簡(jiǎn)單了，相信難不到大家。

首先我們來(lái)安裝NodeJS。Ubuntu下安裝Linux有兩種方案，一是采用APT安裝，但此辦法并沒有自動(dòng)安裝NPM，需要手動(dòng)安裝；第二種方案則是下載Nodejs源碼，自行編譯安裝。這里采用懶省事的辦法——APT。

sudo apt-get install nodejs-legacy npm

回車之后，輸入密碼，APT就會(huì)自動(dòng)幫你把Nodejs、npm安裝好了。當(dāng)安裝過程結(jié)束后回到命令指引時(shí)候，可以輸入nodejs -v 和 npm -v 來(lái)檢查安裝結(jié)果。

注意：Ubutun中，NodeJS的包名有兩個(gè)nodejs和nodejs-legacy,而不是node。

如果一切順利，安裝Gulp的前置步驟已經(jīng)完成了。接下來(lái)我們安裝Gulp，Gulp是作為NodeJS的一個(gè)模塊存在的，因此安裝的時(shí)候要用到NPM。

sudo npm install -g gulp

這一步結(jié)束之后，Gulp安裝就結(jié)束了。接下來(lái)就到了關(guān)鍵時(shí)刻啦，配置Gulp的task，Gulp雖然是自動(dòng)化構(gòu)建工具，但還是需要我們來(lái)給她指定task，讓她安裝我們指定的task來(lái)工作，她還沒聰明到猜測(cè)我們要做什么、怎么做。

Gulp的API較之Grunt少的多，僅僅只有4個(gè)。

gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name [, deps] [, fn])
gulp.watch(glob [, opts], tasks) || gulp.watch(glob [, opts, cb])

依靠這4個(gè)API和眾多的Gulp 插件，我們就能實(shí)現(xiàn)許多我們需要的功能。在編寫Gulp任務(wù)之前，我們首先要在當(dāng)前目錄安裝Gulp。

sudo npm install --save-dev gulp

一切準(zhǔn)備工作已經(jīng)就緒，下面我們就進(jìn)入主題，我們就來(lái)寫一個(gè)簡(jiǎn)單的Gulp任務(wù)文件。
在當(dāng)前目錄創(chuàng)建一個(gè)空的文件，名字叫做gulpfile.js。

var gulp = require("gulp");

gulp.task("default", function(){
    console.log("task default done");    
});

將以上代碼保存在gulpfile.js里。然后在命令行終端里進(jìn)入當(dāng)前目錄,在命令行終端里輸入gulp。gulp會(huì)自動(dòng)查找當(dāng)前目錄中的gulpfile.js,然后分析gulpfile中的任務(wù)列表，命令行中如果沒參數(shù)，則默認(rèn)執(zhí)行 default 任務(wù)，如果指定，則執(zhí)行指定的任務(wù)。

正常情況下，將會(huì)在終端中看到

task default done

這行輸出，并且還有每個(gè)任務(wù)開始時(shí)間和結(jié)束時(shí)間。

以上就是一個(gè)簡(jiǎn)單的Gulp 任務(wù)，下面我會(huì)把我常用的配置發(fā)出來(lái)。我一般使用到的有幾個(gè)功能。

SASS編譯壓縮

JS壓縮

browerSync(改動(dòng)文件自動(dòng)刷新HTML和CSS、JS等)

gulpfile內(nèi)容如下

var gulp = require("gulp"),
    uglify = require("gulp-uglify"),
    cssMinify = require("gulp-cssnano"),
    browserSync = require("browser-sync").create(),
    compass = require("gulp-compass"),
    paths = {
        scripts: ["js/*.js"],  // JS文件路徑
        css: "sass/*.scss", // scss 文件路徑
    };

gulp.task("scripts", function() {
    return gulp.src(paths.scripts) // 讀取JS文件
        .pipe(uglify()) // 壓縮
        .pipe(gulp.dest("script/"))  //將壓縮后的文件保存到 script目錄
        .pipe(browserSync.stream()); // 通知browserSync 重載 JS文件
});

gulp.task("css", function() {
    return gulp.src(paths.css)  // 讀取SCSS文件
        .pipe(compass({
            sass: "sass",
            image: "images"
        })) // 進(jìn)行編譯處理
        .pipe(cssMinify()) // 壓縮CSS文件
        .pipe(gulp.dest("css/")) // 發(fā)布到css 目錄
        .pipe(browserSync.stream()); // 通知browserSync刷新CSS文件
});

// 注冊(cè)serve 任務(wù)，serve任務(wù)依賴scrips 和 css 兩個(gè)任務(wù)
gulp.task("serve", ["scripts", "css"], function() {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch(paths.scripts, ["scripts"]);
    gulp.watch(paths.css, ["css"]);
    gulp.watch("*.html").on("change", browserSync.reload);
});

// The default task (called when you run `gulp` from cli)
gulp.task("default", ["serve"]);  // 將serve 任務(wù)注冊(cè)為默認(rèn)任務(wù)。

在這個(gè)任務(wù)清單中，需要依賴以下插件。

gulp-uglify
gulp-cssnano
browser-sync
gulp-compass

在使用中，直接進(jìn)入到當(dāng)前目錄中，在終端中運(yùn)行gulp,將會(huì)啟動(dòng)一個(gè)http服務(wù)，并且打開瀏覽器窗口。

服務(wù)啟動(dòng)后，無(wú)論你修改CSS、JS還是HTML，都會(huì)自動(dòng)編譯壓縮并且自動(dòng)刷新HTML(如果需要，修改CSS、JS是不需要刷新整個(gè)頁(yè)面，只會(huì)重新加載CSS、JS)。

好了，亂七八糟的這個(gè)Gulp教程到這里算是馬馬虎虎的收尾了。其實(shí)Gulp 還是蠻強(qiáng)大的，還是有許多內(nèi)容沒提到的，Gulp的API、插件的API這些都沒有去講解，去看一下文檔大家應(yīng)該就明白了。

當(dāng)然，這個(gè)配置還是有不足的，Gulp官方推薦的一些最佳實(shí)踐都沒應(yīng)用到，甚至一些功能也沒有完成，比如圖片壓縮、公用模板引用。

圖片壓縮可以去查看一下gulp-imagemin,公共模板引用gulp-content-includer。