Node项目使用gulp+eslint最佳实践

Node项目经常需要使用eslint规范代码。我们希望eslint的检查是自动化的，在git commit时进行，针对所有要commit的文件进行。

步骤

1. npm install husky --save-dev。安装husky。
2. 安装好eslint和gulp，及gulp-eslint插件。
3. 配置gulpfile.js如下：

const gulp = require('gulp');
const eslint = require('gulp-eslint');
const exec = require('child_process').execSync;

function OctalDecode(str) {
  const matches = str.match(/(\\\d{3}){3}/g);
  if (matches) matches.forEach(match => {
    let encoded = '';
    const splits = match.split('\\');
    splits.forEach(code => !code || (encoded += '%' + parseInt(code, 8).toString(16)));
    const cChar = decodeURI(encoded);
    str = str.replace(match, cChar);
  });
  return str;
}

const stdout = exec('git diff --cached --name-only', {encoding: 'utf-8'});
const cachedJsList = stdout.split('\n')
  .map(v => OctalDecode(v.replace(/^"|"$/g, '')))
  .filter(v => v.endsWith('.js') && v!=='gulpfile.js');

console.log('需要eslint的文件:', cachedJsList);

gulp.task('eslint', () => {
  return gulp.src(cachedJsList)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError('failes'));
});

4. 在.eslintignore中添加“gulpfile.js”。
5. 在package.json中添加scripts.precommit: "gulp eslint"

测试

1. 修改文件，git add .
2. npm run precommit，查看执行结果是否合理
3. git commit -m "xxx"，查看eslint是否运行

缺陷

eslint执行时，直接针对当前文件内容。如果在git add后，又修改了文件的内容，则会针对修改后内容进行检查。
假如修改前内容有误，而修改后无误。不执行git add而再次执行git commit时，会根据修改后的文件进行检查，而不能发现已缓存文件仍然错误。
优化方法是，检查所有改动，要求所有在缓存区的文件改动必须重新缓存。

更新

gulp任务同时并行执行，不能保证前面的代码能够先执行。前面的代码应作为前置任务存在。
整体改为:

const gulp = require('gulp');
const eslint = require('gulp-eslint');
const exec = require('child_process').execSync;

function OctalDecode(str) {
  const matches = str.match(/(\\\d{3}){3}/g);
  if (matches) matches.forEach(match => {
    let encoded = '';
    const splits = match.split('\\');
    splits.forEach(code => !code || (encoded += '%' + parseInt(code, 8).toString(16)));
    const cChar = decodeURI(encoded);
    str = str.replace(match, cChar);
  });
  return str;
}

let cachedJsList = [];

gulp.task('pre-eslint', (cb) => {
  const stdout = exec('git diff --cached --name-only', {encoding: 'utf-8'});
  cachedJsList = stdout.split('\n')
  .map(v => OctalDecode(v.replace(/^"|"$/g, '')))
  .filter(v => v.endsWith('.js') && v!=='gulpfile.js');
  console.log('需要eslint的文件:', cachedJsList);
  cb();
});

gulp.task('eslint', ['pre-eslint'], () => {
  return gulp.src(cachedJsList)
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError('failes'));
});