Gulp.js - `watch` 不适用于 `typescript` 更改，但适用于 `html,css` 更改

Question

我正在使用 gulp 将我的 ts 文件编译成 js 文件。当我单独更改 ts 文件时，手表不会更新浏览器。但是当我更改 html 或 css 文件时它工作正常。

我明白了，我在 watch 属性中遗漏了一些东西。有人帮我找出这里的错误吗？

这是我的代码：

var gulp = require('gulp'),
    gulpTypescript = require('gulp-typescript')
    browserSync = require('browser-sync');


var scripts = {

    in : 'app/script/ts/*.*',
    dest : 'app/script/js/'

}


gulp.task('typeScript', function () {

    return gulp.src( scripts.in )
    .pipe( gulpTypescript() )
    .pipe( gulp.dest( scripts.dest ) );

});

gulp.task('browserSync', function () {

    browserSync({
    server: {
      baseDir: 'app'
    }
  })

})


gulp.task('default', ['typeScript', 'browserSync'], function () {

    gulp.watch([[scripts.in], ['typeScript']], browserSync.reload);
    gulp.watch( ['app/*.html', 'app/styles/*.css'], browserSync.reload);

});

Answer 1

gulp.watch可能的method signatures是：

gulp.watch(glob[, opts], tasks)
gulp.watch(glob[, opts, cb])

所以你在这里做的事情毫无意义：

gulp.watch([[scripts.in], ['typeScript']], browserSync.reload);

这意味着您将 'typeScript' 作为 glob 的一部分传递，而它实际上是一个任务名称。

想想你想要达到的目标：

每当您在 scripts.in 中更改 TypeScript 文件时，您都希望将 typeScript 任务更改为运行，因此您的 *.ts 文件会编译为 scripts.dest。
每当 scripts.dest 中的结果 *.js 文件发生更改时，您希望执行 browserSync.reload 回调。

因此，对于 TypeScript 构建过程的这两个步骤，您实际需要的是两个不同的 gulp.watch 语句：

gulp.task('default', ['typeScript', 'browserSync'], function () {
  gulp.watch(scripts.in, ['typeScript']);               // 1st step
  gulp.watch(scripts.dest + '*.*', browserSync.reload); // 2nd step

  gulp.watch( ['app/*.html', 'app/styles/*.css'], browserSync.reload);
});

Gulp.js - `watch` 不适用于 `typescript` 更改，但适用于 `html,css` 更改

Gulp.js - `watch` not working on `typescript` changes, but works for `html,css` changes

gulp

gulp-watch