Use gulp for typescript compilation

Question

Following angular 2 quick start guide, guys there use typescript compiler and tsconfig.json file, to work with it. I was looking up ways to use gulp for this and indeed there seem to be ways to achieve this, however I'm a bit confused to correct implementation with angular 2.

essentially gulp-typescript and gulp-tslint seem to be two plugins to achieve this and somehow tsconfig.json file is also in play here, although I don't grasp why.

Could anyone provide example for implementation that will achieve above? I believe all development .ts files should be within src folder and javascript needs to be pumped over to build folder. (assume for now that both folders have setup from angular 2 quick start)

Answer 1

I've setup gulp to work from gulpfile.js/ folder. In this folder are index.js, config.js and tasks/ folder, and in tasks/typescript.js is task that compiles TypeScript (tasks folder has 15 other tasks). So instead of one huge gulpfile.js I have manageable chunks that each do just one thing...

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

I had an issue with gulp watch: if you're watching files, work on more then one file and save them all it will run a task multiple times, which can be annoying. Check the link for implementation of queue_tasks() function...

Also note that I'm using Gulp 4:

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

I've added in src() option since to cache files, and pass only changed files down the pipe. I implemented this just 2 days ago and didn't test it with typescript files (works in other places), so if there are issues just remove it...