Skip to content

Instantly share code, notes, and snippets.

@mwinters-stuff
Created June 23, 2015 07:26
Show Gist options
  • Save mwinters-stuff/1ee1d38059a86d3f721a to your computer and use it in GitHub Desktop.
Save mwinters-stuff/1ee1d38059a86d3f721a to your computer and use it in GitHub Desktop.
Polymer Starter Kit gulp.js Modified to leave only required files in the dist directory.
/*
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
'use strict';
// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var merge = require('merge-stream');
var path = require('path');
var fs = require('fs');
var glob = require('glob');
var AUTOPREFIXER_BROWSERS = [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.4',
'bb >= 10'
];
var styleTask = function(stylesPath, srcs) {
return gulp.src(srcs.map(function(src) {
return path.join('app', stylesPath, src);
}))
.pipe($.changed(stylesPath, {
extension: '.css'
}))
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest('.tmp/' + stylesPath))
.pipe($.if('*.css', $.cssmin()))
.pipe(gulp.dest('dist.temp/' + stylesPath))
.pipe($.size({
title: stylesPath
}));
};
// Compile and Automatically Prefix Stylesheets
gulp.task('styles', function() {
return styleTask('styles', ['**/*.css']);
});
gulp.task('elements', function() {
return styleTask('elements', ['**/*.css']);
});
// Lint JavaScript
gulp.task('jshint', function() {
return gulp.src([
'app/scripts/**/*.js',
'app/elements/**/*.js',
'app/elements/**/*.html'
])
.pipe(reload({
stream: true,
once: true
}))
.pipe($.jshint.extract()) // Extract JS from .html files
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
// Optimize Images
gulp.task('images', function() {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist.temp/images'))
.pipe($.size({
title: 'images'
}));
});
// Copy All Files At The Root Level (app)
gulp.task('copy', function() {
var app = gulp.src([
'app/*',
'!app/test',
'!app/precache.json'
], {
dot: true
}).pipe(gulp.dest('dist.temp'));
var bower = gulp.src([
'bower_components/**/*'
]).pipe(gulp.dest('dist.temp/bower_components'));
var elements = gulp.src(['app/elements/**/*.html'])
.pipe(gulp.dest('dist.temp/elements'));
var swBootstrap = gulp.src(['bower_components/platinum-sw/bootstrap/*.js'])
.pipe(gulp.dest('dist.temp/elements/bootstrap'));
var swToolbox = gulp.src(['bower_components/sw-toolbox/*.js'])
.pipe(gulp.dest('dist.temp/sw-toolbox'));
var vulcanized = gulp.src(['app/elements/elements.html'])
.pipe($.rename('elements.vulcanized.html'))
.pipe(gulp.dest('dist.temp/elements'));
return merge(app, bower, elements, vulcanized, swBootstrap, swToolbox)
.pipe($.size({
title: 'copy'
}));
});
// Copy Web Fonts To Dist
gulp.task('fonts', function() {
return gulp.src(['app/fonts/**'])
.pipe(gulp.dest('dist.temp/fonts'))
.pipe($.size({
title: 'fonts'
}));
});
// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function() {
var assets = $.useref.assets({
searchPath: ['.tmp', 'app', 'dist']
});
return gulp.src(['app/**/*.html', '!app/{elements,test}/**/*.html'])
// Replace path for vulcanized assets
.pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.vulcanized.html')))
.pipe(assets)
// Concatenate And Minify JavaScript
.pipe($.if('*.js', $.uglify({
preserveComments: 'some'
})))
// Concatenate And Minify Styles
// In case you are still using useref build blocks
.pipe($.if('*.css', $.cssmin()))
.pipe(assets.restore())
.pipe($.useref())
// Minify Any HTML
.pipe($.if('*.html', $.minifyHtml({
quotes: true,
empty: true,
spare: true
})))
// Output Files
.pipe(gulp.dest('dist.temp'))
.pipe($.size({
title: 'html'
}));
});
// Vulcanize imports
gulp.task('vulcanize', function() {
var DEST_DIR = 'dist.temp/elements';
return gulp.src('dist.temp/elements/elements.vulcanized.html')
.pipe($.vulcanize({
dest: DEST_DIR,
strip: true,
inlineCss: true,
inlineScripts: true
}))
.pipe(gulp.dest(DEST_DIR))
.pipe($.size({
title: 'vulcanize'
}));
});
// Generate a list of files that should be precached when serving from 'dist'.
// The list will be consumed by the <platinum-sw-cache> element.
gulp.task('precache', function(callback) {
var dir = 'dist.temp';
glob('{elements,scripts,styles}/**/*.*', {
cwd: dir
}, function(error, files) {
if (error) {
callback(error);
} else {
files.push('index.html', './', 'bower_components/webcomponentsjs/webcomponents-lite.min.js');
var filePath = path.join(dir, 'precache.json');
fs.writeFile(filePath, JSON.stringify(files), callback);
}
});
});
// Clean Output Directory
gulp.task('clean', del.bind(null, ['.tmp', 'dist.temp', 'dist']));
// Watch Files For Changes & Reload
gulp.task('serve', ['styles', 'elements', 'images'], function() {
browserSync({
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.watch(['app/**/*.html'], reload);
gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
gulp.watch(['app/{scripts,elements}/**/*.js'], ['jshint']);
gulp.watch(['app/images/**/*'], reload);
});
// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function() {
browserSync({
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: 'dist'
});
});
// Copy required files for the dist app.
gulp.task('copydist', function() {
var webcomponents = gulp.src([
'dist.temp/bower_components/webcomponentsjs/webcomponents.min.js'
]).pipe(gulp.dest('dist/bower_components/webcomponentsjs'));
// var elements = gulp.src(['dist.temp/elements/elements.vulcanized.html'])
// .pipe(gulp.dest('dist.temp/elements'));
// var swBootstrap = gulp.src(['bower_components/platinum-sw/bootstrap/*.js'])
// .pipe(gulp.dest('dist.temp/elements/bootstrap'));
// var swToolbox = gulp.src(['bower_components/sw-toolbox/*.js'])
// .pipe(gulp.dest('dist.temp/sw-toolbox'));
var vulcanized = gulp.src(['dist.temp/elements/elements.vulcanized.html'])
.pipe(gulp.dest('dist/elements'));
var images = gulp.src(['dist.temp/images/**'])
.pipe(gulp.dest('dist/images'));
var scripts = gulp.src(['dist.temp/scripts/**'])
.pipe(gulp.dest('dist/scripts'));
var styles = gulp.src(['dist.temp/styles/main.css'])
.pipe(gulp.dest('dist/styles'));
var root = gulp.src(['dist.temp/*'])
.pipe(gulp.dest('dist'));
return merge(webcomponents, vulcanized, images, styles, scripts, root)
.pipe($.size({
title: 'copydist'
}));
});
gulp.task('copytowebapp', function() {
var files = gulp.src([
'dist/**/*'
]).pipe(gulp.dest('../sensor-net-backend/src/main/webapp/'));
return merge(files)
.pipe($.size({
title: 'copytowebapp'
}));
});
// Build Production Files, the Default Task
gulp.task('default', ['clean'], function(cb) {
runSequence(
['copy', 'styles'],
'elements', ['jshint', 'images', 'fonts', 'html'],
'vulcanize',
'copydist',
cb);
// Note: add , 'precache' , after 'vulcanize', if your are going to use Service Worker
});
// Load tasks for web-component-tester
// Adds tasks for `gulp test:local` and `gulp test:remote`
require('web-component-tester').gulp.init(gulp);
// Load custom tasks from the `tasks` directory
try {
require('require-dir')('tasks');
} catch (err) {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment