Gulp lint需要太多时间

Question

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

皮棉需要近20秒完成并liverolading需要5-6s刷新浏览器后，我做出一些改变。

有什么建议吗？

Answer 1

开发时是否需要检查代码？

我们用另一种方法：

1）不检查代码而开发，因为它很长，也有时不允许在调试创造的东西“快”模拟。

2）仅在提交前检查样式。如果出现问题，修复风格并检查一切正常。 CI系统也可以控制你的提交。

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

Answer 2

Gulp ESLint插件通常非常慢。我在某个时候将它与Grunt进行了比较（一段时间后），速度慢了5-10倍。不知道为什么。

请确保您正在运行最新版本的ESLint，并且您的src文件夹下没有node_modules目录。如果这样做，可以使用--debug标志运行eslint标志以确保ESLint不会在您的node_modules目录中删除文件。如果出于某种原因，请添加.eslintignore文件并指定您不想在此粘贴的所有内容。

一般来说，如果您希望在编码时得到即时反馈，我建议您查看编辑器集成。几乎每个编辑都有ESLint插件。他们会直接在您编写代码的窗口中向您显示错误。

Answer 3

我们最近在我的团队中遇到过同样的问题。最好的解决方法是仅在修改的文件上运行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()); 
};