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?

score 1 · Answer 1 · answered Sep 06 '16 at 03:39

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.

score 1 · Answer 2 · answered Jun 07 '17 at 22:34

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());
};

score 0 · Answer 3 · answered Sep 03 '16 at 07:34

0

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.

answered Sep 03 '16 at 07:34

kosbr

388
2
11

Ok. I can remove it, I knew that. But is there any solution to keep it, but to reduce the execution time? And if I remove it, my browser takes a few second (5-6) to reload aftere making some changes in my code. – Boky Sep 03 '16 at 12:59
Why would you not check while developing? Pretty much any decent JavaScript development tool will have support for linting files on the fly. Enable, open a file and BAM, you get all problems reported - no slowdown, no problems, it's immediately visible and you get them as you type _where_ you type. Sure, you don't need a gulp lint watch task and, in fact, why would - even if it wasn't slow, it doesn't show the errors in the same place you are currently looking at _anyway_. I seriously think that not linting on the fly is a bad practice. – VLAZ Sep 23 '16 at 10:50

Gulp lint takes too much time

3 Answers3