Automated Development Workflow with Gulp

1. Automated Development
workflow
with Gulp

2. Introduction
Name: Kenneth Veldman
Front-end Developer at Goldmund, Wyldebeast
and Wunderliebe

3. Contents
● Gulp
● Package Managers
● Yeoman

4. What is Gulp?
“The streaming build system” - Gulp
What they say themselves: “Automate and
enhance your workflow”.
But what does it mean?

5. Gulp
var 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}));
});

6. 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.

7. 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...

8. Demo
What does our Gulp setup do?
- Save = update
- Clean and build (or just build)
- Collect static files to minified files

9. Package managers
● npm (from node.js)
● Bower

10. 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.

11. 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...

12. Bower components
- bootstrap-sass-official
- jquery
- modernizer

13. 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!

14. Yeoman
So what is Yeoman?
“The web's scaffolding tool for modern
webapps” - Yeoman.io

15. 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

16. What does it
generate?
● Gulp setup
○ styles function (minimize +
autoprefix)
○ jshint for javascript
○ html assets collector
● Bower packages
Optionally:
● modernizer
● sass
● boostrap

17. Demo
Generating our previous gulp setup with
yeoman.

18. 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/

19. Making your own Generator
Although there are many generators available,
often times you want your own setup.
Tutorial
http://yeoman.io/authoring/

20. 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.

21. 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 = 99
while bottles_of_beer > 1:
print REFRAIN % (bottles_of_beer, bottles_of_beer,
bottles_of_beer - 1)
bottles_of_beer -= 1