Arquivos de configuração para build

gulp.config.js

module.exports = function() {
  var tsconfig = require('./tsconfig.json');
  var temp = '.temp/';
  var src = 'src/';
  var config = {
    /** Diretório de arquivos compilados para dev */
    temp: temp,
    /** Arquivos fonte */
    src: src,
    /**
     * Arquivos principais do app
     * (processamento parte recursivamente daqui)
     */
    tsMain: tsconfig.files,
    tsconfig: tsconfig,
    /** Nome do bundle gerado pelo browserify */
    jsBundle: 'bundle.js',
    /** index do app */
    index: src + 'index.html',
    /** Porta do servidor de dev */
    devServerPort: 5000,
    /** Recarregar a página se algum desses arquivos mudar */
    watchReload: [
      src + '**/*',
      temp + '**/*',
      '!' + src + '**/*.ts',
    ],
  };
  return config;
};

gulpfile.js

var gulp = require('gulp');
// args: pega os argumentos da linha de comando como array
var args = require('yargs').argv;
// config: nosso arquivo de configuração
var config = require('./gulp.config')();
// plugins: Carrega todos os módulos gulp-*
var plugins = require('gulp-load-plugins')();
// browserify e watchify
var browserify = require('browserify');
var watchify = require('watchify');
// source: transforma o output do browserify em um objeto que
// o gulp consegue manipular
var source = require('vinyl-source-stream');

gulp.task('dev-watchify', function() {
  log('Iniciando watchify');
  // Cria o bundler watchify
  var bundler = watchify(browserify(config.tsMain, watchify.args));
  // Ativa o tsify para transpilar nossos arquivos TS
  bundler.plugin('tsify', config.tsconfig);
  // Sempre que houver mudança, gera novo bundle
  bundler.on('update', watchifyBundle);
  bundler.on('log', log); // Escreve logs no terminal

  return watchifyBundle();

  function watchifyBundle() {
    return bundler.bundle()
      .on('error', plugins.util.log.bind(plugins.util, 'Browserify Error'))
      .pipe(source(config.jsBundle))
      .pipe(gulp.dest(config.temp));
  }
});

gulp.task('dev-serve', function() {
  log('Iniciando servidor: [' +
      [].concat(config.temp).concat(config.src).join(', ') +
      ']');
  var port = args.port || config.devServerPort;
  plugins.connect.server({
    root: [config.temp, config.src],
    fallback: config.index,
    port: port,
    livereload: true
  });
  gulp.watch(config.watchReload, function() {
    return gulp.src(config.watchReload, {read: false})
            .pipe(plugins.connect.reload());
  })
});

gulp.task('dev', ['dev-watchify', 'dev-serve']);

///////////////////////////////////////

function log(msg) {
  if (typeof(msg) === 'object') {
    for (var item in msg) {
      if (msg.hasOwnProperty(item)) {
        plugins.util.log(plugins.util.colors.blue(msg[item]));
      }
    }
  } else {
    plugins.util.log(plugins.util.colors.blue(msg));
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "newLine": "LF"
  },
  "files": [
    "src/scripts/app.ts"
  ]
}