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

在項目的開發過程當中，統一的代碼風格對於項目的可協做性以及可維護性來講至關重要，所以能夠採用一些插件來進行代碼風格的檢查。

本例中的源文件包含兩類：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的進一步用法請參考對應文檔。

  

更多信息關注：