昨天在给域名注册服务的前端增加小功能, 代码提交之后， 用 fiddler 在测试环境下测试了一下，发现居然有 js 语法错误，多加了一个右括号。
然后灰溜溜的修复之后又提交了一次。问题很小，但是今天早上突然想起，觉得非常不应该。
- 语法错误浪费的调试时间，即使只有5秒都非常不值得
- 平时自己写 Python，Golang 都在 VIM 上配置了自动语法检测插件，但是 Javascript 一直忽略了，现在正式写前端，马虎不得
鉴于之前一直没有配置好 Javascript 的 VIM 检测插件，我决定使用 Gulp 来做这件事， 同时带来的好处是，Gulp 可以同时对项目代码目录下的所有 js 文件进行处理，这样拉取别人的代码时也可以同时做检测。
使用 gulp
Google 了一下, 参考 Gulp - Target all files in a folder and its subfolders 很容易就能配置好 Gulp 的自动检测。
本地建一个测试项目，看看是否真的管用, 代码目录
/tmp/gulp-test/
|_gulpfile.js
|_src
|_app.js
|_models
|_a.js
|_b.js
|_stocks
|_c.js
|_d.js
安装 gulp 及相关插件
sudo npm install --global gulp
npm install gulp gulp-jshint --save-dev
gulpfile.js 配置如下
var gulp = require('gulp'),
jshint = require('gulp-jshint');
gulp.task('jshint', function () {
gulp.src('./src/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('watch', function () {
gulp.watch('./src/**/*.js', ['jshint']);
});
gulp.task('default', ['jshint', 'watch']);
这里有个小技巧，就是 default 任务里，主动执行一次 jshint, 这样能保证在 gulp 启动时就能执行一次 jshit 检测，而不需要等到 watch 文件发生更改才触发。还有一点需要注意的是，一定要避开 node_models 这个目录，要不这里面的 js 文件也一同检测了。
执行 gulp 即可
gulp
例如，在 app.js 里写入
var a = 1;
var b
保存, 会看到
zhongwei@zhongwei-ubuntu:/tmp/gulp-test$ gulp
[10:19:04] Using gulpfile /tmp/gulp-test/gulpfile.js
[10:19:04] Starting 'watch'...
[10:19:04] Finished 'watch' after 6.14 ms
[10:19:04] Starting 'default'...
[10:19:04] Finished 'default' after 5.36 μs
[10:19:11] Starting 'jshint'...
[10:19:11] Finished 'jshint' after 5.23 ms
/tmp/gulp-test/src/app.js: line 2, col 6, Missing semicolon.
1 error
修改 d.js 写入
var d = 1;
var 22
保存，会看到
[10:21:58] Starting 'jshint'...
[10:21:58] Finished 'jshint' after 1.28 ms
/tmp/gulp-test/src/app.js: line 2, col 6, Missing semicolon.
1 error
/tmp/gulp-test/src/models/stocks/d.js: line 2, col 5, Expected an identifier and instead saw '22'.
/tmp/gulp-test/src/models/stocks/d.js: line 2, col 7, Missing semicolon.
2 errors
逐个修复语法错误吧 ：）
忽略三方组件目录
例如，想忽略 src/libs 下所有文件的检测, 只需要将
gulp.src('./src/**/*.js')
修改为
gulp.src(['./src/**/*.js', '!./src/libs/**'])
对 gulp-jshint 进行配置
参考
只对发生更改的 js 文件进行语法检测
更现实的开发场景是， 项目代码已存在很久，代码中有大量的不符合 jshint 规范的代码。 而根据当前的 gulp 配置，每次发生修改，都会全量检测一遍所有的文件的语法问题，实际上已存在的问题我并不想在本次提交中修复（同时也是其他同事写的，例如不加分号问题，改动量太大）。
结果就是，一启动 gulp，哗哗的语法错误提示，根本找不到自己想看的文件检测结果。这时修改一个文件，又对所有文件做了一次全量检测，又是哗哗的满屏错误提示。而我只关心当前修改的文件检测结果。
gulp 项目首页推荐了一个 gulp-cached 插件，正好解决了这个问题。
npm install gulp-cached --save-dev
配置如下
var gulp = require('gulp'),
cache = require('gulp-cached'),
jshint = require('gulp-jshint');
gulp.task('jshint', function () {
gulp.src('./src/**/*.js')
.pipe(cache('jshint'))
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('watch', function () {
gulp.watch('./src/**/*.js', ['jshint']);
});
gulp.task('default', ['jshint', 'watch']);
这样就能清晰的看到刚才发生修改文件的语法检测结果了。
如何管理 gulp 的依赖
通常 gulp 任务会依赖多个 npm 包，例如 gulp-jshint, gulp-minifycss 等等，每次都手动 npm install 非常繁琐。动脑想一想就会猜到，npm 一定会有类似 python pip requirements.txt 的解决方案。
参考 Getting Started with Gulp (同时也是一个非常好的 gulp 入门教程)
这个依赖管理文件就是 package.json (很眼熟吧，github 上好多前端项目都能看到这个配置文件), 如何创建呢？
npm init
按照提示一步一步来，配置文件就搞定了。然后我们再 npm install gulp-cached --save-dev, 就能看到 gulp-cached 已经被添加到 package.json 的 devDependencies 字段了。显而易见，提交代码时，只需要将 gulpfile.js 和 package.json 文件提交就可以了。
如何根据 package.json 配置文件来安装依赖呢？
npm install
轻松搞定，npm 真是太神奇了。
npm install will install both "dependencies" and "devDependencies" npm install --production will only install "dependencies"
补充
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式