GulpFile for typescript projects

gulpfile.babel.js

'use strict';

// Proxy URL (optional)
const proxyUrl = '';

// paths to relevant directories
const dirs = {
  src: './src',
  dest: './dist'
};

// paths to file sources
const sources = {
  ts: `${dirs.src}/**/*.ts`,
  js: `${dirs.src}/**/*.js`,
  scss: `${dirs.src}/**/*.scss`,
  coreScss: `${dirs.src}/scss/app.scss`,
  html: `${dirs.src}/**/*.html`,
  img: `${dirs.src}/img/**/*.{png,jpg}`,
  font: [],
  jsVendor: [
    'node_modules/angular/angular.js',
    'node_modules/angular-ui-router/release/angular-ui-router.js',
    'node_modules/angular-resource/angular-resource.js'
  ],
  cssVendor: []
};

// paths to file destinations
const dests = {
  js: `${dirs.dest}/js`,
  css: `${dirs.dest}/css`,
  html: `${dirs.src}/js`,
  img: `${dirs.dest}/img`,
  sigFile: `${dirs.src}/img/.tinypng-sigs`,
  font: `${dirs.dest}/fonts`,
  vendor: `${dirs.dest}/vendors`
};

// plugins
import gulp from 'gulp';
import browserSync from 'browser-sync';
import gulpLoadPlugins from 'gulp-load-plugins';
import history from 'connect-history-api-fallback';
import reporters from 'jasmine-reporters';
import karma from 'karma';

// constants
const $ = gulpLoadPlugins();
const tsProject = $.typescript.createProject('tsconfig.json');
const TMPL_CACHE_HEADER = '\n// generated file. do not modify.\nangular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {';
const TINYPNG_KEY       = 'g7BmBd0TIedcR5PDn1qd8wxzvuwrob2V';

/****************************************
  Gulp Tasks
*****************************************/

// launch browser sync as a standalone local server
gulp.task('browser-sync-local', browserSyncLocal());
// browser-sync task for starting the server by proxying a local url
gulp.task('browser-sync-proxy', browserSyncProxy());
// copy vendor CSS
gulp.task('css-vendors', cssVendors());
// copy fonts
gulp.task('fonts', fonts());
// Lint Javascript Task
gulp.task('ts-lint', typescriptLint());
// Concatenate and Minify Vendor JS
gulp.task('js-vendors', javascriptVendors());
// lint sass task
gulp.task('sass-lint', sassLint());
// Concatenate & Minify JS
gulp.task('scripts', ['ts-lint'], scripts());
// compile, prefix, and minify the sass
gulp.task('styles', styles());
// compress and combine svg icons
gulp.task('svg', svg());
// Unit testing
gulp.task('test', test());
// compress png and jpg images via tinypng API
gulp.task('tinypng', tinypng());
// minify and concatenate views into angular template cache
gulp.task('views', views());
// Watch Files For Changes
gulp.task('watch', watch());

// // local task builds everything, opens up a standalone server, and watches for changes
gulp.task('default', [
  'views',
  'fonts',
  'styles',
  'scripts',
  'browser-sync-local',
  'watch'
]);

// default task builds everything, opens up a proxy server, and watches for changes
gulp.task('proxy', [
  'views',
  'fonts',
  'styles',
  'scripts',
  'browser-sync-proxy',
  'watch'
]);

// builds everything
gulp.task('build', [
  'views',
  'fonts',
  'styles',
  'scripts',
  'css-vendors',
  'js-vendors'
]);

// builds the vendor files
gulp.task('vendors', [
  'css-vendors',
  'js-vendors'
]);

// compresses imagery
gulp.task('images', [
  'svg',
  'tinypng'
]);

/****************************************
  Task Logic
*****************************************/

function browserSyncLocal () {
  return () => {
    browserSync.init({
      server: {
        baseDir: './',
        middleware: [ history() ]
      }
    });
  };
}

function browserSyncProxy () {
  return () => {
    browserSync.init({
      proxy: proxyUrl
    });
  };
}

function cssVendors () {
  return () => {
    return gulp.src(sources.cssVendor)
      .pipe(gulp.dest(dests.vendor));
  };
}

function fonts () {
  return () => {
    gulp.src(sources.font)
      .pipe(gulp.dest(dests.font));
  };
}

function javascriptLint () {
  return () => {
    return gulp.src(sources.js)
      .pipe($.jshint({esversion: 6}))
      .pipe($.jshint.reporter('jshint-stylish'));
  };
}

function javascriptVendors () {
  return () => {
    return gulp.src(sources.jsVendor)
      .pipe($.plumber())
      .pipe($.concat('vendors.min.js'))
      .pipe($.uglify())
      .pipe(gulp.dest(dests.vendor));
  };
}

