TypeScript/LESS Build

gulpfile.js

/// <binding ProjectOpened='watch' />
/// <reference path="node_modules/systemjs/dist/system.js" />
/// <binding ProjectOpened='default' />

var gulp = require("gulp");
var less = require("gulp-less");
var ts = require("gulp-typescript");
var minifyCss = require("gulp-minify-css");
var concatCss = require("gulp-concat-css");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var merge = require("merge-stream");
var tslint = require("gulp-tslint");
var sourcemaps = require("gulp-sourcemaps");

var BuildTasks = function (globalOptions) {
    var self = this;

    this.tasks = function() {
        this.watchThenRun = function(taskOptions) {
            return function() {
                gulp.watch(taskOptions.inputPaths, [taskOptions.runTaskName])
                    .on("error", function (err) {
                        console.error("Error occurred while watching '" + taskOptions.runTaskName + "'", err);
                        this.emit("end");
                    });
            };
        };

        this.compileLess = function (taskOptions) {
            var outputFolder = taskOptions.outputFolder ? taskOptions.outputFolder : globalOptions.outputFolder;
            
            return function() {
                return gulp.src(taskOptions.inputPaths)
                    .pipe(sourcemaps.init())
                    .pipe(less({
                        filename: taskOptions.outputFileName
                    }))
                    .pipe(sourcemaps.write(".", { sourceRoot: "." }))
                    .pipe(gulp.dest(outputFolder));
            }
        };

        this.concatenateCSS = function (taskOptions) {
            var outputFolder = taskOptions.outputFolder ? taskOptions.outputFolder : globalOptions.outputFolder;

            return function() {
                return gulp.src(taskOptions.inputPaths, { base: outputFolder })
                    .pipe(concatCss(taskOptions.outputFileName))
                    .pipe(gulp.dest(outputFolder));
            };
        };

        this.minifyCSS = function(taskOptions) {
            var outputFolder = taskOptions.outputFolder ? taskOptions.outputFolder : globalOptions.outputFolder;

            return function() {
                gulp.src(taskOptions.inputPaths, { base: outputFolder })
                    .pipe(sourcemaps.init())
                    .pipe(minifyCss())
                    .pipe(rename(function(path) {
                        path.extname = ".min.css";
                    }))
                    .pipe(sourcemaps.write(".", { sourceRoot: "." }))
                    .pipe(gulp.dest(outputFolder));
            };
        };

        this.lintTS = function(taskOptions) {
            return function() {
                return gulp.src(taskOptions.inputPaths)
                    .pipe(tslint())
                    .pipe(tslint.report("verbose",
                    {
                        emitError: true
                    }));
            };
        };

        this.compileTS = function(taskOptions) {
            var tsProject = ts.createProject(taskOptions.tsConfigFilePath, {
                outFile: taskOptions.outputFileName
            });

            var outputFolder = taskOptions.outputFolder ? taskOptions.outputFolder : globalOptions.outputFolder;

            return function () {
                return tsProject.src()
                    .pipe(ts(tsProject))
                    .js
                    .pipe(gulp.dest(outputFolder));
            };
        };

        this.minifyJS = function (taskOptions) {
            var outputFolder = taskOptions.outputFolder ? taskOptions.outputFolder : globalOptions.outputFolder;

            return function() {
                return gulp.src(taskOptions.inputPaths)
                    .pipe(sourcemaps.init())
                    .pipe(uglify())
                    .pipe(rename(function(path) {
                        path.extname = ".min.js";
                    }))
                    .pipe(sourcemaps.write(".", { sourceRoot: "." }))
                    .pipe(gulp.dest(outputFolder));
            };
        };

        this.concatenateJS = function(taskOptions) {
            return function() {
                return gulp.src(taskOptions.inputPaths)
                    .pipe(sourcemaps.init())
                    .pipe(concat(taskOptions.outputFileName))
                    .pipe(sourcemaps.write(".", { sourceRoot: "." }))
                    .pipe(gulp.dest(taskOptions.outputFolder ? taskOptions.outputFolder : globalOptions.outputFolder));
            }
        };

        return this;
    }();

    this.initializeStyleWorkflow = function (workflowOptions) {
        var outputFolder = workflowOptions.outputFolder ? workflowOptions.outputFolder : globalOptions.outputFolder;

        gulp.task("compile:less", self.tasks.compileLess({
            inputPaths: workflowOptions.lessInputPaths,
            outputFileName: workflowOptions.compiledLessOutputFileName,
            outputFolder: outputFolder
        }));

        gulp.task("watch:less", self.tasks.watchThenRun({
            inputPaths: workflowOptions.lessWatchPaths,
            runTaskName: "compile:less"
        }));

        gulp.task("concat:lib:css", self.tasks.concatenateCSS({
            inputPaths: workflowOptions.libCssFiles,
            outputFileName: workflowOptions.libOutputFileName,
            outputFolder: outputFolder
        }));

        gulp.task("min:css", ["compile:less", "concat:lib:css"], self.tasks.minifyCSS({
            inputPaths: [
                outputFolder + "/" + workflowOptions.compiledLessOutputFileName,
                outputFolder + "/" + workflowOptions.libOutputFileName
            ]
        }));
    };

    this.initializeTypeScriptWorkflow = function (workflowOptions) {
        var outputFolder = workflowOptions.outputFolder ? workflowOptions.outputFolder : globalOptions.outputFolder;

        gulp.task("lint:ts", self.tasks.lintTS({
            inputPaths: workflowOptions.tsInputPaths
        }));

        gulp.task("compile:ts", ["lint:ts"], self.tasks.compileTS({
            tsConfigFilePath: workflowOptions.tsConfigFilePath,
            outputFileName: workflowOptions.compiledTsOutputFileName
        }));

        gulp.task("watch:ts", self.tasks.watchThenRun({
            inputPaths: workflowOptions.tsInputPaths,
            runTaskName: "compile:ts"
        }));

        gulp.task("concat:lib:js", self.tasks.concatenateJS({
            inputPaths: workflowOptions.libInputPaths,
            outputFileName: workflowOptions.libOutputFileName
        }));

        gulp.task("min:js", ["concat:lib:js", "compile:ts"], self.tasks.minifyJS({
            inputPaths: [
                outputFolder + "/" + workflowOptions.compiledTsOutputFileName,
                outputFolder + "/" + workflowOptions.libOutputFileName
            ]
        }));
    };
};

