TypeScript build automation in ASP.NET 5 (MVC6) using Gulp
# creates package.json
npm init
# install packages
npm install gulp gulp-typescript gulp-tslint gulp-tslint-stylish gulp-sourcemaps gulp-inject gulp-rimraf --save-dev
// Package imports
var gulp = require('gulp');
var typescript = require('gulp-typescript');
var tslint = require('gulp-tslint');
var tslintStyle = require('gulp-tslint-stylish');
var sourcemaps = require('gulp-sourcemaps');
var inject = require('gulp-inject');
var rimraf = require('gulp-rimraf');
// clean
gulp.task('clean', function () {
gulp.src('wwwroot/js/app', { read: false })
.pipe(rimraf())
});
// TS Lint
var tsLintConfig = require('./tslintConfig');
gulp.task('ts-lint', function () {
gulp.src('wwwroot/**/*.ts')
.pipe(tslint(tsLintConfig))
.pipe(tslint.report(tslintStyle, {
emitError: false,
sort: true,
bell: true
}));
});
// TS Compile
gulp.task('ts-compile', ['ts-lint', 'clean'], function () {
var tsResult = gulp.src('wwwroot/**/*.ts')
.pipe(sourcemaps.init())
.pipe(typescript());
tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('wwwroot/js'));
});
// Inject
gulp.task('inject', ['ts-compile'], function () {
var target = gulp.src('wwwroot/index.html');
var sources = gulp.src(['wwwroot/js/app/**/*.js'], { read: false });
target.pipe(inject(sources, { relative: true }))
.pipe(gulp.dest('wwwroot'));
});
<!--injection comment-->
<!--inject:js-->
<!--endinject-->
// Watch
gulp.task('ts-watch', function () {
gulp.watch('wwwroot/**/*.ts', ['inject']);
});
// Default task
gulp.task('default', ['inject']);
// ts-compile updated
gulp.task('ts-compile', ['ts-lint', 'clean'], function () {
var tsResult = gulp.src('wwwroot/**/*.ts')
.pipe(sourcemaps.init())
.pipe(typescript());
tsResult.js
.pipe(sourcemaps.write(".", { sourceRoot: 'wwwroot/app' }))
.pipe(gulp.dest('wwwroot/js'));
});