《移动Web前端高效开发实战》笔记3--代码检查任务
来源:互联网 发布:java编程视频 编辑:程序博客网 时间:2024/06/02 19:31
在项目的开发过程中,统一的代码风格对于项目的可协作性以及可维护性来说相当重要,因此可以采用一些插件来进行代码风格的检查。
本例中的源文件包含两类: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--代码检查任务
- 荐书丨移动Web前端高效开发实战
- 《移动Web前端高效开发实战》笔记4--打造单页应用SPA
- 移动Web前端开发高效实战(一)
- 移动web前端开发高效实战(二)
- 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
- 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
- Emmet高效开发web前端代码
- Emmet高效开发web前端代码
- Emmet高效开发web前端代码
- 移动web前端开发
- 移动WEB前端开发资源整合
- 移动WEB前端开发资源整合
- 移动WEB前端开发资源整合
- 移动WEB前端开发资源整合
- 移动WEB前端开发资源整合
- 移动WEB前端开发资源整合
- 移动开发 or web 前端?
- 产生死锁的原因和必要条件+解决死锁的基本方法
- HashMap及其原理
- 图像插值算法
- poj1201 差分约束 线段类的
- Session与Cookie的区别
- 《移动Web前端高效开发实战》笔记3--代码检查任务
- CNN 卷积层和激活层
- PAT乙级1028
- python 简单email发送
- csdn如何转载别人的文章
- android开发-横竖屏切换生命周期(非网传版)
- codeforces 855A
- 500. Keyboard Row
- Python初学者(零基础学习Python、Python入门)常见问题:书籍推荐、资料、社区