Gulp 设置BrowserSync以使用生成过程并监视更改

我正在尝试创建一个基本的gulp构建过程模板，该模板从包含html、sass、javascript和图像文件的应用程序文件夹开始，并将这些文件构建到一个公共文件夹中。我正在使用gulp查看应用程序文件夹的更改，然后自动将构建过程刷新到公用文件夹

我使用浏览器同步为公用文件夹提供服务并监视更改，但在对公用文件夹进行更改时，它似乎不会自动重新加载。如果手动刷新浏览器，则会反映更改

感谢您的帮助，请参阅下面的“吞咽”文件：

//BASIC GULP FILE SETUP
//-------------------------------------------------------------

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

//General Plugins
var browserSync      = require('browser-sync').create();
var reload           = browserSync.reload;
var del              = require('del');
var watch            = require('gulp-watch');
var runSequence      = require('run-sequence');

//CSS Plugins
var sass             = require('gulp-sass');
var autoprefixer     = require('gulp-autoprefixer');
var csso             = require('gulp-csso');

//JS Plugins
var concat           = require('gulp-concat');
var uglify           = require('gulp-uglify');

//HTML Plugins
var minifyHTML       = require('gulp-minify-html');

//IMG Plugins


//-------------------------------------------------------------
//TASKS
//-------------------------------------------------------------

//Clean Public Folder
gulp.task('clean', function() {
    del(['public/**/*']);
});

//CSS Tasks
gulp.task('sass', function () {
  return gulp.src('app/sass/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(gulp.dest('public/css'));

});

//HTML Tasks
gulp.task('html', function () {
  return gulp.src(['./app/**/*.html'], {
            base: 'app'
        })
    .pipe(minifyHTML())
    .pipe(gulp.dest('public'))
    ;
});

//Image Tasks
gulp.task('image', function () {
  return gulp.src('app/img/**/*.{png,jpg,jpeg,gif,svg}')
    .pipe(gulp.dest('public/images'));

});

//JS Tasks
gulp.task('js', function () {
  return gulp.src('app/js/**/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('public/js'));

});


// Watch files for changes
gulp.task('watch', function() {
    // Watch HTML files
    gulp.watch('./app/*.html', ['html'], browserSync.reload);
    // Watch Sass files
    gulp.watch('./app/sass/**/*.scss', ['sass'], browserSync.reload);
    // Watch JS files
    gulp.watch('./app/js/**/*', ['js'], browserSync.reload);
    // Watch image files
    gulp.watch('./app/img/*', ['image'], browserSync.reload);
});

gulp.task('browser-sync', ['watch'], function() {
    browserSync.init({
        server: {
            baseDir: "./public"
        }
    });
});


gulp.task('defualt');
gulp.task('build', [], function(callback) {
  runSequence('clean',
              'sass',
              'html',
              'js',
              'image');
});

---

我在论坛和浏览器同步文档中做了更多的探索。在我的serve任务中，我需要在公共目录中添加一个watch函数，每当检测到更改时，该函数都会手动调用重载。因此，我的“浏览器同步”任务（现已重命名为“服务”）需要如下所示：

//Browser Sync Server
gulp.task('serve', ['watch'], function() {
    browserSync.init({
        server: {
            baseDir: "./public"
        }
    });
    gulp.watch("./public/**/*").on("change", browserSync.reload);
});  

我确信有一种方法可以通过浏览器同步的流来实现这一点，但是文档中的手动重新加载方法已经实现了这一点

尝试在

init

函数中传入一个对象，以便它知道要查找什么。不需要其他的

监视任务，Browsersync为您完成所有这些

gulp.task('browser-sync', ['watch'], function() {
  browserSync.init({
      server: {
          baseDir: "./public"
      },
      files: [
        '**/*.css',
        '**/*.js',
        '**/*.html'
        // etc...
      ]
  });
});