Big

Gulps

Eh?

Overview

  1. Gulp and task running
  2. Popular Gulp plugins within GG
  3. Our directory structure
  4. How our setup works with AWS CloudFront
  5. 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

  1. gulp-load-plugins
  2. yargs
  3. preprocessify
  4. gulp-rev-all and gulp-rev-napkin
  5. 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');
// @endif

Gulp 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 :)

Made with Slides.com