带有 gulp-typescript 的 Angular 2 Ahead-of-Time 编译器答案

【问题标题】：Angular 2 Ahead-of-Time Compiler with gulp-typescript带有 gulp-typescript 的 Angular 2 Ahead-of-Time 编译器
【发布时间】：2017-01-13 09:30:51
【问题描述】：

Angular 2 rc 6写成Typescript 2.0.2

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

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

我不确定如何将第一步应用到我的设置中。我使用gulp-typescript 2.13.6 将我的打字稿编译为 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）

【问题讨论】：

标签： angular typescript deployment gulp gulp-typescript

【解决方案1】：

我想typescript: require(..) 不工作的原因是因为 gulp-typescript 查找名为typescript 的东西或尝试运行命令tsc，并且由于角度编译器命令是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 包提供的更复杂的功能，恐怕您要么必须自己开发，要么等待其他人开发。

【讨论】：

谢谢威廉。请添加更多详细信息：cb 和 cb(err) 是什么？我需要安装child_process 插件吗？路径是否包含名称 tsconfig.json 还是只是目录的路径？
cb 我相信代表回调，所以在代码 sn-p 中，cb(err) 只是将错误函数传递给回调函数。我根据here 的信息改编了那个 sn-p。 child_process 是 gulp 4.0 及以上版本的内置模块。关于路径，这来自上面的Google link，“它接受指向tsconfig.json 文件或包含该文件的目录的-p 标志。”所以，要么。

【解决方案2】：

我试图让它也能正常工作，William Gilmour 的answer 帮了很多忙。

我对其进行了一些扩展，以运行本地 ngc 安装（如运行 node_modules/.bin 中的 angular 2 example），它适用于 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);
    });
});

【讨论】：

【解决方案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 的 Tour of Heroes (ToH) 示例的整个示例：ng2-heroes-gulp

这肯定是短期解决方案，对我来说长期解决方案将是 gulp-ngc 插件。

【讨论】：