Gulp JS Example V2.0

1. Contains build for test and production version with debug and minified js files.
2. Change global variables as per the build configurations.
3. Change css and js file refrences in index.html page as per build configurations.

/******************************

Author: Nilav Patel(nilavpatel.blogspot.com)
version: 2.0
******************************/

/******************************
run below command to install all dependencies:

npm install gulp gulp-clean gulp-minify gulp-cssmin gulp-rename gulp-concat gulp-ng-html2js gulp-minify-html gulp-inject gulp-preprocess gulp-sequence gulp-util gulp-imagemin imagemin-pngquant --save-dev
******************************/

/******************************
default task (it will run task "build-test") => $ gulp,

for Production build, run task => $ gulp build-prod ,

for test build, run task => $ gulp build-test
******************************/

var gulp = require('gulp');
var clean = require('gulp-clean');
var minify = require('gulp-minify');
var cssmin = require('gulp-cssmin');
var rename = require("gulp-rename");
var concat = require('gulp-concat');
var ngHtml2Js = require("gulp-ng-html2js");
var minifyHtml = require("gulp-minify-html");
var inject = require('gulp-inject');
var preprocess = require('gulp-preprocess');
var gulpSequence = require('gulp-sequence');
var gutil = require('gulp-util');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

// ------------default task-------------------------------------------------------
gulp.task('default', ['build-test']);

// ------------build-test task----------------------------------------------------
gulp.task('build-test', gulpSequence(
 'clean', // clean the build
 'copy-html', // copy index.html to /dist folder
 'copy-assets', // copy all assets to /dist folder
 'copy-js', // copy all js files to /dist folder
 'concat-js-test', // concat all application js to app.js file
 'copy-css', // copy all css to
 'partials', // create html to js for all .template.html files
 'rename-js', // rename all js files in /dist/js folder
 'minify-css', // minify all css files in /dist/style folder
 'rename-css', // rename css files with .min prefix
 'clean-junk-test', // remove other junk files
 'image-opt', // image optimization
 'index-test' // inject js and css files in index.html
));

// ------------build-prod task-----------------------------------------------------
gulp.task('build-prod', gulpSequence(
 'clean', // clean the build
 'copy-html', // copy index.html to /dist folder
 'copy-assets', // copy all assets to /dist folder
 'copy-js', // copy all js files to /dist folder
 'concat-js-prod', // concat all application js to app.js file
 'copy-css', // copy all css to
 'partials', // create html to js for all .template.html files
 'minify-js', // minify all js files in /dist/js folder
 'minify-css', // minify all css files in /dist/style folder
 'rename-css', // rename css files with .min prefix
 'clean-junk-prod', // remove other junk files
 'image-opt', // image optimization
 'index-prod' // inject js and css files in index.html
));

// ------------clean dist folder---------------------------------------------------
// This task will clean the ./dist folder
gulp.task('clean', function () {
 return gulp.src('./dist')
  .pipe(clean());
});

// ------------copy html to dist folder--------------------------------------------
// This task will copy html files to ./dist folder
gulp.task('copy-html', function () {
 return gulp.src('./src/index.html')
  .pipe(gulp.dest('./dist'));
});

// ------------copy assets to dist folder------------------------------------------
// This task will copy all assets to ./dist folder
gulp.task('copy-assets', function () {
 return gulp.src([
        './src/assets/**/*.*',
        '!./src/assets/**/*.css'
    ])
  .pipe(gulp.dest('./dist'));
});

// ------------copy all js files to dist folder after minification------------------
// This task will copy all vendor js files to ./dist/js folder for both test and prod
gulp.task('copy-js', function () {
 return gulp.src([
        './node_modules/angular/angular.js',
        './node_modules/angular-material/angular-material.js'
    ])
  .pipe(gulp.dest('./dist/js'));
});

// ------------list all application js files-----------------------------------------
var appJS = [
    './src/common/global.js',
    './src/common/constants.js',
    './src/app/app.module.js',
    './src/app/app.config.js',
    './src/app/app.route.js',
    './src/app/app.run.js',
    './src/app/app.controller.js'
];

// ------------concat all application js files----------------------------------------
// This task will concat all application js files to ./dist/js folder for test
gulp.task('concat-js-test', function () {
 return gulp.src(appJS)
  .pipe(preprocess({
   context: {
    NODE_ENV: 'test',
    DEBUG: true
   }
  }))
  .pipe(concat('app.js'))
  .pipe(gulp.dest('./dist/js'))
  .on('error', gutil.log);
});

// ------------concat all application js files------------------------- ---------------
// This task will copy all js application files to ./dist/js folder for prod
gulp.task('concat-js-prod', function () {
 return gulp.src(appJS)
  .pipe(preprocess({
   context: {
    NODE_ENV: 'production',
    DEBUG: false
   }
  }))
  .pipe(concat('app.js'))
  .pipe(gulp.dest('./dist/js'));
});

