《移動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("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-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。
更多信息關註:
《移動Web前端高效開發實戰》筆記2——使用Gulp構建一個ECMAScript 6和Sass應用