博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《移动Web前端高效开发实战》笔记3--代码检查任务
阅读量:7086 次
发布时间:2019-06-28

本文共 2018 字,大约阅读时间需要 6 分钟。

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

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

图8.6 选择配置方式
4.选择预设模式,这里选择“Standard”,如图8.7所示。

图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的配置项和插件使用文档请参看

注意: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的进一步用法请参考对应文档。

转载地址:http://fwwql.baihongyu.com/

你可能感兴趣的文章
jdbc连接数据库
查看>>
excel控制
查看>>
Unicide编码
查看>>
Android入门(十一)SQLite CURD
查看>>
HDU 4978 A simple probability problem.(概率模型+凸包周长)
查看>>
【最大点权独立集】【HDU1565】【方格取数】
查看>>
Discuz百度/jiathis分享
查看>>
Linux服务器上安装tomcat
查看>>
iOS多线程-NSThread简单语法
查看>>
Collection学习目录
查看>>
javascript中split字符串分割函数
查看>>
回流和重绘总结
查看>>
Objective-C 的动态提示和技巧
查看>>
二、springboot使用jpa
查看>>
如何实现可迭代对象和迭代器对象1
查看>>
面试总结
查看>>
Creating Dialogbased Windows Application (1) / 创建基于对话框的Windows应用程序(一)新建窗体 / VC++, Windows...
查看>>
自定义函数Function
查看>>
SPSS-非参数检验—两独立样本检验 案例解析
查看>>
微软职位内部推荐-Senior Software Engineer-DUT
查看>>