Gulp-watch 打字稿文件并仅发布更改的文件答案

【问题标题】：Gulp-watch typescript files and publish only changed filesGulp-watch 打字稿文件并仅发布更改的文件
【发布时间】：2015-11-14 07:58:52
【问题描述】：

在 Visual Studio 2015 中，我正在跟踪对我的 TS 文件所做的更改，以便我可以复制生成的 JS 文件并将它们输出到我的 wwwroot 目录。但是，每当我对单个 TS 文件进行更改时，它们都会被构建并输出到 wwwroot 文件夹。我应该在这里更改什么以便只将新的 JS 文件复制到 wwwroot？

我使用 gulp-watch 跟踪文件更改并使用 gulp-newer 过滤新文件。

gulp.task('min:site:js', function () {
return gulp
  .src('Contents/Scripts/**/*.js', { relative: true })
  .pipe(newer('wwwroot/js/'))
  .pipe(gulp.dest('wwwroot/js/'))
  .pipe(uglify())
  .pipe(rename({ extname: '.min.js' }))
  .pipe(gulp.dest('wwwroot/js/'));
});

gulp.task('watch:ts', function () {
   gulp.watch('Contents/Scripts/**/*.ts', ['min:site:js']);
});

【问题讨论】：

新人新人怎么知道它被重命名为.min.js？
不确定 gulp-newer 是如何做到的
可能不是。在 gulp-changed 中，您可以指定输出文件扩展名，如 .min.js 或类似的东西
@你我会看的

标签： typescript gulp visual-studio-2015 gulp-watch gulp-newer

【解决方案1】：

gulp.watch 有两种主要形式。两者都返回一个发出更改事件的 EventEmitter。第一个接受一个 glob、一个可选的选项对象和一个任务数组作为它的参数。

gulp.watch('Contents/Scripts/**/*.ts', ['min:site:js']);

简单地说，当 glob 匹配的任何文件发生变化时，运行任务。在上面的代码块中，当Contents/Scripts/**/*.ts 子文件夹中任何扩展名为.ts 的文件发生变化时，将针对这些文件运行min:site:js 任务。

第二种形式采用 glob、一个可选的选项对象和一个可选的回调，该回调将在获取更改时运行。

欲了解更多信息，请参阅api docs

使用 gulp-typescript 在更改时编译您的 .ts 文件这里有例子：

var gulp = require('gulp');
var ts = require('gulp-typescript');
var merge = require('merge2');

var tsProject = ts.createProject({
    declaration: true,
    noExternalResolve: true
});

gulp.task('scripts', function() {
    var tsResult = gulp.src('lib/*.ts')
                    .pipe(ts(tsProject));

    return merge([ // Merge the two output streams, so this task is finished         when the IO of both operations are done. 
        tsResult.dts.pipe(gulp.dest('release/definitions')),
        tsResult.js.pipe(gulp.dest('release/js'))
    ]);
});
gulp.task('watch', ['scripts'], function() {
    gulp.watch('lib/*.ts', ['scripts']);
});

https://www.npmjs.com/package/gulp-typescript

【讨论】：