Question

我在我的项目中使用browsersync和gulp，当我有一个jade文件，一个css和一个js文件时，它运行正常。但是现在我有7个玉文件（根本不是那么多），以及每个html任务＆amp;重新加载需要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'])

你只能在下面写下这段代码，你会选择所有文件＆＃39; .sass＆＃39;在目录sass

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

同时尝试在底部写下gulp.task（＆＃39; watch＆＃39; ...）并指出您需要观看的所有任务。我试图重写＆＃39; gulpfile.js＆＃39;我认为它会正常而快速地运作。试着告诉我。

＆＃13;

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

＆＃13;

BrowserSync（w / gulp）工作真的很慢

1 个答案: