BrowserSync（w / gulp）工作非常缓慢

Question

我在项目中使用带有gulp的browsersync，当我有一个玉文件，一个CSS和一个js文件时，它工作正常。 但是现在我有7个Jade文件（一点也不多），每个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中选择所有文件'.sass'

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

也可以尝试在底部写gulp.task（'watch'...）并指出您需要观看的所有任务。 我试图重写'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); });