《移動Web前端高效開發實戰》筆記3--代碼檢查任務

標籤：sas   var   one   error   cti   全域   --   一個   處理   

在項目的開發過程中，統一的代碼風格對於項目的可協作性以及可維護性來說相當重要，因此可以採用一些外掛程式來進行代碼風格的檢查。

本例中的源檔案包含兩類：Sass檔案和採用ECMAScript 6規範的JavaScript檔案。在Gulp中，採用gulp-eslint和gulp-sass-lint外掛程式來分別進行檢測。

1.代碼檢查任務中，採用開源的JavaScript驗證工具ESlint進行處理，執行任務前需要先全域安裝ESLint，命令如下：

 

npm install eslint –g

2.在項目目錄下執行ESlint初始化命令，建立ESLint的設定檔，命令如下：

 

eslint –init

3.進行ESLint項目初始化嚮導，首先選擇配置方式，這裡選擇“Use a popular style guide”，8.6所示。

4.選擇預設模式，這裡選擇“Standard”，8.7所示。

  

圖8.6  選擇配置方式                                                                               圖8.7 選擇預設模式

5.選擇配置內容的隱藏檔類型，8.8所示。

 

   圖8.8  選擇配置內容的隱藏檔類型

至此ESLint項目配置結束，目錄中產生一個名為“.eslintrc”的檔案。接下來介紹外掛程式gulp-eslint的安裝使用。首先在項目中安裝外掛程式，命令如下：

 

npm installgulp-eslint –save-dev在gulpfile.js檔案中，新增工作對JavaScript代碼進行檢查：var eslint = require("gulp-eslint");                         // 引入eslint外掛程式gulp.task("eslint", function(){                                  // 定義代碼檢查任務         gulp.src("src/**/*.js")                                       // 對src下的所有js檔案執行代碼檢查                   .pipe(eslint({                                           // 執行檢查                            useEslintrc:true                           // 採用.eslintrc設定檔                   }))                  .pipe(eslint.format())                             // 輸出檢查結果                   .pipe(eslint.failAfterError)                    // 當代碼檢查失敗時，終止gulp任務});

上述例子簡單地介紹了如何在Gulp中採用ESLint外掛程式執行代碼檢查。更多ESLint的配置項和外掛程式使用文檔請參看http://eslint.org/。

注意：ESLint提供了兩種方式終止任務：eslint.failAfterError和eslint.failOnError。前者會等到所有檢查執行完才終止，而後者則在出錯時立即終止。

接下來，介紹採用gulp-sass-lint外掛程式對Sass檔案進行代碼檢查。首先，安裝外掛程式：

 

npm installgulp-sass-lint --save-dev在gulpfile.js中新增工作對Sass檔案進行代碼檢查，代碼如下：var sasslint =require("gulp-sass-lint");                //引入sasslint外掛程式gulp.task("sasslint", function(){                              // 定義sasslint任務         gulp.src("theme/**/*.scss")                   .pipe(sasslint())                                     // 採用sasslint外掛程式，執行代碼檢查                   .pipe(sasslint.format())                         // 輸出檢查結果                   .pipe(sasslint.failOnError())                 // 當出錯時，終止gulp任務});

 

本小節簡要地介紹了如何採用Gulp外掛程式對代碼進行檢查。關於ESLint和SassLint的進一步用法請參考對應文檔。

  

更多資訊關註：

《移動Web前端高效開發實戰》筆記3--代碼檢查任務