带有 gulp-typescript 的 Angular 2 提前编译器

Question

Angular 2 rc 6 用 Typescript 2.0.2 编写

我正在尝试学习提前编译 as outlined here .这看起来很简单:

• 运行 ngc 而不是 Typescript 编译器来生成 .ngfactory.ts 文件
• 将 platformBrowserDynamic().bootstrapModule() 替换为 platformBrowser().bootstrapModuleFactory()

我不确定如何将第一步应用到我的设置中。我使用 gulp-typescript 2.13.6 将我的 typescript 编译成 JavaScript。

gulpfile.js

var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
    //Use TS version installed by NPM instead of gulp-typescript's built-in
    typescript: require('typescript')
});
gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(ts(tsProject))
        .pipe(gulp.dest(appProd));
});

所以我的问题是；如何将说明集成到我的工具中？如何让 gulp-typescript 使用 Angular 编译器？我试过:

var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('@angular/compiler') // or '@angular/compiler-cli'
});

这会在不运行 ngc 的情况下抛出错误。我也试过了

var tsProject = ts.createProject('tsconfig.json', {
    typescript: require('./node_modules/.bin/ngc')
});

这确实执行了 ngc 但立即抛出错误:

SyntaxError: Unexpected string at ngc:2: basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")

我怀疑这是因为没有源目录被传递给ngc(需要的命令是ngc -p path/to/project)

基本上，有没有办法使用 gulp-typescript 进行一步构建过程？ (生成.ngfactory.ts文件，然后全部编译成JavaScript)

Answer 1

我想 typescript: require(..) 不工作的原因是因为 gulp-typescript 寻找叫做 typescript 的东西或者试图运行命令 tsc，并且由于 Angular 编译器命令是 ngc，所以找不到它。

现在，如果你的项目只是编译它那么简单，你可以像这样从 gulp 运行命令:

var exec = require('child_process').exec;

gulp.task('task', function (cb) {
  exec('ngc -p "<path to your tsconfig.json>"', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

这需要您正确设置 tsconfig.json，以及 Google 谈论的潜在额外选项 here ，在配置标题下。

如果您需要 gulp-typescript 包提供的更复杂的功能，恐怕您要么必须自己开发，要么等待其他人开发。