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
End :)
Big Gulps Eh?
By Brett Hayes
Big Gulps Eh?
Say hello to workflow automation and goodbye to doing things "just real quick." In this session, I'll be giving an overview of Gulp task running using popular gulp plugins that we have in our GoGuardian landing setup. I'll also explain how to deploy the landing to our CDN and how it works with AWS CloudFront.
