BrowserSync 注入前刷新 (Gulp)

Question

我有我的 gulpfile：

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var sourcemaps = require('gulp-sourcemaps');
var fileinclude = require('gulp-file-include');
var browserify = require('browserify');
var rename = require('gulp-rename');
var streamify = require('gulp-streamify'); // required for uglify
var uglify = require('gulp-uglify'); // minify JS
var source = require('vinyl-source-stream'); // required to dest() for browserify
var browserSync = require('browser-sync').create();
var localSettings = require('./gulp/localConfig.js');

gulp.task('sass', function () {
    return gulp.src('./assets/sass/main.scss')
    .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError)) // .on('error', sass.logError) prevents gulp from crashing when saving a typo or syntax error
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./assets/sass'))
    .pipe(browserSync.stream()); // causes injection of styles on save
});

gulp.task('compileHTML', function() {
    return gulp.src(['static/src/*.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@root'
        }))
        .pipe(gulp.dest('./static/compiled'))
        .pipe(browserSync.stream()); // causes injection of html changes on save
});

// Static Server for browsersync
gulp.task('sync', ['sass'], function() {
    browserSync.init({
        startPath: "static/compiled/index.html",
        open: localSettings.openBrowserSyncServerOnBuild,
        server: {
            baseDir: "./",
        }
    });
});

gulp.task('watch', function() {
    gulp.watch('./assets/sass/**/*.scss', ['sass']);
    gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML']);
    gulp.watch('./assets/js/**/*.js', ['javascript']);
});

gulp.task('javascript', function() {
    var bundleStream = browserify('./assets/js/main.js').bundle();

    bundleStream
        .pipe(source('main.js'))
        .pipe(rename('bundle.js'))
        .pipe(gulp.dest('./assets/js/'))
        .pipe(browserSync.stream());
})

// Default Task
gulp.task('default', ['compileHTML', 'javascript', 'sass', 'watch', 'sync']);

大多数情况下，我的构建工作都很好，但是我的 compileHTML 任务有一个问题。当对我的 html 进行任何修改时，它会被编译并使用 BrowserSync 注入到页面中。问题是 BrowserSync 在重新加载后将标记注入页面，因此我必须手动刷新或再次保存文件。

虽然我对我的 SASS 任务做同样的事情，但我对那个任务没有任何问题。为什么我的样式在重新加载之前会注入到页面中，而 HTML 没有？

只是为了测试，我尝试在 BrowserSync 注入周围添加一个 setTimout，但它除了添加延迟之外并没有影响注入的时间。

Answer 1

我会尝试按照gulp-reload docs. 的示例他们的示例是：

// create a task that ensures the `js` task is complete before
// reloading browsers

gulp.task('js-watch', ['js'], function (done) {
  browserSync.reload();
  done();
});

所以你试试：

gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML'], 
  function (done) {
     browserSync.reload();
     done();
});

并删除“complieHTML”任务中的管道 browserSync.stream()。

[在上述更改之前，我可能会首先尝试在该任务中从 stream() 更改为 reload() 的非常简单的尝试。]