《移动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的进一步用法请参考对应文档。

  

更多信息关注：