Skip to content

Instantly share code, notes, and snippets.

@musatov
Created February 4, 2016 16:42
Show Gist options
  • Save musatov/4aac9b2e78dd9223f1b3 to your computer and use it in GitHub Desktop.
Save musatov/4aac9b2e78dd9223f1b3 to your computer and use it in GitHub Desktop.
Gulp development and production configuration for polymer application written at es6
'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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment