Last active
March 12, 2017 03:19
-
-
Save Scarygami/4dfe88afdb5a3b1e7d58 to your computer and use it in GitHub Desktop.
Live-reload for Polymer Chrome Apps - http://codingwithgerwin.blogspot.com/2015/07/live-reload-for-polymer-chrome-apps.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp.watch(['dev/**'], $.batch(function (events, cb) { | |
var paths = []; | |
events.on('data', function (evt) { | |
paths.push(evt.path); | |
}).on('end', function () { | |
lr.changed({ | |
body: { | |
files: paths | |
} | |
}); | |
cb(); | |
}); | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp.task('dev', ['build'], function () { | |
var lr = tinylr(); | |
lr.listen(35729); | |
gulp.watch(['app/**'], ['build']); | |
gulp.watch(['dist/**'], function (evt) { | |
lr.changed({ | |
body: { | |
files: [evt.path] | |
} | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp.task('build', function (cb) { | |
runSequence( | |
['copy', 'styles'], | |
'elements', | |
['jshint', 'images', 'html'], | |
'vulcanize', | |
cb | |
); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp.task('crisper', function () { | |
var elements = gulp.src(['app/elements/**/*.html']) | |
.pipe($.crisper()) | |
.pipe(gulp.dest('dev/elements')); | |
var bower = gulp.src(['bower_components/**/*.html']) | |
.pipe($.crisper()) | |
.pipe(gulp.dest('dev/bower_components')); | |
return merge(bower, elements) | |
.pipe($.size({title: 'crisper'})); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp.task('dev', ['clean:dev'], function (cb) { | |
runSequence( | |
['copy:app', 'copy:elements', 'styles'], | |
'elements', | |
['jshint', 'images'], | |
'crisper', | |
'watch', | |
cb | |
); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gulp = require('gulp'); | |
var tinylr = require('tiny-lr'); | |
gulp.task('dev', function () { | |
var lr = tinylr(); | |
lr.listen(35729); | |
gulp.watch(['**.{js,css,html}'], function (evt) { | |
lr.changed({ | |
body: { | |
files: [evt.path] | |
} | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp.task('vulcanize', function () { | |
var DEST_DIR = 'dist/elements'; | |
return gulp.src('dist/elements/elements.vulcanized.html') | |
.pipe($.vulcanize({ | |
stripComments: true, | |
inlineCss: true, | |
inlineScripts: true | |
})) | |
.pipe($.crisper()) | |
.pipe(gulp.dest(DEST_DIR)) | |
.pipe($.size({title: 'vulcanize'})); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gulp.task('watch', function () { | |
var lr = tinylr(); | |
lr.listen(35729); | |
gulp.watch(['app/*'], ['copy:app']); | |
gulp.watch(['app/**/*.js'], ['jshint', 'copy:app']); | |
gulp.watch(['app/styles/**/*.css'], ['styles']); | |
gulp.watch(['app/elements/**/*.css'], ['elements']); | |
gulp.watch(['app/elements/**/*.html'], function () { | |
runSequence( | |
'copy:elements', | |
'crisper' | |
); | |
}); | |
gulp.watch(['app/images/**/*'], ['images']); | |
gulp.watch(['dev/**'], function (evt) { | |
lr.changed({ | |
body: { | |
files: [evt.path] | |
} | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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 merge = require('merge-stream'); | |
var path = require('path'); | |
var tinylr = require('tiny-lr'); | |
var destDir = 'dist'; | |
var AUTOPREFIXER_BROWSERS = [ | |
'chrome >= 34' | |
]; | |
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(destDir + '/' + 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($.jshint.extract()) // Extract JS from .html files | |
.pipe($.jshint()) | |
.pipe($.jshint.reporter('jshint-stylish')) | |
.pipe($.jshint.reporter('fail')); | |
}); | |
// Optimize Images | |
gulp.task('images', function () { | |
return gulp.src('app/images/**/*') | |
.pipe($.cache($.imagemin({ | |
progressive: true, | |
interlaced: true | |
}))) | |
.pipe(gulp.dest(destDir + '/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(destDir)); | |
var bower = gulp.src([ | |
'bower_components/**/*' | |
]).pipe(gulp.dest(destDir + '/bower_components')); | |
var elements = gulp.src(['app/elements/**/*.html']) | |
.pipe(gulp.dest(destDir + '/elements')); | |
var vulcanized = gulp.src(['app/elements/elements.html']) | |
.pipe($.rename('elements.vulcanized.html')) | |
.pipe(gulp.dest(destDir + '/elements')); | |
return merge(app, bower, elements, vulcanized) | |
.pipe($.size({title: 'copy'})); | |
}); | |
// 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(destDir)) | |
.pipe($.size({title: 'html'})); | |
}); | |
// Vulcanize imports | |
gulp.task('vulcanize', function () { | |
var DEST_DIR = destDir + '/elements'; | |
return gulp.src(destDir + '/elements/elements.vulcanized.html') | |
.pipe($.vulcanize({ | |
dest: DEST_DIR, | |
strip: true, | |
inlineCss: true, | |
inlineScripts: false | |
})) | |
.pipe($.crisper()) | |
.pipe(gulp.dest(DEST_DIR)) | |
.pipe($.size({title: 'vulcanize'})); | |
}); | |
gulp.task('copy:app', function() { | |
return gulp.src([ | |
'app/*', | |
'app/**/*.js', | |
'!app/test', | |
'!app/precache.json' | |
], { | |
dot: true | |
}).pipe(gulp.dest(destDir)); | |
}); | |
gulp.task('dev:elements', function() { | |
return gulp.src(['app/elements/**/*']) | |
.pipe($.if('*.html', $.crisper())) | |
.pipe(gulp.dest(destDir + '/elements')) | |
.pipe($.size({title: 'dev:elements'})); | |
}); | |
gulp.task('dev:bower', function() { | |
return gulp.src(['bower_components/**/*']) | |
.pipe($.if('*.html', $.crisper())) | |
.pipe(gulp.dest(destDir + '/bower_components')) | |
.pipe($.size({title: 'dev:bower'})); | |
}); | |
// Clean Output Directory | |
gulp.task('clean', del.bind(null, ['.tmp', 'dist'])); | |
// Clean Output Directory | |
gulp.task('clean:dev', del.bind(null, ['.tmp', 'dev'])); | |
// Clear cache (used by imagemin) | |
gulp.task('clearcache', function (cb) { | |
return $.cache.clearAll(cb); | |
}); | |
gulp.task('watch', function () { | |
var lr = tinylr(); | |
lr.listen(35729); | |
gulp.watch(['app/*'], ['copy:app']); | |
gulp.watch(['app/**/*.js'], ['jshint', 'copy:app']); | |
gulp.watch(['app/styles/**/*.css'], ['styles']); | |
gulp.watch(['app/elements/**'], ['dev:elements']); | |
gulp.watch(['bower_components/**'], ['dev:bower']); | |
gulp.watch(['app/images/**/*'], ['images']); | |
gulp.watch(['dev/**'], $.batch(function (events, cb) { | |
var paths = []; | |
events.on('data', function (evt) { | |
paths.push(evt.path); | |
}).on('end', function () { | |
lr.changed({ | |
body: { | |
files: paths | |
} | |
}); | |
cb(); | |
}); | |
})); | |
}); | |
gulp.task('dev', ['clean:dev', 'clearcache'], function (cb) { | |
destDir = 'dev'; | |
runSequence( | |
['copy:app', 'styles'], | |
['dev:elements', 'dev:bower'], | |
['jshint', 'images'], | |
'watch', | |
cb | |
); | |
}); | |
// Build Production Files, the Default Task | |
gulp.task('default', ['clean', 'clearcache'], function (cb) { | |
runSequence( | |
['copy', 'styles'], | |
'elements', | |
['jshint', 'images', 'html'], | |
'vulcanize', | |
cb | |
); | |
}); |
@jarrodek I've added the full gulpfile that I'm currently using to this gist. Some changes since I wrote the article but the idea is the same.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have a problem with
clean:dev
task. There is no such task - either here and PSK. Next one is thecopy:app
. Do you have it somewhere so I san see what are the doing?