BrowserSync (w/gulp) funktioniert wirklich langsam

Question

Ich benutze browsersync mit Schluck in meinem Projekt, und wenn ich eine Jade-Datei, eine CSS-Datei und eine JS-Datei hatte, funktionierte es gut. Aber jetzt habe ich 7 Jade-Dateien (nicht so viele), und jede HTML-Aufgabe & Nachladen dauert 5-6 Sekunden.

Hier ist meine 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']); 
}); 

Irgendwelche Ideen, warum?

Answer 1

Für mich schreiben Sie zu viele Variablen. Zum Beispiel statt:

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

u nur dieser Code unten schreiben und u werden alle Dateien‘.sass' im Verzeichnis sass

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

Händler gulp.task Schreib wählen ('watch' ...) am unteren Rand und geben Sie alle Aufgaben an, für die Sie sich interessieren. Ich habe versucht, 'gulpfile.js' neu zu schreiben und ich denke, es wird richtig und schnell funktionieren. Versuchen Sie es und lassen Sie mich wissen.

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); 
 
});