你的位置:首页 > 软件开发 > 网页设计 > 《移动Web前端高效开发实战》笔记3

《移动Web前端高效开发实战》笔记3

发布时间:2017-09-29 22:00:07
在项目的开发过程中,统一的代码风格对于项目的可协作性以及可维护性来说相当重要,因此可以采用一些插件来进行代码风格的检查。本例中的源文件包含两类:Sass文件和采用ECMAScript 6规范的JavaScript文件。在Gulp中,采用gulp-eslint和gulp-sass- ...

在项目的开发过程中,统一的代码风格对于项目的可协作性以及可维护性来说相当重要,因此可以采用一些插件来进行代码风格的检查。

本例中的源文件包含两类: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所示。

  《移动Web前端高效开发实战》笔记3《移动Web前端高效开发实战》笔记3

图8.6  选择配置方式                                                                               图8.7 选择预设模式

5.选择配置内容的存储文件类型,如图8.8所示。

 《移动Web前端高效开发实战》笔记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的配置项和插件使用文档请参 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

原标题:《移动Web前端高效开发实战》笔记3

关键词:Web前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

我的浏览记录