Browserify + Typescript + Less + Minification

gulpfile.js

var gulp = require('gulp');
var gulpIf = require('gulp-if');
var gutil = require('gutil');
var notifier = require('node-notifier');

var sourceMaps = require('gulp-sourcemaps');
var sourceStream = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');

var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');

var templateCache = require('gulp-angular-templatecache');

var es = require('event-stream');
var path = require('path');
var browserify = require('browserify');
var util = require('gulp-util');

var runSequence = require('run-sequence');

var del = require('del');

// HTTP Server
var connect = require('gulp-connect');
var historyApiFallback = require('connect-history-api-fallback');
var watching = false;

// Options
var options = require('./options');
var settings = options.settings;
var source = options.source;
var target = options.target;
var alpha = options.alpha;
var beta = options.beta;

// process.env.BROWSERIFYSHIM_DIAGNOSTICS=1

// Standard handler
function standardHandler(err) {
    // Notification
    notifier.notify({ message: 'Error: ' + err.message });
    // Log to console
    gutil.log(util.colors.red('Error'), err.message);
    this.emit('end');
}

function bundle() {

    var bundler = browserify({ debug: true })
        .add(source.file.browserify.entry)
        .plugin('tsify', { 
            //noImplicitAny: true 
        })
        .on('update', bundle) // on any dep update, runs the bundler
        .on('log', gutil.log); // output build logs to terminal
    
    return bundler
        .bundle()
            .on('error', standardHandler)
        .pipe(sourceStream(alpha.file.browserify.output))
        .pipe(buffer())
        .pipe(sourceMaps.init({ loadMaps: true }))
        // Add transformation tasks to the pipeline here.
        .pipe(uglify())
            .on('error', standardHandler)
        .pipe(sourceMaps.write('./map'))
        .pipe(gulp.dest(alpha.dir.base))
        .pipe(gulpIf(watching, connect.reload()));

}

gulp.task('default', function (cb) {

    watching = true;
    return runSequence(['clean'], ['augment'], ['connect', 'watch'], cb);

});

gulp.task('clean', function (cb) {
    
    return del(target.dir.base, cb);

});

gulp.task('watch', function () {

    watching = true;
    
    gulp.watch(source.glob.copy, ['copy']);
    gulp.watch(source.glob.font, ['augment-font']);
    gulp.watch(source.glob.less, ['augment-less']);
    gulp.watch(source.glob.script, ['augment-script']);
    return gulp.watch(source.glob.html, ['augment-script']); // Call script because 'augment-html' is a dependency
    
});

gulp.task('augment', ['copy', 'augment-html', 'augment-font', 'augment-script', 'augment-less']);

gulp.task('copy', function () {

    return gulp
        .src(source.glob.copy, { base: source.dir.base })
        .pipe(gulp.dest(alpha.dir.base))
        .pipe(gulpIf(watching, connect.reload()));

});

gulp.task('augment-html', function () {

    return gulp
        .src(source.glob.html)
        .pipe(templateCache({
            filename: 'templates.js',
            templateHeader: 'angular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {',
            standalone: true
        }))
        .pipe(gulp.dest(source.dir.app));

});

