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

可能method signatures爲gulp.watch是：

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

所以你在這裏做是沒有意義的：

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

這意味着當你通過'typeScript'作爲glob的一部分時，它是ac一個任務的名字。

想想你想達到什麼目的：

1. 每當你改變scripts.in一個打字稿文件你希望你的typeScript任務運行，所以你的*.ts文件被編譯爲scripts.dest。
2. 每當scripts.dest中的結果*.js文件發生更改時，您希望執行browserSync.reload回調。

所以你真正需要的是你的打字稿構建過程的這兩個步驟兩種不同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); 
});