javascript - Gulp Concat + Browserync 重启

Question

我正在使用 gulp concat 和 browserync。当我运行 gulp 时，它会启动 browserync 并连接并重新加载模块中找到的所有 js 文件。问题是它只对 js 文件进行串联一次，因此我需要停止运行 gulp 并再次运行它，以便我可以看到反射(reflect)到 js 文件的任何更改。我也只在停止并重新启动 gulp 后看到 gulp 通知任务。如何设置 gulp 以便始终捆绑并编译 js，然后运行 ​​browsersync？

这是我的 gulpfile

var gulp = require('gulp');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');


// default 
gulp.task('default', ['browserSync', 'scripts'], function (){
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload); 
gulp.watch('app/modules/**/*.js', browserSync.reload);
});

gulp.task('scripts', function() {
return gulp.src('app/modules/**/**.js')
  .pipe(concat('main.js'))
  .pipe(gulp.dest('app/build/js'))
  .pipe(notify({ message: 'Scripts in modules have been bundled!' }));
});

//start browsersync
gulp.task('browserSync', function() {
browserSync.init({
server: {
  baseDir: 'app'
},
})
})

Answer 1

试试这个:

// watch 
gulp.task('watch', ['browserSync', 'scripts'], function (){
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('app/*.html', browserSync.reload); 
    gulp.watch('app/modules/**/*.js', ['scripts']);
});

gulp.task('scripts', function() {
   return gulp.src('app/modules/**/**.js')
      .pipe(concat('main.js'))
      .pipe(gulp.dest('app/build/js'))
      .pipe(notify({ message: 'Scripts in modules have been bundled!' }))
      .pipe(browserSync.reload({
          stream: true
      }));
});

gulp.task('default', ['watch', 'scripts']);