gulp.task('augment-font', function () {

    return gulp
        .src(source.glob.font)
        .pipe(es.map(function(file, callback) { // Rebase files from random bower directories
            file.path = file.base + file.path.replace(/^.*\//i, ''); 
            return callback(null, file);
        }))
        .pipe(gulp.dest(alpha.dir.font))
        .pipe(gulpIf(watching, connect.reload()));

});


gulp.task('augment-script', ['augment-html'], bundle);

gulp.task('augment-less', function() {

    return gulp
        .src(source.file.less.entry)
        .pipe(sourceMaps.init())
        .pipe(less({
            paths: [path.join(__dirname, 'less', 'includes')],
        }))
            .on('error', standardHandler)
        .pipe(minifyCSS())
        .pipe(sourceMaps.write('./map'))
        .pipe(gulp.dest(alpha.dir.base))
        .pipe(gulpIf(watching, connect.reload()));

});


gulp.task('connect', function () {

    return connect.server({
        root: [alpha.dir.base],
        port: settings.port,
        livereload: true,
        middleware: function (connect, o) {
            return [
                (function () {
                    var proxy, url;
                    url = require('url');
                    proxy = require('proxy-middleware');
                    options = url.parse('http://localhost:8080/api');
                    options.route = '/api';
                    options.headers = { 'X-Forwarded-Host': 'localhost:9000' };
                    return proxy(options);
                })(),
                historyApiFallback
            ];
        }
    });

});

options.js

var source;
var alpha;
var beta;
var settings;

/**
 * Source Settings
 */
source = {
    dir: {
        base: 'frontend'
    }
};

source = {
    dir: {
        base: source.dir.base,
        app: source.dir.base + '/app',
        less: source.dir.base + '/less',
        image: source.dir.base + '/image',
        font: source.dir.base + '/font'
    }
};

source.file = {
    browserify: {
        entry: './frontend/app/application.ts'
    },
    less: {
        entry:  source.dir.base + '/style.less'
    }
}

source.glob = {
    script: source.dir.app + '/**/*.ts',
    less: [
        source.file.less.entry,
        source.dir.less + '/**/*.*'
    ],
    copy: [
        source.dir.base + '/index.html',
        source.dir.base + '/keycloak.json',
        source.dir.image + '/**/*.*'
    ],
    font: [
        source.dir.base + '/bower_components/**/*.eot', 
        source.dir.base + '/bower_components/**/*.svg', 
        source.dir.base + '/bower_components/**/*.ttf', 
        source.dir.base + '/bower_components/**/*.woff',
        source.dir.base + '/bower_components/**/*.woff2'
    ],
    html: [
        source.dir.app + '/**/*.html'
    ]
};

/**
 * Target
 */
target = {
    dir: {
        base: 'target/frontend'
    }
};

/**
 * Target - Alpha Settings
 */
alpha = {
    dir: {
        base: target.dir.base + '/alpha'
    }
};

alpha = {
    dir: {
        base: alpha.dir.base,
        image: alpha.dir.base + '/image',
        font: alpha.dir.base + '/font'
    }
};

alpha.file = {
    browserify: {
        sourceMap: alpha.dir.base + '/application.js.map',
        output: 'application.js'
    }
};

/**
 * Target - Beta Settings
 */
beta = {
    dir: {
        base: target.dir.base + '/beta'
    }
};

settings = {
    port: 9000
};

module.exports = {
    source: source,
    target: target,
    alpha: alpha,
    beta: beta,
    settings: settings
};

package.json

{
  "name": "amt",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "bower": "~1.3.12",
    "browserify": "^9.0.3",
    "browserify-shim": "^3.8.5",
    "connect-history-api-fallback": "0.0.5",
    "connect-livereload": "~0.5.0",
    "del": "~0.1.3",
    "event-stream": "~3.1.7",
    "gulp": "~3.8.10",
    "gulp-angular-templatecache": "^1.6.0",
    "gulp-connect": "~2.2.0",
    "gulp-if": "1.2.5",
    "gulp-less": "^3.0.2",
    "gulp-livereload": "~2.1.1",
    "gulp-minify-css": "^1.0.0",
    "gulp-open": "~0.3.1",
    "gulp-replace": "^0.5.3",
    "gulp-rev-all": "*",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-uglify": "^1.1.0",
    "gulp-usemin": "~0.3.8",
    "gulp-util": "^3.0.4",
    "gulp-wrap-amd": "~0.3.1",
    "gutil": "^1.6.4",
    "jasmine-core": "^2.2.0",
    "karma": "^0.12.31",
    "karma-chrome-launcher": "^0.1.8",
    "karma-jasmine": "^0.3.5",
    "karma-phantomjs-launcher": "^0.1.4",
    "node-notifier": "^4.2.1",
    "proxy-middleware": "~0.7.0",
    "q": "~1.1.1",
    "run-sequence": "^1.0.2",
    "tsify": "^0.8.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "engines": {
    "node": ">=0.8.0"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "angular-ui-router": "./frontend/bower_components/angular-ui-router/release/angular-ui-router.js",
    "traverson":         "./frontend/bower_components/traverson/browser/dist/traverson.js",
    "traverson-angular": "./frontend/bower_components/traverson-angular/browser/dist/traverson-angular.js",
    "traverson-hal":     "./frontend/bower_components/traverson-hal/browser/dist/traverson-hal.js"
  },
  "browserify-shim": {
    "angular": "global:angular"
  }
}