javascript - 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 网站 here 上概述的方法。但这对我不起作用。当我更改 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(); .