// ------------copy all css files to dist folder-------------------------------------
// This task will copy all css files to ./dist/style folder
gulp.task('copy-css', function () {
 return gulp.src([
        './node_modules/angular-material/angular-material.min.css',
        './src/assets/style/*.css'
    ])
  .pipe(gulp.dest('./dist/style'))
  .on('error', gutil.log);
});

// ------------minify all js files---------------------------------------------------
// This task will minify all js files from ./dist/js folder
gulp.task('minify-js', function () {
 return gulp.src('./dist/js/*.js')
  .pipe(minify({
   ext: {
    src: '.debug.js',
    min: '.min.js'
   },
  }))
  .pipe(gulp.dest('./dist/js'))
  .on('error', gutil.log);
});

// ------------minify all css files--------------------------------------------------
// This task will minify css files form ./dist/style folder
gulp.task('minify-css', function () {
 return gulp.src('./dist/style/*.css')
  .pipe(cssmin())
  .pipe(gulp.dest('./dist/style'))
  .on('error', gutil.log);
});

// ------------rename all css files with .min-----------------------------------------
// This task will add .min as extention to all css files in ./dist folder
gulp.task('rename-css', function () {
 return gulp.src([
        './dist/style/*.css',
        '!./dist/style/*.min.css'
    ])
  .pipe(rename(function (path) {
   path.basename += ".min";
  }))
  .pipe(gulp.dest('./dist/style'))
  .on('error', gutil.log);
});

// ------------rename all js files with .min------------------------------------------
// This task will add .min and .debug as extention to js files in ./dist folder
gulp.task('rename-js', function () {
 return gulp.src([
        './dist/js/*.js',
        '!./dist/js/*.min.js'
    ])
  .pipe(rename(function (path) {
   path.basename += ".debug";
  }))
  .pipe(gulp.dest('./dist/js'))
  .on('error', gutil.log);
});

// ------------clean extra junk files from dist--------------------------------------
// This task will remove extra junk files from test build
gulp.task('clean-junk-prod', function () {
 return gulp.src([
        './dist/js/*.js',
        './dist/style/*.css',
        '!./dist/js/*.min.js',
        './dist/js/*.debug.js',
        '!./dist/style/*.min.css'
    ])
  .pipe(clean())
  .on('error', gutil.log);
});

// ------------clean extra junk files from dist----------------------------------------
// This task will remove extra junk js and css files from production build
gulp.task('clean-junk-test', function () {
 return gulp.src([
        './dist/js/*.js',
        './dist/style/*.css',
        './dist/js/*.min.js',
        '!./dist/js/*.debug.js',
        '!./dist/style/*.min.css'
    ])
  .pipe(clean())
  .on('error', gutil.log);
});

// ------------image optimization------------------------------------------------------
// This task will optimize all images in app
gulp.task('image-opt', function () {
 return gulp.src('./dist/img/*.*')
  .pipe(imagemin({
   progressive: true,
   svgoPlugins: [{
    removeViewBox: false
   }],
   use: [pngquant()]
  }))
  .pipe(gulp.dest('./dist/img'))
  .on('error', gutil.log);
});

// ------------convert templates to js file---------------------------------------------
// This task will convert all template html to js files and concat them all in template.js file
gulp.task('partials', function () {
 return gulp.src("./src/**/*.template.html")
  .pipe(minifyHtml({
   empty: true,
   spare: true,
   quotes: true
  }))
  .pipe(ngHtml2Js({
   moduleName: "templates",
   prefix: "/"
  }))
  .pipe(concat("partials.js"))
  .pipe(gulp.dest("./dist/js"))
  .on('error', gutil.log);
});

// ------------build index.html for test------------------------------------------------
// This task will inject js and css files for test build in index.html page
gulp.task('index-test', function () {
 var target = gulp.src('./dist/index.html');
 // It's not necessary to read the files (will speed up things), we're only after their paths:
 var sources = gulp.src([
        './dist/js/angular.debug.js',
        './dist/js/angular-material.debug.js',
        './dist/js/app.debug.js',
        './dist/js/partials.debug.js',
        './dist/style/angular-material.min.css',
        './dist/style/style.min.css'
    ], {
  read: false
 }, {
  relative: true
 });

 return target.pipe(inject(sources))
  .pipe(gulp.dest('./dist'))
  .on('error', gutil.log);
});

// ------------build index.html for prod---------------------------------------------------
// This task will inject js and css files for production build in index.html page
gulp.task('index-prod', function () {
 var target = gulp.src('./dist/index.html');
 // It's not necessary to read the files (will speed up things), we're only after their paths:
 var sources = gulp.src([
        './dist/js/angular.min.js',
        './dist/js/angular-material.min.js',
        './dist/js/app.min.js',
        './dist/js/partials.min.js',
        './dist/style/angular-material.min.css',
        './dist/style/style.min.css'
    ], {
  read: false
 }, {
  relative: true
 });

 return target.pipe(inject(sources))
  .pipe(gulp.dest('./dist'))
  .on('error', gutil.log);
});