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

標籤：var   建立   const   方法   技術分享   記憶體   集合   ges   鏈式   

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("thisis 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 6、Sass和CSS Sprite任務。

“gulp-babel”外掛程式可以將ECMAScript 6編譯為ECMAScript 5。以便運行在不支援ECMAScript 6的瀏覽器上。首先安裝該外掛程式，命令如下：

npm install gulp-babel –save-devnpm install babel-preset-es2015  --save-dev

然後，在gulpfile.js檔案中建立任務，代碼如下：

var babel = require("gulp-babel");      // 引入babelgulp.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。

 

更多資訊關註：

 

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