BrowserSync (w/gulp) работает очень медленно

Question

Я использую browsersync с gulp в моем проекте, и когда у меня был один нефритовый файл, один css и один js-файл, он работал нормально. Но теперь у меня есть 7 нефритовых файлов (не так много), и каждая задача html & перезагружает 5-6 секунд.

Вот мой 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') 

Также попробуйте записи 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); 
 
});