javascript - Použijte gulp pro kompilaci TypeScriptu

Podle rychlého startovacího průvodce Angular 2, kluci tam používají kompilátor TypeScript a soubor tsconfig.json, aby s tím pracovali. Hledal jsem způsoby, jak k tomu použít Gulp, a skutečně se zdá, že existují způsoby, jak toho dosáhnout, nicméně jsem trochu zmatený ohledně správné implementace s Angular 2.

V podstatě se zdá, že gulp-typescript a gulp-tslint jsou dva pluginy, jak toho dosáhnout, a nějakým způsobem je zde také v hry soubor tsconfig.json, i když nechápu proč.

Mohl by někdo poskytnout příklad implementace, který výše uvedeného dosáhne? Věřím, že všechny vývojové soubory .ts by měly být uvnitř složky src a JavaScript by měl být přenesen do složky build. (předpokládejme prozatím, že obě složky mají nastavení z Angular 2 Quick Start)

Odpověď č. 1

Nastavil jsem gulp tak, aby fungoval ze gulpfile.js/ adresáře. V tomto adresáři jsou index.js, config.js a složka tasks/, a v tasks/typescript.js je úkol, který kompiluje TypeScript (složka tasks má dalších 15 úkolů). Takže místo jednoho obrovského gulpfile.js mám zvládnutelné části, z nichž každá dělá jen jednu věc...

gulpfile.js/index.js

var gulp = require('gulp');
var config = require('./config.js');
var plugins = require('gulp-load-plugins')();
    plugins.brsync = require('browser-sync').create();
    plugins.builder = require('systemjs-builder');

function run(name) {
  return require('./tasks/' + name)(gulp, plugins, config);
}
// ...other tasks, in alphabetical order! (:
gulp.task('typescript',     run('typescript'));

gulpfile.js/config.js

var distDir           = 'dist';
var staticDir         = isGAE() ? '/static' : '';

module.exports = {
  SRC: {
    TYPESCRIPT:       'src/scripts/**/*.ts',
  },
  DST: {
    MAPS:                                   './maps',
    SCRIPTS:          distDir + staticDir + '/scripts',
  },
};

gulpfile.js/úkoly/typescript.js

module.exports = function (gulp, plugins, CONFIG) {
  return function typescript() {

    var tsProject = plugins.typescript.createProject('tsconfig.json');
    var tsReporter = plugins.typescript.reporter.fullReporter();

    var stream = gulp
      .src(CONFIG.SRC.TYPESCRIPT, { since: gulp.lastRun('typescript') })
      .pipe(plugins.sourcemaps.init())

      .pipe(plugins.typescript(tsProject, undefined, tsReporter))

      .pipe(plugins.sourcemaps.write(CONFIG.DST.MAPS,
                                     {sourceMappingURLPrefix: '/scripts'}))
      .pipe(gulp.dest(CONFIG.DST.SCRIPTS))
      .on('error', plugins.util.log);

    return stream;
  };
};

gulpfile.js/úkoly/watch.js

module.exports = function (gulp, plugins, CONFIG) {
  return function watch() {
    plugins.brsync.init(CONFIG.BRSYNC);

    gulp.watch(CONFIG.SRC.TEST,           () => queue_tasks(['karma']));
    gulp.watch(CONFIG.SRC.TYPESCRIPT,     () => queue_tasks(['typescript'], brsync_reload));
  };
};

Měl jsem problém s gulp watch: pokud sledujete soubory, pracujete na více než jednom souboru a všechny je uložíte, úloha se spustí několikrát, což může být otravné. Zkontrolujte odkaz pro implementaci funkce queue_tasks()...

Všimněte si také, že používám Gulp 4:

gulp.src(CONFIG.SRC.TYPESCRIPT, { since: gulp.lastRun('typescript') })

Přidal jsem do možnosti src() since pro ukládání souborů do cache a posílání pouze změněných souborů dále potrubím. Toto jsem implementoval teprve před 2 dny a netestoval to se soubory TypeScriptu (funguje to jinde), takže pokud nastanou problémy, prostě to odstraňte...