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#/