如何在GULP JS中配置browse-sync实现JS文件修改自动重载

你只需要在现有start任务中新增JS文件的监听规则，即可实现JS修改保存后自动触发浏览器重载。

具体改动点 #

现有配置仅监听了scss、html两类文件的变动，缺少JS文件的监听逻辑，根据你项目中JS文件的存放路径，添加对应watch规则即可：

• 如果JS文件直接存放在项目根目录，添加如下配置：

gulp.watch("./*.js").on('change', browserSync.reload);

• 如果JS文件统一存放在js/目录下，使用通配符匹配目录下所有JS文件（包含子层级）：

gulp.watch("./js/**/*.js").on('change', browserSync.reload);

修改完成后的完整gulpfile.js参考 #

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', () => {
  return gulp.src("./sass/*.scss")
    .pipe(sass())
    .pipe(gulp.dest("dist/"))
    .pipe(browserSync.stream());
});

gulp.task('start', gulp.series('sass', function() {
  browserSync.init({
    server: "./"
  });

  gulp.watch("sass/*.scss", gulp.series('sass'));
  gulp.watch("./*.html").on('change', browserSync.reload);
  // 新增JS文件变动监听
  gulp.watch("./js/**/*.js").on('change', browserSync.reload);
}));

gulp.task('default', gulp.series('start'));

补充说明 #

如果后续需要对JS做压缩、ES6转译、模块化打包等处理，可以参照sass任务的格式单独编写JS处理任务，watch触发时先执行JS处理任务，完成后再触发浏览器重载即可，逻辑和SCSS处理流程完全一致。

内容的提问来源于stack exchange，提问作者Brandt