javascript - 为什么 Gulp 无法在更改时自动重新处理我的 JS？

Question

在我的 gulpfile.js 中，JS 更改会自动触发 BrowserSync 重新加载和我的 JS 处理任务。但出于某种原因，虽然重新加载确实有效，但我的 JS 任务无法正确处理 JS 更改并在 dist/ 文件夹中创建新的 JS 文件。我必须为此重新启动 Gulp。为什么？

Gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(browserSync.reload({
    stream: true
  }))
});

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
});

gulp.task('browserSync', function() {
  browserSync.init({
    proxy: 'http://127.0.0.1/my_site/new-front-page/',
  })
})

gulp.task('watch', ['sass', 'js', 'browserSync'], function() {
  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php', browserSync.reload);
  gulp.watch('../assets/scripts/*.js', browserSync.reload);
  gulp.watch('../*.html', browserSync.reload);
});

编辑:

还针对“js”任务尝试了下面的代码(与上面的代码相比，请参阅最后 3 行)，但无济于事:

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

Answer 1

作为mark在 his answer 中提到，您应该更改您的 watch 任务。但是，您应该:

gulp.watch('../assets/styles/**/*.scss',['sass', browserSync.reload]);
gulp.watch('../**/**/*.php', browserSync.reload);
gulp.watch('../assets/scripts/*.js', ['js', browserSync.reload]);
gulp.watch('../*.html', browserSync.reload);

当样式和脚本更改时，我们重新运行任务(sass 和 js)并重新加载页面。

我尝试了您的代码并进行了这些更改，并且成功了。答案基于Google Web Starter Kit's gulpfile.babel.js其中有:

gulp.watch(['app/scripts/**/*.js'], ['lint', 'scripts', reload]);