Gulp.js is a streaming build system that automates tasks like JavaScript/CSS minification, HTML minification, image optimization, Sass preprocessing, CoffeeScript transpilation, and asset revisioning. It uses Node.js tasks and streams for high performance and concurrency. Gulp has a simple API with only four methods to learn and uses standard libraries. The document provides examples of using Gulp tasks, watching files, piping streams, and handling errors to automate building assets.

1. GULP.JS
THE STREAMING BUILD SYSTEM
@revathskumar

2. OK, I AM DONE CODING & TESTING. WHAT
NEXT?

3. DEPLOYMENT??
NO
BUILD IT

4. WHAT IT MEANS?
JavaScript/CSS Minification & concatination
HTML Minification
Optimize Image
Preprocess sass
Transpile coffee
Assets revving

5. WHY WE BUILD?
Productivity
Performance

6. HOW WE CAN AUTOMATE BUILD?

9. NODE.JS BASED TASK RUNNER

10. WHY GULP?
Code over Configuration
Using streams
Less IO
Only 4 API methods to learn
Use standard libraries to do things
maximum concurrency by default

11. Image courtesy : @addyosmani

12. npm install -g gulp

13. // Gulpfile.js
var gulp = require('gulp');
var clean = require('gulp-clean');
gulp.task('clean-dist', function(){
return gulp.src('dist/')
.pipe(clean());
});

14. GULP API

15. TASK
gulp.task(name, [dependency], fn);
register the function with name

16. WATCH
gulp.watch(glob, fn);
runs the function when file changes
gulp.watch(
'app/scripts/*.coffee',
['coffee']
);

17. SRC
gulp.src(glob);
return readable stream

18. DEST
gulp.dest(folder);
return writable stream

19. RUN
gulp.run(tasks);
Run the tasks

20. npm install gulp-clean --save-dev
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev

21. // Gulpfile.js
var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('build', ['clean-dist'], function(){
return gulp.src(['app/scripts/*.js'])
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'));
});

22. ERROR HANDLING
gulp.task('coffee', function(){
return gulp.src('app/scripts/*.coffee')
.pipe(coffee().on('error', console.log))
.pipe(gulp.dest('.tmp/scripts/'));
});

23. gulp :
website :
plugins :
Stream :
https://github.com/wearefractal/gulp
http://gulpjs.com/
http://gulpjs.com/plugins
https://github.com/substack/stream-handbook/

24. gulp :
website :
plugins :
Stream :
https://github.com/wearefractal/gulp
http://gulpjs.com/
http://gulpjs.com/plugins
https://github.com/substack/stream-handbook/

25. CONTACT US
Website :
Mailing list :
Twitter :
Facebook :
keralajs.org
bit.ly/kjs-gg
@keralajs
bit.ly/kjs-fb
+Revath S Kumar
@revathskumar
http://blog.revathskumar.com/