function sassLint () {
  return () => {
    return gulp.src(sources.scss)
      .pipe($.sassLint())
      .pipe($.sassLint.format())
      .pipe($.sassLint.failOnError());
  };
}

function scripts () {
  return () => {
    return gulp.src(sources.ts)
      .pipe($.plumber())
      .pipe($.sourcemaps.init())
        .pipe(tsProject())
        .pipe($.concat('app.js'))
        .pipe($.babel())
        .pipe($.ngAnnotate())
        .pipe(gulp.dest(dests.js))
        .pipe($.rename({suffix: '.min'}))
        .pipe($.uglify())
      .pipe($.sourcemaps.write('.'))
      .pipe(gulp.dest(dests.js))
      .pipe(browserSync.stream());
  };
}

function styles () {
  return () => {
    return gulp.src(sources.coreScss)
      .pipe($.sourcemaps.init())
        .pipe($.sass().on('error', $.sass.logError))
        .pipe($.autoprefixer(["> 1%", "last 2 versions"], { cascade: true }))
        .pipe(gulp.dest(dests.css))
        .pipe($.rename({suffix: '.min'}))
        .pipe($.cleanCss())
      .pipe($.sourcemaps.write('.'))
      .pipe(gulp.dest(dests.css))
      .pipe(browserSync.stream({match: '**/*.css'}));
  };
}

function svg () {
  return () => {
    return gulp.src('./src/img/icons/*.svg')
      .pipe($.svgmin())
      .pipe($.svgstore())
      .pipe(gulp.dest('./dist/img/icons'));
  };
}

function test (done) {
  return () => {
    let server = new karma.Server('./karma.conf.js', done);
    server.start();
  };
}

function tinypng () {
  return () => {
    return gulp.src(sources.img)
      .pipe($.tinypngCompress({
        key: TINYPNG_KEY,
        sigFile: dests.sigFile
      }))
      .pipe(gulp.dest(dests.img));
  };
}

function typescriptLint () {
  return () => {
    return gulp.src(sources.ts)
      .pipe($.tslint({
        configuration: './tslint.json',
        formatter: 'stylish'
      }))
      .pipe($.tslint.report({
        summarizeFailureOutput: true
      }));
  };
}

function views () {
  return () => {
    gulp.src(sources.html)
      .pipe($.htmlmin({collapseWhitespace: true}))
      .pipe($.rename({dirname: '/'}))
      .pipe($.angularTemplatecache({
        filename: 'views.js',
        module: 'tcomViews',
        standalone: true,
        moduleSystem: 'IIFE',
        templateHeader: TMPL_CACHE_HEADER
      }))
      .pipe(gulp.dest(dests.html));
  };
}

function watch () {
  return () => {
    gulp.watch(sources.ts, ['scripts']);
    gulp.watch(sources.scss, ['styles']);
    gulp.watch(sources.html, ['views']);
    gulp.watch('**/*.html', browserSync.reload);
  };
}

package.json

{
  "name": "",
  "version": "0.0.0",
  "description": "",
  "main": "index.html",
  "dependencies": {
    "angular": "^1.6.1",
    "angular-resource": "^1.6.1",
    "angular-ui-router": "^0.3.2"
  },
  "devDependencies": {
    "angular-mocks": "^1.6.1",
    "babel-preset-es2015": "^6.18.0",
    "bourbon": "^4.2.7",
    "bourbon-neat": "^1.8.0",
    "browser-sync": "^2.18.5",
    "connect-history-api-fallback": "^1.3.0",
    "gulp": "^3.9.1",
    "gulp-angular-templatecache": "^2.0.0",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-clean-css": "^2.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-filter": "^4.0.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-jasmine": "^2.4.2",
    "gulp-jshint": "^2.0.4",
    "gulp-load-plugins": "^1.4.0",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sass-lint": "^1.3.2",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-svgmin": "^1.2.3",
    "gulp-tinypng-compress": "^1.2.1",
    "gulp-tslint": "^7.1.0",
    "gulp-typescript": "^3.1.5",
    "gulp-uglify": "^2.0.0",
    "gulp-using": "^0.1.1",
    "jasmine-reporters": "^2.2.0",
    "jshint": "^2.9.4",
    "jshint-stylish": "^2.2.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-junit-reporter": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "normalize.css": "^5.0.0",
    "phantomjs": "^2.1.7",
    "tslint": "^4.4.2",
    "typescript": "^2.2.1"
  },
  "scripts": {
    "test": "gulp test"
  },
  "author": "TricomB2B",
  "license": "SEE LICENSE IN LICENSE"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "noImplicitAny": true
  }
}

tslint.json

{
  "rules": {
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "eofline": true,
    "forin": true,
    "indent": [
      true,
      "spaces"
    ],
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-eval": true,
    "no-inferrable-types": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ]
  }
}