Automated Development Workflow with Gulp

Automated Development

workflow

with Gulp

Introduction

Name: Kenneth Veldman

Front-end Developer at Goldmund, Wyldebeast

and Wunderliebe

Contents

● Gulp

● Package Managers

● Yeoman

What is Gulp?

“The streaming build system” - Gulp

What they say themselves: “Automate and

enhance your workflow”.

But what does it mean?

Gulpvar gulp = require('gulp');

var $ = require('gulp-load-plugins')();

var browserSync = require('browser-sync');

var reload = browserSync.reload;

gulp.task('styles', function () {

return gulp.src('app/styles/main.scss')

.pipe($.sourcemaps.init())

.pipe($.sass({

outputStyle: 'nested', // libsass doesn't support expanded yet

precision: 10,

includePaths: ['.'],

onError: console.error.bind(console, 'Sass error:')

}))

.pipe($.postcss([

require('autoprefixer-core')({browsers: ['last 1 version']})

]))

.pipe($.sourcemaps.write())

.pipe(gulp.dest('.tmp/styles'))

.pipe(reload({stream: true}));

});

Gulp

● Build on Node.js.

● thus async in nature, but able to chain

streams.

● Gulp itself doesn't do a whole lot, the plugin

system does. Almost 1500 plugins available.

What do we use Gulp for?

- Compile Sass/less

- Auto-prefix css

- Run jshint on javascript, fail when not passing

- collect static files from html, bundle them in separate

files: vendor.js, plugins.js, main.js

- Minify and uglify the files you want including images!

- Collect fonts from bower packages

- Serve static templates with a node.js web server, so

static templates can be developed separately.

- And many many more things you can imagine...

Demo

What does our Gulp setup do?

- Save = update

- Clean and build (or just build)

- Collect static files to minified files

Package managers

● npm (from node.js)

● Bower

Why 2 package managers?

npm is used for gulp plugins and other

dependencies that are required by node.js

bower is used for your requirements, like

jQuery and other vendor packages.

How to install (mac example)

1. Install homebrew (yes, a package manager)

2. Install node.js (yay, free npm to boot!)

through homebrew

3. Install bower through npm

Yes, we have to install 2 other package

managers to install bower...

Bower components

- bootstrap-sass-official

- jquery

- modernizer

Bower install

How to install a package using bower:$ bower install jquery#1.11.2

Recognizing bower packages on github is easy,

look for the `bower.json` file in repos or they

just tell you!

Yeoman

So what is Yeoman?

“The web's scaffolding tool for modern

webapps” - Yeoman.io

Yeoman generators

Yeoman uses specific generators to make a

pre configured setup.

These generators act as a pre-config for you

project, as simple as: $ yo gulp-webapp

What does it

generate?

● Gulp setup

○ styles function (minimize +

autoprefix)

○ jshint for javascript

○ html assets collector

● Bower packages

Optionally:

● modernizer

● sass

● boostrap

Demo

Generating our previous gulp setup with

yeoman.

Available generators

Yeoman themselves offer quite a bunch of

generators and everything on github that has

the “yeoman-generator” keyword will be listed

on their website!

See: http://yeoman.io/generators/

Making your own Generator

Although there are many generators available,

often times you want your own setup.

Tutorial

http://yeoman.io/authoring/

Advantages

The advantages of using Yeoman + Gulp and

various other tools is that it actually does what

it says:

Yeoman is a scaffolding tool that let’s you

generate a gulp setup. With that setup you can

automate and enhance your workflow with their

streaming build system.

Questions?

REFRAIN = '''%d bottles of beer on the wall,%d bottles of beer,take one down, pass it around,%d bottles of beer on the wall!'''bottles_of_beer = 99while bottles_of_beer > 1:

print REFRAIN % (bottles_of_beer, bottles_of_beer,bottles_of_beer - 1)

bottles_of_beer -= 1