Angular 1.X + Gulp

gulpfile.js

'use strict';

var gulp          = require('gulp'),
    path          = require('path'),
    del           = require('del'),
    concat        = require('gulp-concat'),
    uglify        = require('gulp-uglify'),
    sass          = require('gulp-sass'),
    eslint        = require('gulp-eslint'),
    cssimport     = require('gulp-cssimport'),
    gulpif        = require('gulp-if'),
    gzip          = require('gulp-gzip'),
    htmlmin       = require('gulp-htmlmin'),
    cleanCss      = require('gulp-clean-css'),
    sourcemaps    = require('gulp-sourcemaps'),
    autoprefixer  = require('gulp-autoprefixer'),
    runSequence   = require('run-sequence'),
    ngAnnotate    = require('gulp-ng-annotate'),
    templateCache = require('gulp-templatecache'),
    browserSync   = require('browser-sync').create(),
    spa           = require('browser-sync-spa'),
    uncss         = require('gulp-uncss'),
    imagemin      = require('gulp-imagemin');

var reload = browserSync.reload;

var config = {
  sourceDir: './src/',
  buildDir: './dist/',
  serverDir: './.tmp/',
  ngApp: '[oiPosApp]',
  ngTemplates: 'oiPosApp.templates',
  browserPort: 3000,
  UIPort: 3001,

  fonts: {
    src: 'src/assets/fonts/**/*',
    dest: 'dist/assets/fonts',
    destServer: '.tmp/assets/fonts'
  },

  images: {
    src: 'src/assets/images/**/*',
    favicon: 'src/favicon.ico',
    dest: 'dist/assets/images',
    destServer: '.tmp/assets/images'
  },

  scripts: {
    src: 'src/**/*.js',
    files: 'src/**/*.js',
    dest: 'dist/assets/js',
    destServer: '.tmp/assets/js'
  },

  styles: {
    src: 'src/assets/sass/style.sass',
    files: 'src/assets/sass/**/*.sass',
    dest: 'dist/assets/css',
    destServer: '.tmp/assets/css'
  },

  templates: {
    src: 'src/components/**/*.html',
    files: 'src/**/*.html',
    index: 'src/index.html',
    dest: 'dist/assets/js',
    destServer: '.tmp/assets/js'
  },

  gzip: {
    src: 'dist/**/*.{html,xml,json,css,js,js.map,css.map,svg}',
    dest: 'dist/',
    options: {}
  },

  vendors: [
    './node_modules/angular/angular.js',
    './node_modules/angular-ui-router/release/angular-ui-router.js'
  ],

  files: [
    'src/app.js',
    'src/services/**/*.js',
    'src/components/**/*.js'
  ]
};

gulp.task('del', function() {
  return del(global.isProd ? config.buildDir : config.serverDir);
});

gulp.task('styles', function () {
  return gulp.src(config.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass({
      importer: require('npm-sass').importer
    }).on('error', sass.logError))
    .pipe(cssimport({includePaths: ['node_modules']}))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(gulpif(global.isProd, cleanCss()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(global.isProd ? config.styles.dest : config.styles.destServer))
    .pipe(reload({stream: true}));
});

gulp.task('images', function () {
  return gulp.src(config.images.src)
    .pipe(imagemin([], {
      verbose: true
    }))
    .pipe(gulp.dest(global.isProd ? config.images.dest : config.images.destServer));
});


gulp.task('favicon', function () {
  return gulp.src(config.images.favicon)
    .pipe(gulp.dest(global.isProd ? config.buildDir : config.serverDir));
});

gulp.task('fonts', function() {
  return gulp.src(config.fonts.src)
    .pipe(gulp.dest(global.isProd ? config.fonts.dest : config.fonts.destServer));
});

gulp.task('lint', function() {
  return gulp.src(config.scripts.files)
    .pipe(eslint())
    .pipe(eslint.format());
});

gulp.task('templates', function() {
  var options = {
    output: 'templates.js',
    stripFromPath: '',
    prependToPath: '',
    moduleName: config.ngTemplates,
    minify: global.isProd ? {collapseWhitespace: true, minifyCSS: true} : false
  };

  return gulp.src(config.templates.src)
    .pipe(sourcemaps.init())
    .pipe(templateCache(options))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(global.isProd ? config.templates.dest : config.templates.destServer))
    .pipe(reload({stream: true}));
});

gulp.task('vendors', function() {
  return gulp.src(config.vendors)
    .pipe(sourcemaps.init())
    .pipe(concat('vendors.js'))
    .pipe(gulpif(global.isProd, uglify()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(global.isProd ? config.scripts.dest : config.scripts.destServer));
});

gulp.task('scripts', ['lint'], function() {
  return gulp.src(config.files)
    .pipe(sourcemaps.init())
    .pipe(concat('bundle.js'))
    .pipe(ngAnnotate())
    .pipe(gulpif(global.isProd, uglify()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(global.isProd ? config.scripts.dest : config.scripts.destServer))
    .pipe(reload({stream: true}));
});

gulp.task('html', function() {
  return gulp.src(config.templates.index)
    .pipe(gulpif(global.isProd, htmlmin({collapseWhitespace: true, minifyCSS: true})))
    .pipe(gulp.dest(global.isProd ? config.buildDir : config.serverDir))
    .pipe(reload({stream: true}));
});

gulp.task('gzip', function () {
  return gulp.src(config.gzip.src)
    .pipe(gzip(config.gzip.options))
    .pipe(gulp.dest(config.gzip.dest));
});

gulp.task('serve', function () {
  browserSync.use(
    spa({
      selector: config.ngApp,
      history: {
        index: '/index.html'
      }
    })
  );

  browserSync.init({
    server: {
      baseDir: global.isProd ? config.buildDir : config.serverDir,
      port: config.browserPort,
      ui: {
        port: config.UIPort
      },
      ghostMode: false,
      open: false
    }
  });

  gulp.watch(config.styles.files, ['styles']);
  gulp.watch(config.scripts.files, ['scripts']);
  gulp.watch(config.templates.files, ['templates', 'html']);
});

gulp.task('serve:dev', function(cb) {
  global.isProd = false;
  runSequence('build:dev', 'serve', cb);
});

gulp.task('serve:prod', function(cb) {
  global.isProd = true;
  runSequence('build:prod', 'serve', cb);
});

gulp.task('build:dev', function(cb) {
  global.isProd = false;
  runSequence('del', ['html', 'styles', 'images', 'favicon', 'scripts', 'vendors', 'templates', 'fonts'], cb);
});

gulp.task('build:prod', function(cb) {
  global.isProd = true;
  runSequence('del', ['html', 'styles', 'images', 'favicon', 'scripts', 'vendors', 'templates', 'fonts'], 'gzip', cb);
});

gulp.task('default', ['serve:dev']);