깡통 보풀이 너무 오래 걸린다

Question

내 꿀꺽 꿀꺽 거리는 파일에서 linting과 live reloading에 문제가 있습니다. 그들은 끝내기까지 많은 시간을 필요로합니다.

이

'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 시스템이 커밋을 제어 할 수 있습니다.

제 제안은 감시 작업에서 lint를 제거하는 것입니다.

Answer 2

힙프 ESLint 플러그인은 일반적으로 매우 느립니다. 나는 어떤 시점에서 Grunt와 비교해 보았는데, 5 ~ 10 배 정도 느린 편이었다. 이유를 모르겠다.

최신 버전의 ESLint를 실행하고 있고 src 폴더 아래에 node_modules 디렉토리가 없는지 확인하십시오. 그럴 경우 eslint을 --debug 플래그로 실행하여 ESLint가 node_modules 디렉토리의 파일을 덮어 쓰지 않도록 할 수 있습니다. 어떤 이유로 든 파일에 .eslintignore을 추가하고 거기서 보풀이를 원하지 않는 파일을 모두 지정하십시오.

일반적으로 코딩하는 동안 즉각적인 피드백을 원하면 편집자 통합을 살펴 보시기 바랍니다. 거의 모든 에디터는이 시점에서 ESLint 플러그인을 가지고 있습니다. 코드를 작성하는 창에 직접 오류를 표시합니다.

Answer 3

최근에 우리 팀에서 동일한 문제를 발견했습니다. 가장 좋은 해결 방법은 모든 js 파일 대신 수정 된 파일에서만 ESLint를 실행하는 것입니다.

gulp-watch는 동일한 생각을 가지고 있지만 변경된 파일을보기 위해 nodemon을 사용합니다.

이벤트가 gulp-watch 인 경우 을 참조하십시오.

그러면 변경된 파일에서 lint 함수를 실행하기 만하면됩니다. 상대 파일 경로를 해결해야 할 수도 있습니다.

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

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