Gulp lint takes too much time

Question

I have a problem with the linting and live reloading in my gulp file. They take to much time to finish.

Here is my gulp file, what do I do wrong :

    'use strict';

console.time("Loading plugins"); //start measuring

var gulp = require('gulp');
var connect = require('gulp-connect');
var open = require('gulp-open');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var babelify = require('babelify');
var sass = require('gulp-sass');
var merge = require('merge-stream'); // Merge all styles (css, sass and less) in one big bundle
var lint = require("gulp-eslint");

var config = {
    port: 8001,
    devBaseUrl: 'http://localhost',
    paths: {
        html: "./src/*.html",
        externals: "./src/assets/externals/*.js",
        js: "./src/**/*.js",
        images: './src/assets/images/**/*',
        fonts: './src/assets/css/fonts/*',
        css: [
            "./src/assets/css/*",
        ],
        sass: './src/assets/css/*.scss',
        dist: "./dist",
        mainJS: "./src/main.js"
    }
};


gulp.task('connect', ['watch'], function () {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true,
        fallback: './dist/index.html'
    })
});

gulp.task('open', ['connect'], function () {
    gulp.src('dist/index.html')
        .pipe(open({uri: config.devBaseUrl + ":" + config.port + "/"}));
});


gulp.task('html', function () {
    gulp.src(config.paths.html)
        .pipe(gulp.dest(config.paths.dist))
        .pipe(connect.reload());
});


gulp.task('externals', function () {
    gulp.src(config.paths.externals)
        .on('error', console.error.bind(console))
        .pipe(concat('external.js'))
        .pipe(gulp.dest(config.paths.dist + '/externals'))
        .pipe(connect.reload());
});


gulp.task('js', function () {
    browserify(config.paths.mainJS)
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(config.paths.dist + '/scripts'))
        .pipe(connect.reload());
});


gulp.task('images', function () {
    gulp.src(config.paths.images)
        .pipe(gulp.dest(config.paths.dist + '/images'));
});


gulp.task('styles', function () {
    gulp.src(config.paths.css)
        .pipe(sass())
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'))
        .pipe(connect.reload());

});

gulp.task('fonts', function () {
    gulp.src(config.paths.fonts)
        .pipe(gulp.dest(config.paths.dist + '/css/fonts'));
});

gulp.task('lint', function () {
    return gulp.src(config.paths.js)
        .pipe(lint())
        .pipe(lint.format());
});


gulp.task('watch', function () {
    gulp.watch(config.paths.js, ['js', 'lint']);
    gulp.watch(config.paths.css, ['styles']);
});

console.timeEnd('Loading plugins');

gulp.task('default', ['js', 'styles', 'lint', 'open', 'watch']);

The lint takes almost 20s to finish and liverolading takes 5-6s to refresh the browser after I make some changes.

Any advice?

Answer 1

Is it necessary to check you code while developing?

We use another approach:

1)Do not check code while developing, because it is long, also it sometimes doesn't allow to create "fast" mock for something while debugging.

2)Check style only before commit. If something is wrong, fix style and check everything works. Also CI system could control your commits.

So, my suggestion is to remove lint from watch task.

Answer 2

Gulp ESLint plugin is generally very slow. I compared it to Grunt at some point (a while back) and it was about 5-10 times slower. Don't know why.

Make sure you are running latest version of ESLint and also that you don't have node_modules directory under your src folder. If you do, you can run eslint with --debug flag to make sure that ESLint is not linting files in your node_modules directory. If for some reason it does, add .eslintignore file and specify everything that you don't want to lint there.

In general, if you want instant feedback while coding, I would suggest looking into editor integrations. Pretty much every editor out there has ESLint plugin at this point. They show you errors directly in the window you are writing your code in.

Answer 3

We've recently come across the same issue on my team. The best workaround was to run ESLint only on the modified files, instead of all js files.

We use nodemon to watch for changed files, though gulp-watch has the same idea.

See the change event on gulp-watch.

Then you'd just run a lint function on the changed file. You may need to resolve the relative file path.

gulp.watch(config.paths.js, ['js'])
    .on('change', lintFile);

const lintFile = (file) => {
  return gulp.src(file)
             .pipe(eslint());
};