var buildTasks = new BuildTasks({
    outputFolder: "dist"
});

buildTasks.initializeStyleWorkflow({
    lessInputPaths: "Styles/site.less",
    lessWatchPaths: [
        "Styles/*.less",
        "node_modules/bootstrap-less/bootstrap/*.less",
        "node_modules/bootstrap-less/bootstrap/mixins/*.less"
    ],
    compiledLessOutputFileName: "site.css",
    libCssFiles: [
        "node_modules/angular-toastr/dist/angular-toastr.css",
        "node_modules/angular-tablesort/tablesort.css"
    ],
    libOutputFileName: "lib.css"
});

buildTasks.initializeTypeScriptWorkflow({
    tsInputPaths: "Scripts/**/*.ts",
    tsWatchPaths: "Scripts/**/*.ts",
    tsConfigFilePath: "tsconfig.json",
    compiledTsOutputFileName: "app.js",
    libInputPaths: [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/lodash/lodash.js",
        "node_modules/angular/angular.js",
        "node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js",
        "node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js",
        "node_modules/angular-ui-router/release/angular-ui-router.js",
        "node_modules/angular-ui-router-uib-modal/angular-ui-router-uib-modal.js",
        "node_modules/systemjs/dist/system.js",
        "node_modules/systemjs/dist/system-polyfills.js",
        "node_modules/angular-toastr/dist/angular-toastr.tpls.js",
        "node_modules/angular-tablesort/js/angular-tablesort.js",
        "node_modules/es6-shim/es6-shim.js"
    ],
    libOutputFileName: "lib.js"
});

gulp.task("watch", ["watch:less", "watch:ts"]);
gulp.task("publish", ["min:css", "min:js"]);
gulp.task("default", ["publish"]);

index.html

<script>
    window.settings = @Html.Raw(Model.ToJson());

    System.import("utilities/utilitiesModule");

    System.import("app")
        .then(function () {
            angular.bootstrap(document, ["app"]);
            console.info("System.import was successful.");
        })
        .catch(function (response) {
            console.error("Error in System.import, could not bootstrap.", response);
        });
</script>

package.json

{
  "dependencies": {
    "angular": "1.5.3",
    "angular-tablescroll": "^2.0.0",
    "angular-tablesort": "^1.1.2",
    "angular-toastr": "^1.7.0",
    "angular-ui-bootstrap": "^1.3.1",
    "angular-ui-router": "^1.0.0-alpha.5",
    "angular-ui-router-uib-modal": "0.0.8",
    "bootstrap": "^3.3.6",
    "clipboard": "^1.5.10",
    "es6-shim": "^0.35.0",
    "jquery": "^2.2.3",
    "lodash": "^4.8.2",
    "moment": "^2.13.0",
    "ngclipboard": "^1.1.1",
    "systemjs": "^0.19.25",
    "typings": "^1.0.4"
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-concat-css": "^2.2.0",
    "gulp-less": "^3.1.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-rename": "^1.2.2",
    "gulp-tslint": "^4.3.5",
    "gulp-typescript": "^2.12.2",
    "gulp-uglify": "^1.5.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-watch": "^4.3.5",
    "merge-stream": "^1.0.0",
    "tslint": "^3.7.4"
  },
  "scripts": {
    "postinstall": "typings install && gulp publish"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "inlineSources": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
      "node_modules",
      "typings"
    ]
}

tslint.json

{
  "rules": {
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "indent": [
      true,
      "spaces"
    ],
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": true,
    "member-ordering": [
      true,
      "public-before-private",
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-angle-bracket-type-assertion": true,
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": false,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-inferrable-types": true,
    "no-shadowed-variable": false,
    "no-string-literal": false,
    "no-switch-case-fall-through": true,
    "no-unused-expression": true,
    "no-unused-variable": false,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-finally",
      "check-whitespace"
    ],
    "quotemark": [
      true,
      "double",
      "avoid-escape"
    ],
    "radix": true,
    "semicolon": [
      "always"
    ],
    "trailing-comma": [
      false,
      {
        "singleline": "never",
        "multiline": "always"
      }
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ]
  }
}

typings.json

{
  "globalDependencies": {
    "angular": "registry:dt/angular#1.5.0+20160602160139",
    "angular-toastr": "registry:dt/angular-toastr#1.6.0+20160330162121",
    "angular-ui-bootstrap": "registry:dt/angular-ui-bootstrap#0.13.3+20160602140119",
    "jquery": "registry:dt/jquery#1.10.0+20160417213236",
    "lodash": "registry:dt/lodash#3.10.0+20160330154726",
    "angular-ui-router": "registry:dt/angular-ui-router#1.1.5+20160521151413"
  }
}