Browsersync仅在html更改时重新加载

Question

我是使用gulp和browsersync的新手。每当我对任何文件进行更改时，我都会尝试使用它：css，js或html，实时预览将刷新并显示更改。我已经完成了在调用它们时都能正常运行的任务，但是一旦我运行了我的browserSync，它只会刷新我的index.html更改。

// Gulp.js configuration
var
  // modules
gulp = require('gulp'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
htmlclean = require('gulp-htmlclean'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
cssnano = require('cssnano'),
browserSync = require('browser-sync').create(),


  // development mode?
  devBuild = (process.env.NODE_ENV !== 'production'),

  // folders
  folder = {
    src: 'src/',
    dist: 'dist/'
  };

//image processing
gulp.task('images', function(){
    var out = folder.dist + 'images/';
    return gulp.src(folder.src + 'images/**/*')
        .pipe(newer(out))
        .pipe(imagemin({ optimizationLevel: 5}))
        .pipe(gulp.dest(out));
});

//HTML processing
gulp.task('html', ['images'], function(){
var
    out = folder.dist + 'html/',
    page = gulp.src(folder.src + 'html/**/*')
        .pipe(newer(out));

//minify production code
if(!devBuild){
    page = page.pipe(htmlclean());
}

return page.pipe(gulp.dest(out))
    .pipe(browserSync.stream());
});

// JS processing

gulp.task('js', function(){
    var out = folder.dist + 'scripts/';
    return gulp.src(folder.src + 'scripts/**/*')
        .pipe(newer(out))
        .pipe(uglify())
    .pipe(gulp.dest(out))
    .pipe(browserSync.stream());

});

//CSS processing
gulp.task('css', ['images'], function(){
    var postCssOpts = [
        assets({ loadPaths: ['images/'] }),
        autoprefixer({ browsers: ['last 2 versions', '>2%'] }),
        mqpacker
        ];

    if(!devBuild) {
        postCssOpts.push(cssnano);
    }

    return gulp.src(folder.src + 'styles/scss/main.scss')
        .pipe(sass({
          outputStyle: 'nested',
          imagePath: 'images/',
          precision: 3,
          errLogToConsole: true
        }))
        .pipe(postcss(postCssOpts))
        .pipe(gulp.dest(folder.dist + 'styles/'))
    .pipe(browserSync.stream());
});

gulp.task('run', ['html', 'css', 'js']);

// watch for changes
gulp.task('watch',['browserSync', 'css'], function() {

  // image changes
  gulp.watch(folder.src + 'images/**/*', ['images']);

  // html changes
  gulp.watch(folder.src + 'html/**/*', ['html']);

  // javascript changes
  gulp.watch(folder.src + 'js/**/*', ['js']);

  // css changes
  gulp.watch(folder.src + 'css/scss/**/*', ['css']);

});

gulp.task('default', ['browserSync','run', 'watch'])


gulp.task('browserSync', function(){
    browserSync.init({
        server:{
            baseDir:'dist',
            directory: true
        }
    })
});