使用 gulp 检测 javascript 语法

更新日期: 2022-05-27 阅读次数: 10180 字数: 1136 分类: Javascript

昨天在给域名注册服务的前端增加小功能, 代码提交之后, 用 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"

补充

在 VIM 中使用 ESLint 对 JS 进行语法检查

tags: Javascript 语法检查工具

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式