使用 gulp-watch 监视多个文件夹

Question

我的项目中有这样的文件夹结构：

• 常见
• 游戏
  • 游戏1
  • 游戏2
  • ...

每个文件夹都包含一个 Typescript 文件列表，所有游戏都依赖于 Common 文件夹。

使用 Typescript 编译所有内容大约需要 10 秒。是否可以创建一个单独观看每场比赛的 gulp-watch？

这就是我现在的工作：

// Compile
gulp.task('compile-games', ['clean-games'], function () {
var folders = getFolders(inputPaths.games);

var gameTasks = folders.map(function (folder) {
    return gulp.src([
            path.join(inputPaths.common, '/**/*.ts'),
            path.join(inputPaths.games, folder, '/**/*.ts')], { base: inputPaths.scripts })
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(typescript({
            target: "ES5",
            noImplicitAny: false,
            sortOutput: true
        }))
        .pipe(concat('Game.js'))
        .pipe(sourcemaps.write('./', { includeContent: true, debug: true }))
        .pipe(gulp.dest(path.join(outputPaths.games, folder)));
});

// Watches
gulp.task('watch', function () {
    gulp.watch(path.join(inputPaths.games, "**/*.ts"), ["compile-games"]);
    gulp.watch(path.join(inputPaths.common, "**/*.ts"), ["compile-games"]);
});

Answer 1

这并不是您正在寻找的解决方案，但它应该可以解决您的构建时间问题：

gulp.watch([path.join(inputPaths.games, "**/*.ts"), path.join(inputPaths.common, "**/*.ts")], ['compile-games']);

...然后安装 gulp-newer:

npm install --save-dev gulp-newer

...然后在您的“编译游戏”任务中，直接在 gulp.src 之后将流通过管道传输到 gulp-newer 插件中。结果：仅重建新更改的文件，并且仅对这些文件进行 Typescript 编译。