Automated

Development
Workflow with Gulp
 Workflow

Setup Development Build

Download Watch Testing
Setup Server Live Reload Compile
PHP Lint Concat
Javascript Coffee Rename
etc Sass/Less Minify
Image min
Deployment
We need Task
Runner
Gulpjs
 What’s Gulp?

Javascript Task runner

Frontend Development Tool
Streaming Build System
 Why Gulp?

Easy to use
Efficient
High Quality
Easy to Learn
 Easy to use
var
gulp = require('gulp'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');

gulp.task('default', function () {
console.info('Running default task');
});

gulp.task('build-css', function () {
gulp.src('src/**/*.css')
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist'));
});
 Efficient
File File
System Gulp uses Streams System

Read Coffe Uglify Rename Write

Files Files
 Efficient

gulp.task('build-css', function () {
gulp.src('src/**/*.css') Read file
.pipe(cssmin()) Process in Memory
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist')); Write file
});
 2.296
Available plugins
http://gulpjs.com/plugins/
 Only 4 function you need to learn

gulp.task
gulp.watch
gulp.src
gulp.dest
 Getting started

Node NPM Project

How To-do it?
 Install Gulp

$ npm install --global gulp-cli

Install Gulp on devDependency

$ npm install --save-dev gulp

 Create file

gulpfile.js
package.json
 Gulp Task

gulp.task(name [,deps],fn)

gulp.task('default', function() {
console.log('hello from Gulp!');
});
 Gulp Watch

gulp.watch(glob [, opts], tasks)

gulp.watch('js/**/*.js', ['default']);
 Gulp src

gulp.src(globs, [options])

gulp.src('client/templates/*.jade')
.pipe(jade())
.pipe(minify())
.pipe(less())
.pipe(uglify());
 Gulp dest

gulp.dest(path, [options])

gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('.
/build/minified_templates'));
 Install Gulp Plugins

$ npm install --save-dev gulp-imagemin

 Credits

▧ https://www.npmjs.com/
▧ http://gulpjs.com/
▧ http://www.slideshare.net/appleboy/automating-
your-workflow-with-gulp