BrowserSync（gulp）は本当に遅いです

Question

私は自分のプロジェクトでgulpとbrowsersyncを使用しています。私は1つのjadeファイル、1つのCSSと1つのjsファイルがあればうまくいきました。しかし、今私は7つの翡翠ファイルを持っています（それほど多くはありません）。そして、すべてのHTMLタスク& reloadは5-30 秒を取ります。ここで

は私gulpfileです：

var gulp = require('gulp'); 
var browserSync = require('browser-sync'); 
var autoprefixer = require('gulp-autoprefixer'); 
var sourcemaps = require('gulp-sourcemaps'); 
var sass = require('gulp-sass'); 
var jade = require('gulp-jade'); 

// Sass 
gulp.task('sass', function() { 
    return gulp.src(['src/_media/scss/*.scss', 'src/_media/scss/**/*.scss']) 
     .pipe(sourcemaps.init()) 
     .pipe(sass()) 
     .pipe(autoprefixer({ 
      browsers: ['last 3 versions'], 
      cascade: false 
     })) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('public/_media/css/')) 
     .pipe(browserSync.stream()); 
}); 

// HTML 
gulp.task('html', function() { 
    return gulp.src(['src/*.jade', 'src/**/*.jade']) 
     .pipe(jade({ 
      pretty: true 
     })) 
     .pipe(gulp.dest('public/')); 
}); 

// Watch HTML 
gulp.task('html-watch', ['html'], function(done) { 
    browserSync.reload(); 
    done(); 
}); 

// Javascript 
gulp.task('javascript', function() { 
    return gulp.src(['src/_media/js/*.js', 'src/_media/js/**/*.js']) 
     .pipe(gulp.dest('public/_media/js/')); 
}); 

// Watch Javascript 
gulp.task('javascript-watch', ['javascript'], function(done) { 
    browserSync.reload(); 
    done(); 
}); 

// Images 
gulp.task('images', function() { 
    return gulp.src(['src/images/*.*', 'src/images/**/*.*']) 
     .pipe(gulp.dest('public/_media/images/')); 
}); 

// Watch Images 
gulp.task('images-watch', ['images'], function(done) { 
    browserSync.reload(); 
    done(); 
}); 

// Default task 
gulp.task('serve', ['html', 'javascript', 'images'], function() { 
    browserSync.init({ 
     server: { 
      baseDir: './public', 
      directory: true 
     }, 
     injectChanges: true, 
     notify: false, 
    }); 

    gulp.watch(['src/_media/scss/*.scss', 'src/_media/scss/**/*.scss'], ['sass']); 
    gulp.watch(['src/_media/js/*.js', 'src/_media/js/**/*.js'], ['javascript-watch']); 
    gulp.watch(['src/images/*.*', 'src/images/**/*.*'], ['images-watch']); 
    gulp.watch(['src/*.jade', 'src/**/*.jade'], ['html-watch']); 
}); 

任意のアイデアはなぜですか？

Answer 1

私にとっては、あまりにも多くの変数を書きます。代わりに、例えば 、：

return gulp.src(['src/_media/scss/*.scss', 'src/_media/scss/**/*.scss']) 

ディレクトリSASSに

return gulp.src('src/_media/scss/**/*.scss') 

をuは下記のみ、このコードを書くことができ、uは、すべてのファイル」.sass'を選択します。またgulp.task（ '時計' の書き込みしてみてください...）を表示し、監視する必要があるすべてのタスクを示します。 私は 'gulpfile.js'を書き直そうとしましたが、正しく動作し、高速に動作すると思います。 私に知らせてください。

var gulp = require('gulp'); 
 
var browserSync = require('browser-sync'); 
 
var autoprefixer = require('gulp-autoprefixer'); 
 
var sourcemaps = require('gulp-sourcemaps'); 
 
var sass = require('gulp-sass'); 
 
var jade = require('gulp-jade'); 
 

 
// Sass 
 
gulp.task('sass', function() { 
 
    return gulp.src('src/_media/scss/**/*.scss') 
 
     .pipe(sourcemaps.init()) 
 
     .pipe(sass()) 
 
     .pipe(autoprefixer({ 
 
      browsers: ['last 3 versions'], 
 
      cascade: false 
 
     })) 
 
     .pipe(sourcemaps.write()) 
 
     .pipe(gulp.dest('public/_media/css/')) 
 
     .pipe(browserSync.reload({stream: true})) 
 
}); 
 

 
// HTML 
 
gulp.task('html', function() { 
 
    return gulp.src('src/**/*.jade') 
 
     .pipe(jade({ 
 
      pretty: true 
 
     })) 
 
     .pipe(gulp.dest('public/')); 
 
}); 
 

 

 
// Javascript 
 
gulp.task('javascript', function() { 
 
    return gulp.src('src/_media/js/**/*.js') 
 
     .pipe(gulp.dest('public/_media/js/')); 
 
}); 
 

 

 

 
// Images 
 
gulp.task('images', function() { 
 
    return gulp.src('src/images/**/*.*') 
 
     .pipe(gulp.dest('public/_media/images/')); 
 
}); 
 

 

 

 
// Default task 
 
gulp.task('browser-sync', function() { 
 
    browserSync({ 
 
     server: { 
 
      baseDir: './public', 
 
      directory: true 
 
     }, 
 
     injectChanges: true, 
 
     notify: false, 
 
    }); 
 
}); 
 

 

 
gulp.task('watch', ['browser-sync', 'sass', 'html', 'javascript', 'images'], function() { 
 
    gulp.watch('src/_media/scss/**/*.scss', ['sass']); 
 
    gulp.watch('src/**/*.jade', browserSync.reload); 
 
    gulp.watch('src/_media/js/**/*.js', ['javascript-watch'], browserSync.reload); 
 
    gulp.watch('src/images/**/*.*', ['images-watch'] ,browserSync.reload); 
 
});