BrowserSync和Gulp。 無法重新加載以用於JS / HTML

Question

我剛開始使用Gulp。 我的gulpfile.js如下：

// require gulp
var gulp = require('gulp');

// include gulp plugins
var concat = require('gulp-concat');
var sass   = require('gulp-ruby-sass');
var brsync = require('browser-sync').create();

// make one js file
gulp.task('scripts', function() {
    return gulp.src('src/app/js/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('build/js/'));
});

// turn scripts into one file and reload browser
gulp.task('scripts-watch', ['scripts'], brsync.reload());

// convert sass to css
gulp.task('sass', function() {
    return sass('src/app/scss/main.scss', {style: 'expanded'})
        .on('error', function(err) {
            console.error('something went wrong with sass processing!', err.message);
        })
        .pipe(gulp.dest('build/css'))
        .pipe(brsync.stream());
});

// copy over index file to build directory
gulp.task('html', function() {
    return gulp.src('src/app/index.html')
            .pipe(gulp.dest('build/'));
});

// reload browser when html in src changes
gulp.task('html-watch', ['html'], brsync.reload());

gulp.task('serve',['scripts', 'sass', 'html'], function() {
    brsync.init({
        server: "./build"
    });

    gulp.watch('src/app/js/*.js', ['scripts-watch']);
    gulp.watch('src/app/index.html', ['html-watch']);
    gulp.watch('src/app/scss/*.scss', ['sass']);
});

gulp.task('default', ['serve']);

我只是在遵循BrowserSync網站上此處概述的方法。 但這對我不起作用。 當我更改JS文件時，我的腳本確實得到了更新，但是瀏覽器未重新加載！

Answer 1

嘗試使用代理：

gulp.task('serve',['scripts', 'sass', 'html'], function() {
  browserSync.init(null, {
    proxy: "http://localhost:3000",
      files: ['src/app/**/*'],
      browser: "google chrome",
      port: 7000
  });

  gulp.watch('src/app/js/*.js', ['scripts-watch']);
  gulp.watch('src/app/index.html', ['html-watch']);
  gulp.watch('src/app/scss/*.scss', ['sass']);
});

gulp.task('default', ['serve']);

我也在使用var browserSync = require('browser-sync'); 不是var browserSync = require('browser-sync').create(); 。