Skip to content

Instantly share code, notes, and snippets.

@kriscooke
Created October 24, 2016 19:48
Show Gist options
  • Select an option

  • Save kriscooke/6eba34513a49050ee191205a6bfcfa91 to your computer and use it in GitHub Desktop.

Select an option

Save kriscooke/6eba34513a49050ee191205a6bfcfa91 to your computer and use it in GitHub Desktop.
const path = require('path');
const gulp = require('gulp');
const del = require('del');
const gulpif = require('gulp-if');
const uglify = require('gulp-uglify');
const htmlMinifier = require('gulp-html-minifier');
const mergeStream = require('merge-stream');
const polymer = require('polymer-build');
'use strict';
// Got problems? Try logging 'em
const logging = require('plylog');
logging.setVerbose();
// !!! IMPORTANT !!! //
// Keep the global.config above any of the gulp-tasks that depend on it
global.config = {
build: {
rootDirectory: '/built',
bundledDirectory: ''
}
};
const project = new polymer.PolymerProject({
entrypoint: "bundles/dash-elements.html",
sourceGlobs: [
"src/[!bower_components]/*",
"src/*"
]
});
// Returns a Promise to delete a directory
function clean() {
// return del(global.config.build.rootDirectory);
return del('built/**.js', 'built/**.html', '!built/');
}
// The source task will split all of your source files into one
// big ReadableStream. Source files are those in src/** as well as anything
// added to the sourceGlobs property of polymer.json.
// Because most HTML Imports contain inline CSS and JS, those inline resources
// will be split out into temporary files. You can use gulpif to filter files
// out of the stream and run them through specific tasks. An example is provided
// which filters all images and runs them through imagemin
function source() {
return project.sources().pipe(project.splitHtml())
.pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.html$/, htmlMinifier()))
// Add build tasks here!
.pipe(project.rejoinHtml()); // Call rejoin when you're finished
}
// The dependencies task will split all of your bower_components files into one
// big ReadableStream
// You probably don't need to do anything to your dependencies but it's here in
// case you need it :)
function dependencies() {
return project.dependencies().pipe(project.splitHtml())
.pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.html$/, htmlMinifier()))
.pipe(project.rejoinHtml());
}
// Returns a function which accepts refernces to functions that generate
// ReadableStreams. These ReadableStreams will then be merged, and used to
// generate the bundled and unbundled versions of the site.
// Takes an argument for the user to specify the kind of output they want
// either bundled or unbundled. If this argument is omitted it will output both
function merge(source, dependencies) {
return function output() {
const mergedFiles = mergeStream(source(), dependencies())
.pipe(project.analyzer);
let outputs = [];
outputs.push(writeBundledOutput(polymer.forkStream(mergedFiles)));
return Promise.all(outputs);
};
}
// Run the files through a bundling step which will vulcanize/shard them
// then output to the dest dir
const bundledPath = path.join(global.config.build.rootDirectory, global.config.build.bundledDirectory);
function writeBundledOutput(stream) {
return new Promise(resolve => {
stream.pipe(project.bundler)
.pipe(gulp.dest(bundledPath))
.on('end', resolve);
});
}
// Clean the build directory, split all source and dependency files into streams
// and process them, and output bundled and unbundled versions of the project
// with their own service workers
gulp.task('default', gulp.series([
clean,
merge(source, dependencies)
]));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment