Introduction to Gulp
Arga Padan David Hutagalung
What’s
Gulp
• Front-end development tool
• Task automation in JavaScript
• Streaming build system
WhyGulp
• Demand on large projects • Repetitive,
tedious tasks
• Saving time
Gettingstarted
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)
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
API • task• src • pipe • dest • watch
APItaskdefining a task
gulp.task(name[, deps], fn)
name → task name deps → arrays of tasks (deps isn’t mandatory) fn → performs task operation
APIsrcTakes a glob & represents a file structure
gulp.src(globs) globs → file path
APIpipe
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
APIdestWrite files into desired directory
gulp.dest(path)
path → file directory for written files
API watchWatch 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())
gulpfile.js
var [variable_name] = require(‘[plugin_name]');
gulp.task(‘[task_name]’, function () { return gulp.src(‘[file_name]’).pipe( [variable_name]() ) ;
});
gulpfile.js (continued)
gulp.task('watch', function () {gulp.watch(‘[file_name]', [‘task_name']);
});
package.json
{ "name": “[package_name]", "dependencies": { "gulp": "^3.8.5", "gulp-clean": "^0.3.1", }}
Common Tasks
• SASS Compile (gulp-ruby-sass)
• Minify code .css (gulp-minify-css)
.js & .html (gulp-uglify)
• Watch (gulp-watch)
vs
GruntGulp
Similarity
• JavaScript-based task runner
• Running on Node.js
Difference
Build system workflow
GulpInput
Read Files
Write Files
Modify Files
Output
Modify Files
Modify Files
GruntInput Read Files
Temp folder
Write Files
Read Files
Temp folder
Write Files
Read Files Write Files
Output
Modify Files
Modify Files
Modify Files
Building Responsivity
Uses streams from Node.js,
No any stream use, some files are stored temporarily
So Gulp builds faster than Grunt!
Configuration & Code
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/
Example : Compile LESS (Gulp)
Compile LESS (Grunt)
Source• http://markgoodyear.com/2014/01/getting-started-
with-gulp/
• https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
• https://www.npmjs.org/
• http://gulpjs.com/
• http://www.oomphinc.com/blog/2014-03/gulp-vs-grunt-node-js-automation-tools-showdown/
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#/