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)

[One of the most popular ng2 seed projects uses gulp](https://github.com/mgechev/angular2-seed) — drew moore, Jan 25 '16 at 22:49
@drewmoore yeh I actually stumbled upon it, it has a lot going on there, where ass all I need is to set up a project with sass and ts support, hence this question, as I was not able to break up that seed repo to find these two things I need. And it lacks in explanation for me. — Ilja, Jan 25 '16 at 22:53
@Ilja My team used to use gulp with angular2 and sass, but there were always so many issues with getting all of the files into the streams, the project just couldn't grow naturally without a lot of maintenance. Just a friendly suggestion. Have you looked into using `npm` as your build process setting up an npm script in the package.json? — SnareChops, Jan 25 '16 at 23:00

score 1 · Accepted Answer · edited May 23 '17 at 12:02

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...~~

Use gulp for typescript compilation

1 Answers1

gulpfile.js/index.js

gulpfile.js/config.js

gulpfile.js/tasks/typescript.js

gulpfile.js/tasks/watch.js

Linked