Angular 2 Компилятор "Вперед" с gulp - typescript

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 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: Неожиданная строка в ngc: 2: basedir = $(dirname "$ (echo" $0 "| sed -e ', \,/, g')" )

Я подозреваю, что это происходит потому, что исходный каталог не передается в ngc (требуемая команда ngc -p path/to/project)

В принципе, есть ли способ использовать gulp-typescript для создания одноэтапного процесса сборки? (сгенерируйте файлы .ngfactory.ts, затем скомпилируйте все для JavaScript)

Ответы

Ответ 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, я боюсь, вам придется либо развить ее самостоятельно, либо дождаться, когда кто-то еще.

Ответ 2

Я пытался заставить это работать, а William Gilmour ответ помог многим.

Я немного расширил его, чтобы запустить локальную установку ngc (например, angular 2 пример, который запускает один в node_modules/.bin) и работает как в 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, которую я сейчас использую для компиляции Ahead-Of-Time (AOT) с помощью angular 2:

//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);
});

Не стесняйтесь проверить весь пример Пример для героев (ToH) с gulp.js в моем реестре github: ng2-heroes-gulp

Это, несомненно, краткосрочное решение, долгосрочное решение для меня будет плагином gulp -ngc.