Introduction to Gulp. This slide's content includes installation of Gulp, how to use Gulp, run Gulp tasks and comparison with Grunt.

1. Introduction to
Gulp
Arga Padan
David Hutagalung

2. What’s
Gulp
• Front-end
development tool
• Task automation in
JavaScript
• Streaming build
system

3. Why
Gulp
• Demand on
large projects
• Repetitive,
tedious tasks
• Saving time

4. Getting
started

5. More
technically..
❶ from command line…
$ npm install -g gulp
(install Gulp globally)
❷ create
gulpfile.js & package.json
(on your project folder.
See at slide 13-15 for
more details)
❸ from command line..
$ npm install [plugin_name]
--save (project folder)

6. More technically..
(cont.)
gulpfile.js
Tells Gulp for every tasks,
what those tasks are,
when to run them.
package.json
List of installed plugins
Create both of them at root
directory

7. API • task
• src
• pipe
• dest
• watch

8. API
task
defining a task
gulp.task(name[, deps], fn)
name → task name
deps → arrays of tasks
(deps isn’t mandatory)
fn → performs task
operation

9. API
src
Takes a glob & represents a file
structure
gulp.src(globs)
globs → file path

10. API
pipe
for data streaming
(output from prev. process become
input for the next process)
Makes Gulp different compared to
Grunt
.pipe([data_stream])
data_stream → task or file
destination

11. API
dest
Write files into desired directory
gulp.dest(path)
path → file directory for written
files

12. API
watch
Watch files and do something
when a file changes
• gulp.watch(glob, fn)
glob → file(s) to watch for changes.
fn → defined function
(added with gulp.task())

13. gulpfile.js
var [variable_name] = require(‘[plugin_name]');
⋮
gulp.task(‘[task_name]’, function () {
return gulp
.src(‘[file_name]’)
.pipe( [variable_name]() ) ;
⋮
});

14. gulpfile.js (continued)
gulp.task('watch', function () {
gulp.watch(‘[file_name]', [‘task_name']);
});

15. package.json
{
"name": “[package_name]",
"dependencies": {
"gulp": "^3.8.5",
"gulp-clean": "^0.3.1",
⋮
}
}

16. Common
Tasks
• SASS Compile
(gulp-ruby-sass)
• Minify code
.css (gulp-minify-css)
.js & .html (gulp-uglify)
• Watch
(gulp-watch)

17. vs
GruntGulp

18. Similarity
• JavaScript-based
task runner
• Running on Node.js

19. Difference

20. Build system
workflow

21. Gulp
Input Read Files
Write Files
Modify Files
Output
Modify Files
Modify Files

22. Grunt
Input Read Files
Temp folder
Write Files
Read Files
Temp folder
Write Files
Read Files Write Files
Output
Modify Files
Modify Files
Modify Files

23. Building Responsivity
Uses streams from Node.js,
No any stream use,
some files are stored temporarily
So Gulp builds faster than Grunt!

24. Configuration & Code

25. Plugins
Gulp : 432 plugins
Grunt : 2,580 plugins
(as of March 2014)
http://www.oomphinc.com/blog/2014-
03/gulp-vs-grunt-node-js-automation-tools-
showdown/

26. Example : Compile LESS (Gulp)

27. Compile LESS (Grunt)

28. Source
• http://markgoodyear.com/2014/01/getting-started-
with-gulp/
• https://github.com/gulpjs/gulp/blob/master/docs/ge
tting-started.md
• https://www.npmjs.org/
• http://gulpjs.com/
• http://www.oomphinc.com/blog/2014-03/gulp-vs-
grunt-node-js-automation-tools-showdown/

29. Source
• http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/
• http://blog.ponyfoo.com/2014/07/04/choose-
grunt-gulp-or-npm
• blog.evanyou.me/2013/12/29/gulp-piping/
• http://slides.com/contra/gulp#/