使用gulp-typescript的Angular 2预编译器

Question

Angular 2 rc 6使用Typescript 2.0.2编写。

我正在尝试学习Ahead-of-Time编译，详情请参考这里。看起来很简单：

• 运行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编译器？我已经尝试过：

那么我的问题是：如何将这些说明集成到我的工具中？如何让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: 在ngc的第2行出现意外的字符串：basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")

我怀疑这是因为ngc没有传递源目录（所需的命令是ngc -p path/to/project）

基本上，是否有一种方法可以使用gulp-typescript实现一步构建过程？（生成.ngfactory.ts文件，然后将所有内容编译为JavaScript）

- BeetleJuice

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在此处的配置要求添加额外的选项。

如果你需要更复杂的功能，gulp-typescript包提供了这些功能，但你只能自己开发或等待其他人提供。

- William Gilmour

---

谢谢William。请再添加一些细节：cb和cb(err)是什么？我需要安装child_process插件吗？路径是否包括tsconfig.json文件名，还是只是目录路径？ - BeetleJuice

cb 我相信是回调函数的缩写，所以在这段代码片段中，cb(err) 简单地将错误函数传递到回调函数中。我从 这里 的信息中改编了这个片段。child_process 是 gulp 4.0 及以上版本的内置模块。关于路径，来自上面的 Google 链接 中的说明是：“它接受一个 -p 标志，该标志指向一个 tsconfig.json 文件或包含该文件的目录。”因此，两者都可以。 - William Gilmour

Answer 2

我也尝试让这个工作，William Gilmour的答案帮了很多忙。我稍微扩展了一下，以运行本地ngc安装（就像运行node_modules/.bin中的angular 2示例一样），并且它适用于Linux和Windows系统：

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

gulp.task('build-ts', function (cb) {

    var cmd = os.platform() === 'win32' ? 
        'node_modules\\.bin\\ngc' : './node_modules/.bin/ngc';

    exec(cmd, function (err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
        cb(err);
    });
});

- Bastiaan van den Berg

Answer 3

这是跨平台版本的gulpfile，我目前正在使用它进行Angular 2的Ahead-Of-Time（AOT）编译：

//jshint node:true
//jshint esversion: 6
'use strict';

...

// helper function for running ngc and tree shaking tasks
const run_proc = (cmd, callBack, options) => {
        process.stdout.write(stdout);
        process.stdout.write(stderr);
        callBack(err);
    });
};


gulp.task('ngc', ['css', 'html', 'ts'], cb => {
    let cmd  = 'node_modules/.bin/ngc -p tsconfig-aot.json';
    if (isWin) {
        cmd  = '"node_modules/.bin/ngc" -p tsconfig-aot.json';
    }
    return run_proc(cmd, cb);
});

欢迎查看我的github仓库上使用gulp.js的英雄之旅（ToH）示例的完整代码：ng2-heroes-gulp

这确实是一个短期解决方案，对我来说，长期解决方案将是gulp-ngc插件。

- Evgeny Bobkin