gulpfile.js

const gulp = require('gulp');
const webserver = require('gulp-webserver');
const babel = require('gulp-babel');
const dom = require('gulp-dom');
const sass = require('gulp-sass');
const newer = require('gulp-newer');
const cssnano = require('gulp-cssnano');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const cache = require('gulp-cache');
const imagemin = require('gulp-imagemin');
const size = require('gulp-size');
const gutil = require('gulp-util');
const critical = require('critical').stream;


const path = require('path');
const ROOT_DIR = 'mentor';

//
// Do magic on the images
//
gulp.task('images', () =>
  gulp.src(path.join(ROOT_DIR, 'img/**/*'))
    .pipe(imagemin({
      progressive: true,
      interlaced: true
    }))
    .pipe(gulp.dest('dist/mentor/img'))
    .pipe(size({title: 'images'}))
);

//
// Add the JS files to the party
//
gulp.task('js', () => {
  // Order matters!
  var scripts = [
    'node_modules/dialog-polyfill/dialog-polyfill.js',
    path.join(ROOT_DIR, 'js', 'firebase.js'),
    path.join(ROOT_DIR, 'js', 'auth.js'),
    path.join(ROOT_DIR, 'js', 'router.js'),
    path.join(ROOT_DIR, 'js', 'ui.js'),
    path.join(ROOT_DIR, 'js', 'main-mentor-new.js')
  ]

  return gulp.src(scripts)
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(sourcemaps.init())
    .pipe(concat('mentor.js'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/mentor/js'));
});

//
// Compile and automatically prefix stylesheets
//
gulp.task('styles', () => {
  /*const AUTOPREFIXER_BROWSERS = [
    'ie >= 10',
    'ie_mob >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 4.4',
    'bb >= 10'
  ];*/

  return gulp.src([
    'node_modules/dialog-polyfill/dialog-polyfill.css',
    path.join(ROOT_DIR, 'lib', 'material.blue_grey-orange.min.css'),
    path.join(ROOT_DIR, 'styles', '**/*.scss')
  ])
    .pipe(newer('dist/mentor/css'))
    .pipe(sourcemaps.init())
    .pipe(sass({
      precision: 10
    }).on('error', sass.logError))
    //.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(concat('mentor.css'))
    .pipe(cssnano())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/mentor/css'))
});

//
// Generate & Inline Critical-path CSS
//
gulp.task('critical', ['styles'], function () {
  return gulp.src(path.join(ROOT_DIR, 'templates', 'index.html'))
    .pipe(critical({
      base: 'dist/mentor',
      inline: true,
      minify: true,
      css: [
        'dist/mentor/css/mentor.css'
      ]
    }))
    .on('error', function(err) { gutil.log(gutil.colors.red(err.message)); })
    .pipe(gulp.dest('dist/mentor/'));
});

//
// Main build tasks
//
gulp.task('build', ['critical', 'js', 'images']);

//
// local dev mode
//
gulp.task('serve', ['build'], function() {
  gulp.src('dist')
    .pipe(webserver({
      //livereload: true,
      fallback: 'mentor/index.html'
    }));

  gulp.watch(['mentor/js/**'], ['js']);
  gulp.watch(['mentor/styles/**'], ['critical']);
  gulp.watch(['mentor/templates/**'], ['critical']);
});