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

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

當然，許多技術、技術思維等出現的時代甚至可以追溯至上個世紀。但進入大眾視線，并逐步投產的時代卻為時尚早。

作為一個怕麻煩的懶人，對于前端的繁雜工作當然是要找一個自動化工具來處理，于是我遇到了Gulp。作為自動化工具，Gulp經常被拿來和Grunt比較，孰優孰劣不能一概而論，畢竟每個人關注的地方也不一樣。關于Gulp與Grunt的對比，網絡上有許多總結好的特點，有興趣的可以去搜索查看閱讀，我在這里就不湊字數了。

要使用Gulp，首先要做的第一步當然是要安裝她啦！Gulp是基于NodeJs的一個自動化構建工具，既然是基于NodeJs了，那么安裝Gulp之前自然要保證你已經安裝了NodeJS，這里我會從安裝NodeJS開始。

我這里使用Ubuntu 16.04 LTS版本作為主機環境，其他版本的請自行注意差異。Windows相對Ubuntu來說就更簡單了，相信難不到大家。

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

sudo apt-get install nodejs-legacy npm

回車之后，輸入密碼，APT就會自動幫你把Nodejs、npm安裝好了。當安裝過程結束后回到命令指引時候，可以輸入nodejs -v 和 npm -v 來檢查安裝結果。

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

如果一切順利，安裝Gulp的前置步驟已經完成了。接下來我們安裝Gulp，Gulp是作為NodeJS的一個模塊存在的，因此安裝的時候要用到NPM。

sudo npm install -g gulp

這一步結束之后，Gulp安裝就結束了。接下來就到了關鍵時刻啦，配置Gulp的task，Gulp雖然是自動化構建工具，但還是需要我們來給她指定task，讓她安裝我們指定的task來工作，她還沒聰明到猜測我們要做什么、怎么做。

Gulp的API較之Grunt少的多，僅僅只有4個。

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

依靠這4個API和眾多的Gulp 插件，我們就能實現許多我們需要的功能。在編寫Gulp任務之前，我們首先要在當前目錄安裝Gulp。

sudo npm install --save-dev gulp

一切準備工作已經就緒，下面我們就進入主題，我們就來寫一個簡單的Gulp任務文件。
在當前目錄創建一個空的文件，名字叫做gulpfile.js。

var gulp = require("gulp");

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

將以上代碼保存在gulpfile.js里。然后在命令行終端里進入當前目錄,在命令行終端里輸入gulp。gulp會自動查找當前目錄中的gulpfile.js,然后分析gulpfile中的任務列表，命令行中如果沒參數，則默認執行 default 任務，如果指定，則執行指定的任務。

正常情況下，將會在終端中看到

task default done

這行輸出，并且還有每個任務開始時間和結束時間。

以上就是一個簡單的Gulp 任務，下面我會把我常用的配置發出來。我一般使用到的有幾個功能。

SASS編譯壓縮

JS壓縮

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

gulpfile內容如下

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"
        })) // 進行編譯處理
        .pipe(cssMinify()) // 壓縮CSS文件
        .pipe(gulp.dest("css/")) // 發布到css 目錄
        .pipe(browserSync.stream()); // 通知browserSync刷新CSS文件
});

// 注冊serve 任務，serve任務依賴scrips 和 css 兩個任務
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 任務注冊為默認任務。

在這個任務清單中，需要依賴以下插件。

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

在使用中，直接進入到當前目錄中，在終端中運行gulp,將會啟動一個http服務，并且打開瀏覽器窗口。

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

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

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

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