如何使用Gulp JS浏览同步来重新加载JS文件？

Question

我使用Gulp JS，安装的Bootstrap，浏览同步和SASS创建了一个项目。

我的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);
}));

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

当我使用 ctrl + s s 命令中，在html和scss文件中，我的项目被保存并浏览器被重新加载；但是我也想为我的JS文件执行此操作。你能帮助我吗？

Answer 1

与您处理CSS的方式非常相似，但是您可以使用其他插件，例如 a>压缩JavaScript。这是我的JS函数， condenate 并将我的javascript减小，然后通过browsersync重新加载我的javascript

const concat = require('gulp-concat');
const terser = require('gulp-terser'); 

function js() { 
  return src(['./js/*.js'])
  .pipe(concat('scripts.min.js'))
  .pipe(terser())
  .pipe(dest('js'))
  .pipe(browsersync.stream());
}