Browser-sync + Gulp -如果没有服务器正在运行，则重新加载失败

Question

我正在构建我的gulpfile，并且遇到了浏览器同步的问题。我试图在gulp.dest()之后在html任务中重新加载我的浏览器，但它总是失败。下面是gulpfile中失败的部分。

var gulp        = require('gulp'),
    runSequence = require('run-sequence'),
    server      = require('browser-sync'),
    $           = require('gulp-load-plugins')();

gulp.task( 'html', function () {
    return gulp.src( 'path/to/html/*.html' )
        .pipe( $.fileInclude() )
        .pipe( gulp.dest( 'path/to/dest/' ) )
        .pipe( server.reload() );
});

gulp.task( 'serve', ['html'], function () {
    server({
        server: {
            baseDir: 'path/to/directory/'
        }
    });

    gulp.watch( 'path/to/html/*.html', ['html'] );
});

我确信问题出在重新加载部分，因为当我注释掉它时，一切都像它们应该的那样工作。我非常感谢任何人的帮助，因为我已经被困在这里很长一段时间了。提前感谢！

Answer 1

这应该可以解决您的问题：

var gulp = require('gulp');
var browserSync = require('browser-sync');
var plumber = require('gulp-plumber');
var $ = require('gulp-load-plugins')();

gulp.task( 'build-html', function () {
  return gulp.src( 'path/to/html/*.html' )
    .pipe(plumber())
    .pipe( $.fileInclude() )
    .pipe( gulp.dest( 'path/to/dest/' ) );
});

gulp.task('serve', ['build-html'], function(done) {
  browserSync({
    open: false,
    port: 9000,
    server: {
      baseDir: ['.']
    }
  }, done);
});

function reportChange(event){
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}

gulp.task('watch', ['serve'], function() {
  gulp.watch('path/to/html/*.html', ['build-html', browserSync.reload]).on('change', reportChange);
});

Answer 2

也许这是旧的风格，但是，这是你应该初始化的方式。

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

并将其命名为

.pipe(reload())