Search code examples
javascriptgulpgulp-watcheslint

How do I run gulp eslint continuously and automatically while fixing files -- how to set up watch


I am trying eslint with gulp. I have set up a task like this:

            gulp.task('lint', function () {
                return gulp.src([
            'components/myjs.js'

                                 ])
                    // eslint() attaches the lint output to the eslint property 
                    // of the file object so it can be used by other modules. 
                    .pipe(eslint())
                    // eslint.format() outputs the lint results to the console. 
                    // Alternatively use eslint.formatEach() (see Docs). 
                    .pipe(eslint.format())
                    // To have the process exit with an error code (1) on 
                    // lint error, return the stream and pipe to failOnError last. 
                    .pipe(eslint.failOnError());
            });

when I run gulp lint It tells me a lot of errors. Now I am trying to fix them one by one. But I have to re-run gulp lint manually for it to give me an updated report. How do I set it up so that it will automatically re-run every time I update 'components/myjs.js'?


Solution

  • Just add a watch task:

    gulp.task('watch', function() {
      gulp.watch('components/myjs.js', ['lint']);
    });
    

    This way Gulp will track any changes on your 'components/myjs.js' and execute your 'lint' task on any change

    If you want further reading: https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js