为什么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"任务(参见上面的代码与上面的代码相比),无济于事:

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

正如马克在他的回答中提到的，你应该改变你的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 的 gulpfile.babel.js，其中包含：

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