《移动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所出示。

  ECMAScript 1ECMAScript 2

贪图8.6  选择安排方式                                                    
                          图8.7 选择预设模式

5.抉择安排内容的储存文件类型,如图8.8所著。

 ECMAScript 3

   图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的尤为用法请参考对应文档。

  

再多信息关注:

ECMAScript 4