Big
Gulps
Eh?
Overview
- Gulp and task running
- Popular Gulp plugins within GG
- Our directory structure
- How our setup works with AWS CloudFront
- How to deploy to our CDN
Gulp & Task Running
- Task runner/build system
- You can:
- compile code
- move files
- rename files
- use preprocessors
- deploy to a server
- Automation all at once!
Popular Plugins
- gulp-load-plugins
- yargs
- preprocessify
- gulp-rev-all and gulp-rev-napkin
- gulp-awspublish, router, cloudfront
Gulp Load Plugins
Autoloaders for the win!
var $ = require('gulp-load-plugins')();
// plugin is named gulp-sass
.pipe($.sass())var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
rename: {
'gulp-long-name': 'shortName'
}
});gulp.task('taskName', function() {
return gulp.src('glob/to/search')
.pipe($.shortName())
.pipe(gulp.dest('destination/output/path'));
});Yargs
Option flags when compiling
var args = require('yargs').argv;
// default is false
var dev = !args.prod;
// dev is true
gulp watch
// dev is false
gulp watch --prod
// do things like..
if (dev) {
//don't compress css
} else
//compress css
}Preprocessify
Preprocessing code
var preprocessify = require('preprocessify');
var config = {};
config[dev ? 'DEV' : 'PROD'] = true;
.transform(preprocessify(config))// run gulp, prod is true
gulp watch --prod
// In your js
// @if PROD
console.log('Production environment');
// @endifGulp revisioning
Asset revisions
.pipe($.revAll())
.pipe($.revNapkin())styles.d7376ac0.css<!-- original -->
<link href="styles.css" rel="stylesheet"><!-- revisioned -->
<link href="styles.d7376ac0.css" rel="stylesheet">Gulp / AWS
Gulp / AWS / CloudFront
// deploy task contains aws sync
gulp.task('deploy')...
gulp deploy --prod