Gulp lint 需要太多时间

Question

我的 gulp 文件中的 linting 和实时重新加载有问题。他们需要很长时间才能完成。

这是我的 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']);

在我进行一些更改后，lint 需要将近 20 秒才能完成，而肝硬化需要 5-6 秒才能刷新浏览器。

有什么建议吗？

Answer 1

Gulp ESLint 插件通常很慢。我在某个时候（不久前）将它与 Grunt 进行了比较，它慢了大约 5-10 倍。不知道为什么。

确保您正在运行最新版本的 ESLint，并且您的 src 文件夹下没有 node_modules 目录。如果你这样做了，你可以运行带有--debug 标志的eslint 以确保ESLint 不会检查你的node_modules 目录中的文件。如果由于某种原因确实如此，请添加 .eslintignore 文件并指定您不想在其中 lint 的所有内容。

一般来说，如果您想在编码时获得即时反馈，我建议您研究编辑器集成。目前几乎每个编辑器都有 ESLint 插件。它们直接在您编写代码的窗口中显示错误。

Answer 2

我们最近在我的团队中遇到了同样的问题。最好的解决方法是只在修改后的文件上运行 ESLint，而不是所有的 js 文件。

我们使用 nodemon 来监视更改的文件，尽管 gulp-watch 有相同的想法。

查看gulp-watch上的change事件。

然后您只需对更改的文件运行 lint 函数。 您可能需要解析相对文件路径。

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

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

Answer 3

开发时需要检查代码吗？

我们使用另一种方法：

1) 开发时不要检查代码，因为它很长，有时也不允许在调试时为某些东西创建“快速”模拟。

2) 仅在提交前检查样式。如果有问题，请修复样式并检查一切是否正常。 CI 系统也可以控制你的提交。

所以，我的建议是从监视任务中删除 lint。