JavaScript
grunt
gulp
フロントエンド
ESLint

watch中に変更したファイルのみeslintをかける(grunt, gulp)

More than 1 year has passed since last update.

eslintのconfigファイルを変更した時など、一旦、変更のあったjsファイルのみにeslintをかけたい時もあると思います。意外と投稿されていなかったので、投稿いたします。


grunt

grunt-contrib-watchのみで可能です。


Gruntfile.js

 module.exports = function(grunt) {

grunt.initConfig({

watch: {
scripts: {
files: '**/*.js',
tasks: ['eslint'],
options: {
spawn: false, <- *1
},
},
},

eslint: {
target: ['**/**.js']
}
});

grunt.event.on('watch', function(action, filepath, target){ <- *2
if (target == js) {
grunt.config(['eslint', 'target']);
}
});

// Load the plugins
grunt.loadNpmTasks('grunt-contrib-watch');

// Tasks
grunt.registerTask('default', ['watch']);
};



1 watchタスクにspawnオプション追加

一時的な設定の変更を許可する。

nospawn: true でも可能ですがv0.5.0からspawnが導入されているので、spawnの方が良いかと。


2 イベントリスナーを設定 grunt.event.on('watch', function())

grunt.configにて一時的にeslintタスクの設定を変更

grunt.config.setと同様


gulp

gulp-cachedが必要になります。

※あくまでキャッシュなので、初期実行時は全てのファイルのエラーが出ます。その後に変更したjsファイルのみエラーが出力されます。よって、gulp-plumber等は必須になります。


gulp.js

// gulp-cached

var cached = require('gulp-cached');

// eslint
var eslint = require('gulp-eslint');

gulp.task('eslint', function () {
return gulp.src(path.js_src)
.pipe(cached('eslint')) <- *1
.pipe(plumber({
errorHandler: notify.onError('<%= error.message %>')
}))
.pipe(eslint())
.pipe(eslint.format());
});

// task
gulp.task('default', function () {
gulpSequence('build', 'eslint', 'watch')(); <- *2
});



2 watchの前に初期実行しておく

この対応によって、変更したタイミングでそのjsファイルのみeslintがかかります。


gulp-changedが推奨される場合も

ビルド後のファイル群に対するタスクであれば、gulp-changedで行えます。