《移動Web前端高效開發實戰》筆記2——使用Gulp構建一個ECMAScript 6和Sass應用

8.3.1 安裝和配置

運行Gulp須要Node.js環境，請參看第二章內容搭建Node.js環境。使用NPM全局安裝Gulp，命令以下：

npm install gulp-cli –g複製代碼

而後，在項目根目錄下建立package.json文件，命令以下：

npm init複製代碼

根據引導配置項目信息。而後安裝Gulp依賴包，命令以下：

npm install gulp –save-dev複製代碼

在項目根目錄下，建立gulpfile.js文件，內容以下：

var gulp = require("gulp");
gulp.task("default", function(){            // 定義名稱爲「default」的任務
    console.log("this is default task");    // 此處定義default任務處理過程。
});複製代碼

和Grunt類似，Gulp將構建過程拆解爲一個個獨立的子任務，使用gulp.task方法定義任務。經過命令提示符進入到項目目錄，用「gulp 任務名」執行任務，實例命令以下：

gulp default複製代碼

提示：對於默認（default）任務，能夠省去任務名。
在建立任務的時候，和Grunt類似，能夠指定任務的依賴項，代碼以下：

gulp.task(「main」, [「deps1」, 「deps2」, …], function(){
    // 相關執行
});複製代碼

gulp.task方法的第二個參數（數組）爲「main」任務的依賴項。
項目中一般根據需求將構建過程拆解爲多個小任務。下面介紹如何具體定義。
首先，指定須要構建的內容，並經過Gulp插件來完成構建，最終輸出到指定的目錄。
採用gulp.src方法指定文件源，代碼以下：

gulp.src(「src/**/*.js」);：
// 或者 對於多個目錄下的源，能夠採用數組
gulp.src([「src/**/*.js」, 「theme/**/*.scss」]);複製代碼

gulp.src方法返回Stream對象，能夠經過pipe方法將內容傳遞給插件。全部插件都接受pipe傳遞過來的數據，處理數據容許鏈式調用，代碼以下：

gulp.src(「src/**/*.js」).pipe(plugin1()).pipe(plugin2())…複製代碼

構建完畢後，須要採用gulp.dest方法將數據保存到文件中，代碼以下：

gulp.src(「src/**/*.js」).pipe(gulp.dest(「dist」));     // 讀取src下的全部js，寫入到dist目錄下複製代碼

Gulp的每次操做都返回流對象，全部操做在內存中進行，不須要操做磁盤，從而大幅提升了構建速度。

8.3.2 預處理任務

上一節中，介紹了Gulp的安裝，配置，以及Grunt任務的定義和執行。本節將介紹編譯ECMAScript 六、Sass和CSS Sprite任務。
「gulp-babel」插件能夠將ECMAScript 6編譯爲ECMAScript 5。以便運行在不支持ECMAScript 6的瀏覽器上。首先安裝該插件，命令以下：

npm install gulp-babel –save-dev
npm install babel-preset-es2015  --save-dev複製代碼

而後，在gulpfile.js文件中建立任務，代碼以下：

var babel = require("gulp-babel");    // 引入babel
gulp.task("compile-js", function(){
    gulp.src("src/**/*.js")            // 處理src下的全部js腳本
        .pipe(babel({            // 調用babel
            presets: ['es2015']    // 採用es2015預設插件，將腳本編譯爲ECMAScript 5
        }))
        pipe(gulp.dest("dist/js"));    // 編譯好的內容保存到dist目錄下的js目錄
});複製代碼

Babel能夠將JavaScript文件，甚至React的JSX文件編譯爲標準的JavaScript文件。Babel官方提供的預設插件（presets）讓用戶可以更簡單地使用Babel。presets是針對特定編譯條件預設的一組插件集合。如本實例中，採用的es2015預設插件包含插件有「check-es2015-constants」，「transform-es2015-arrow-functions」等。
注意：Babel只是作了語法層次的轉換，並不會增長API的支持。對於class關鍵字定義的類，Babel會將其轉化爲經過prototype定義的對象。而對於ECMAScript 6的Promise對象，Babel不會作任何處理，所以須要經過polyfill來對瀏覽器不支持的API進行擴展。如「es6-promise」使得瀏覽器支持Promise對象。
在實際的項目中，能夠在根目錄下建立的「.babelrc」文件中配置Babel，代碼以下：

{
    "presets":["es2015"]
}複製代碼

編譯Sass文件能夠採用gulp-sass插件，安裝命令以下：

npm install gulp-sass –save-dev複製代碼

而後，在gulpfile.js文件中，增長任務執行Sass編譯，代碼以下：

var sass = require("gulp-sass");                // 引入sass插件 
gulp.task("compile-sass", function(){            // 定義編譯sass的任務
    gulp.src("theme/**/*.scss")                // 處理theme下的全部的sass文件
    .pipe(sass().on('error', sass.logError))    // 採用sass插件編譯，並處理錯誤
    .pipe(gulp.dest("dist/css"));            // 編譯好的內容輸出到dist目錄下的css目錄
});複製代碼

在項目中，爲了優化加載性能，須要將小圖片合成一張大圖，也就是所謂的「CSS Sprites」。該功能使用gulp.spritesmith插件來實現，安裝命令以下：

npm install gulp.spritesmith –save-dev複製代碼

而後在gulpfile.js文件中創建任務，代碼以下：

var spritesmith = require('gulp.spritesmith');        // 引入sprite插件
gulp.task("sprite", function () {                    // 定義任務
    gulp.src("theme/images/**.png")            // 處理theme目錄下的png文件
        .pipe(spritesmith({                    // 調用插件合併圖片
            imgName: 'sprite.png',            // 輸出合成的圖片名稱
            cssName: 'sprite.css'                // 輸出對應的css文件
        }))
        .pipe(gulp.dest("dist"));                // 輸出到dist目錄
});複製代碼

本節介紹了三個預處理工具，有gulp-babel，gulp-sass和gulp.spritesmith。