Skip to content

Instantly share code, notes, and snippets.

@Scarygami
Last active March 12, 2017 03:19
Show Gist options
  • Save Scarygami/4dfe88afdb5a3b1e7d58 to your computer and use it in GitHub Desktop.
Save Scarygami/4dfe88afdb5a3b1e7d58 to your computer and use it in GitHub Desktop.
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', ['build'], function () {
var lr = tinylr();
lr.listen(35729);
gulp.watch(['app/**'], ['build']);
gulp.watch(['dist/**'], function (evt) {
lr.changed({
body: {
files: [evt.path]
}
});
});
});
gulp.task('build', function (cb) {
runSequence(
['copy', 'styles'],
'elements',
['jshint', 'images', 'html'],
'vulcanize',
cb
);
});
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'}));
});
gulp.task('dev', ['clean:dev'], function (cb) {
runSequence(
['copy:app', 'copy:elements', 'styles'],
'elements',
['jshint', 'images'],
'crisper',
'watch',
cb
);
});
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]
}
});
});
});
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'}));
});
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]
}
});
});
});
'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
);
});
@Scarygami
Copy link
Author

@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