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

在你的＆＃39; complieHTML＆＃39;中删除管道browserSync.stream（）。任务。

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

BrowserSync注入前刷新（Gulp）

1 个答案: