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

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

更多信息关注:

时间: 2024-10-16 20:02:20

《移动Web前端高效开发实战》笔记3--代码检查任务的相关文章

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

1.整体缩放 整体缩放可以用在营销活动页,营销活动可能因为设计美观需求必须使用背景图片而非背景色,因此需要考虑背景图适应屏幕大小.开发者可以用320像素的宽度作为基础宽度(高度可以固定),然后通过计算实际文档宽度来进行相应缩放. 使用整体缩放布局开发的项目在加载过程中需要监听resize事件,代码如下: window.addEventListener('resize',document.body.clientWidth / 320); 除此之外,开发者需要在缩放的节点上添加transform-o

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

8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目根目录下创建package.json文件,命令如下: npm init 根据引导配置项目信息.然后安装Gulp依赖包,命令如下: npm install gulp –save-dev 在项目根目录下,创建gulpfile.js文件,内容如下: var gulp = require("gulp&quo

《从机器学习到深度学习基于scikit-learn与TensorFlow的高效开发实战》PDF代码分析

用通俗的语言讲解涵盖算法模型的机器学习,主要内容包括机器学习通用概念.三个基本科学计算工具.有监督学习.聚类模型.降维模型.隐马尔可夫模型.贝叶斯网络.自然语言处理.深度学习.强化学习.模型迁移等.在深入浅出地解析模型与算法之后,介绍使用Python相关工具进行开发的方法.解析经典案例,能理解.能设计.能编码.能调试,没有基础的在学习后也能够上手设计与开发机器学习产品. 推荐学习<从机器学习到深度学习:基于scikit-learn与TensorFlow的高效开发实战>,场景式机器学习实践,理论

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

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1  设定背景图的大小 在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要

《Python高效开发实战:Django、Tornado、Flask、Twisted》PDF+源码

Python高效开发实战 链接:https://pan.baidu.com/s/1udqe8V2QSh0CMTVg2vEblQ  提取码:igo0 ? 作者: 刘长龙出版社: 电子工业出版社出版年: 2016-10页数: 516定价: 89装帧: 平装ISBN: 9787121300103 内容简介  · · · · · · 也许你听说过全栈工程师,他们善于设计系统架构,精通数据库建模.通用网络协议.后端并发处理.前端界面设计,在学术研究或工程项目上能独当一面.通过对Python及其周边Web框

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

[ios5 cocos2d游戏开发实战] 笔记3-FileUtils, notificationCenter

FileUtils //文件管理工具 FileUtils::getInstance() std::string getStringFromFile(const std::string& filename);//读取文件中的字符串 Data getDataFromFile(const std::string& filename);//获取文件数据 void setSearchPaths(const std::vector<std::string>& searchPaths

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

在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立一个路由响应函数: from django.http import HttpResponse def welcome(request): returnHttpResponse("<h1>Welcome to my tiny twitter!</h1>") 该代码定义

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除