TypeScript Compile Suggestions (TS + gulp + karma)

Question

I am trying to come up with a viable TypeScript build step that includes the following:

• Compile TypeScript (obviously)
  • ideally allowing the compiler to traverse the dependency tree
• Execute jasmine unit tests via karma
• No dependencies on IDE's (Visual Studio/WebStorm) to execute tests and output JS
• Ability to execute unit tests via WebStorm's run configurations
• Code coverage results based upon the TS code, not resulting JS

My current attempt involves using:

• gulp-tsc
• karma
• karma-typescript-preprocessor

I would prefer to only have to run the compilation steps once because as of now I have to do the pre-compile step for unit tests and the build-ts step below for output to my dist folder. I have tried using the karma-typescript-pre-processor with mixed results and poor performance (with tests, 16 seconds w/o 2 seconds).

Note: I have not yet attempted to tackle the code coverage aspect yet as I am not happy with the build/unit test solution I have in place.

The karma file I am currently using is

module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['jasmine'],
    files: [
      '../bower_components/angular/angular.js',
      '../bower_components/angular-mocks/angular-mocks.js',
      '../app/**/*_test.ts',
      {
        pattern: '../app/**/!(*_test).ts',
        included: false
      }
    ],
    preprocessors: {
      '../typings/jasmine/jasmine.d.ts': ['typescript'],
      '../app/**/*.ts': ['typescript']
    },
    typescriptPreprocessor: {
      options: {
        sourceMap: true,
        target: 'ES5',
        noResolve: false
      },
      transformPath: function(path) {
        return path.replace(/\.ts$/, '.js');
      }
    },
    //reporters: ['progress', 'growl'],
    colors: true
  });
};

gulpfile:

gulp.task('build-ts', function () {
  return gulp.src(paths.ts)
    .pipe(tsc({
      noResolve: false,
      out: 'app.js',
      outDir: paths.dist.js,
      removeComments: true,
      //sourcePath: '../../app/ts',
      //sourcemap: true,
      target: 'ES5'
    }))
    .pipe(gulp.dest(paths.dist.js))
    .pipe(connect.reload());
});

Answer 1

You can use gulp.watch to compile the typescript files on on save. That way when you run the tests the typescript is already compiled. The gulp-tsc module should have a guide for setting up incremental compiling.