Gulp Lint занимает слишком много времени

Question

У меня проблема с подкладкой и перезагрузкой в ​​моем файле gulp. Они занимают много времени, чтобы закончить.

Вот мой файл gulp, что я делаю не так:

    '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']);

Линт занимает почти 20 секунд, а печеночная загрузка - 5-6 секунд, чтобы обновить браузер после внесения некоторых изменений.

Любой совет?

Answer 1

Недавно мы столкнулись с той же проблемой в моей команде. Лучший обходной путь - запуск ESLint только для измененных файлов, а не для всех файлов js.

Мы используем nodemon для отслеживания измененных файлов, хотя gulp-watch придерживается той же идеи.

Смотрите событие изменения на gulp-watch.

Тогда вы просто запустите функцию lint для измененного файла. Вам может потребоваться разрешить относительный путь к файлу.

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

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

Answer 2

Плагин Gulp ESLint, как правило, очень медленный. Я сравнил его с Grunt в какой-то момент (некоторое время назад), и он был примерно в 5-10 раз медленнее. Не знаю почему.

Убедитесь, что вы используете последнюю версию ESLint, а также что у вас нет node_modules каталог под вашим src папка. Если вы это сделаете, вы можете запустить eslint с --debug флаг, чтобы убедиться, что ESLint не linting файлы в вашем node_modules каталог. Если по какой-то причине это так, добавьте .eslintignore файл и укажите все, что вы не хотите там собирать.

В общем, если вы хотите мгновенную обратную связь во время кодирования, я бы посоветовал взглянуть на интеграцию редактора. На данный момент почти каждый редактор имеет плагин ESLint. Они показывают вам ошибки прямо в окне, в котором вы пишете свой код.

Answer 3

Нужно ли проверять код при разработке?

Мы используем другой подход:

1) Не проверяйте код во время разработки, потому что он длинный, и иногда он не позволяет создать "быстрый" макет для чего-либо во время отладки.

2) Проверяйте стиль только перед фиксацией. Если что-то не так, исправьте стиль и убедитесь, что все работает. Также система CI может контролировать ваши коммиты.

Итак, я предлагаю удалить пух из задачи часов.