如何使用GULP JS浏览同步重新加载我的JS文件?

kmbjn2e3  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(174)

我用gulp js创建了一个项目,安装了bootstrap,browse-sync和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'));

当我在HTML和SCSS文件中使用Ctrl + S命令时,我的项目被保存,浏览器被重新加载;但是我也想为我的JS文件做这个。你能帮我吗?

w6mmgewl

w6mmgewl1#

非常类似于你处理css的方式,但是你可以使用其他插件比如terser来压缩你的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());
}

相关问题