Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@kudo_kk

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で行えます。

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kudo_kk
フロントエンドエンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?