Gulp development and production configuration for polymer application written at es6

gulpfile.js

'use strict';

// Development web-server
const browserSync = require('browser-sync').create();
// Babel plugin for transpiling ES6 code to JS
const babel       = require('gulp-babel');
// Tool for separating html and js code
const crisper     = require('gulp-crisper');
// Sourcemaps generation for debugin ES6 at browser
const sourcemaps  = require('gulp-sourcemaps');
// Gulp core
const gulp        = require('gulp');
// Conditionaly execute gulp task
const gulpif      = require('gulp-if');
// Html minification
const htmlmin     = require('gulp-htmlmin');
// Uglify2JS tool
const uglify      = require('gulp-uglify');
// Run gulp task at desired order
const runSequence = require('run-sequence');
// Concatenate HTML imports and scripts to single file
const vulcanize   = require('gulp-vulcanize');
// Clean files and folders
const del         = require('del');

// Directories
const DIST  = 'dist';
const SRC   = 'src';
const TMP   = '.tmp';

// Transpile all JS to ES5.
gulp.task('js', () => {
  //Returns a stream of js files that can be piped to plugins.
  return gulp.src(`${SRC}/**/*.js`, {base: SRC})
    // Init source maps. All plugins between sourcemaps.init and
    // sourcemaps.write should support sourcemaps
    .pipe(sourcemaps.init())
    // Transpile ES2015 code to ES5
    .pipe(babel({ presets: ['es2015'] }))
    // Write sourcemaps inline into stream
    .pipe(sourcemaps.write())
    // Write transpiled files into desired directory
    // at file system
    .pipe(gulp.dest(TMP))
    .pipe(browserSync.stream());
});

gulp.task('clean:tmp', () => {
  return del([TMP]);
});

gulp.task('clean:dist', () => {
  return del([DIST]);
});

// Copy html file to temporary directory
gulp.task('copy-html', () => {
  //Returns a stream of HTML files that can be piped to plugins.
  return gulp.src(`${SRC}/**/*.html`, {base: SRC})
    // Write files to destination
    .pipe(gulp.dest(TMP));
});

// Prepares production version of the application.
gulp.task('minify', () => {
  return gulp.src(`${TMP}/index.html`, {base: TMP})
    // combine all html and js into single file
    .pipe(vulcanize({
        inlineCss    : true,
        inlineScripts: true,
        stripComments: true
      }))
    // Separate html and js to two files
    .pipe(crisper())
    //Minify html
    .pipe(gulpif('*.html', htmlmin({
        removeComments: true,
        collapseWhitespace: true,
        collapseInlineTagWhitespace: true,
        minifyJS: true,
      })))
    // Minify JS
    .pipe(gulpif('*.js', uglify()))
    // Write files to destination
    .pipe(gulp.dest(DIST));
});

// Running BrowserSync web server
gulp.task('browser-sync', () => {
  browserSync.init({
    browser: 'google chrome',
    notify: false,
    open: 'external',
    server: {
      baseDir: [TMP, SRC],
      routes: {'/bower_components': 'bower_components'}
    }
  });

  // Watch files for changes and reload browsers
  gulp.watch(`${SRC}/**/*.js`, ['js']);
  gulp.watch(`${SRC}/**/*.{css,html}`).on('change', browserSync.reload);
});

// Build production files
gulp.task('build', done => {
  runSequence('clean:tmp', 'clean:dist', 'js', 'copy-html', 'minify', 'clean:tmp', done);
});

// Launch development web server.
gulp.task('serve', done => {
  runSequence('js', 'browser-sync', done);
});