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

本例中的源文件包含两类: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--代码检查任务的更多相关文章

  1. 就来推荐一本2018年研究的Web书《移动Web前端高效开发实战》

    一线互联网公司Web前端团队实战经验总结,涵盖移动Web前端开发各个关键技术环节,包括移动开发核心技术.常用布局方案.MV*类新时代框架.预编译技术.性能优化.开发调试.混合式应用.单元测试.工程化等

  2. 《移动Web前端高效开发实战》笔记4--打造单页应用SPA

    路由是一个单页应用的核心,大部分前端框架都实现了一个复杂的路由库,包括动态路由,路由钩子,组件生命周期甚至服务器端渲染等复杂的功能.但是对于前端开发者而言,路由组件的核心是URL路径到函数的映射,了解 ...

  3. 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应

    1.整体缩放 整体缩放可以用在营销活动页,营销活动可能因为设计美观需求必须使用背景图片而非背景色,因此需要考虑背景图适应屏幕大小.开发者可以用320像素的宽度作为基础宽度(高度可以固定),然后通过计算 ...

  4. 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

    8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...

  5. 《Python高效开发实战》实战演练——内置Web服务器4

    <Python高效开发实战>实战演练——开发Django站点1 <Python高效开发实战>实战演练——建立应用2 <Python高效开发实战>实战演练——基本视图 ...

  6. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  7. web前端学习之旅笔记01--HTML

    web前端学习之旅笔记01--HTML HTML最容易上手,但也易忘,实际开发中有时需要查阅官方文档,小伙伴们别忘了哟! HTML 教程 (w3school.com.cn) HTML是网页的骨架负责页 ...

  8. 《Python高效开发实战》实战演练——基本视图3

    在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...

  9. 《Python高效开发实战》实战演练——建立应用2

    为了在项目中开发符合MVC架构的实际应用程序,需要在项目中建立Django应用.每个Django项目可以包含多个Django应用.建立应用的语法为: #python manage.pystartapp ...

随机推荐

  1. poj3422K方格取数——最大费用最大流

    题目:http://poj.org/problem?id=3422 最大费用最大流: 拆点,在自点之间连两条边,一条容量为1,边权为数字:一条容量为k-1,边权为0:表示可以走k次,只有一次能取到数字 ...

  2. rt-thread的定时器管理源码分析

    1 前言 rt-thread可以采用软件定时器或硬件定时器来实现定时器管理的,所谓软件定时器是指由操作系统提供的一类系统接口,它构建在硬件定时器基础之上,使系统能够提供不受数目限制的定时器服务.而硬件 ...

  3. Java中的内部类介绍(1)

    栗子1: package campu; //外部类 class Out{ private int age =12; //内部类 class In{ public void print(){ Syste ...

  4. git base cli

  5. CodeForces 489B BerSU Ball (水题 双指针)

    B. BerSU Ball time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  6. php查询内存信息

    php查询内存信息,是为了更好的查看内存使用情况,更好的优化代码. 查看当前内存使用情况使用:memory_get_usage()函数. 查看内存使用峰值:memory_get_peak_usage( ...

  7. Django 的 之 视图

    Django的View(视图) 一个视图函数(类),简称视图, 是个简单的python函数(类),它接受wed请求并且返回web 响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...

  8. 初识Kotlin之集合

    Kotlin的集合是让我为之心动的地方,丰富的高阶函数帮助我们高效开发.今天介绍Kotlin的基础集合用法.获取集合元素的函数.过滤元素的函数.元素排序的函数.元素统计的函数.集合元素映射的函数.集合 ...

  9. 【异步编程】Part3:取消异步操作

    在.Net和C#中运行异步代码相当简单,因为我们有时候需要取消正在进行的异步操作,通过本文,可以掌握 通过CancellationToken取消任务(包括non-cancellable任务).  早期 ...

  10. xrange与range之间的区别

    对于这两个好像功能都差不多,这两个经常会被搞混,所以今天一定要把这个完全弄清楚. 首先我们看看range: range([start,] stop[, step]),根据start与stop指定的范围 ...