GULP

• @Supaket

WHAT IS GULP

Not A BIG GULP

WHAT IS GULP ?

• The streaming build system power by javascript!

WHAT IS GULP

• Front-end development Tool

• Task automation

• Stream build system

TECHNOLOGY UNDERLYING

DETAILS

gulpfile.js Tells Gulp for every tasks, what those tasks are, when to run them.

package.json List of installed plugins

API

• task• src • pipe • dest •watch

TASK

src - Takes a glob & represents a file structure

gulp.src(globs)

globs ! file path

PIPE

pipe - for data streaming (output from previous. process become input for the next process)

.pipe([data_stream])

data_stream ! task or file

DEST

dest - Write files into desired directory

• gulp.dest(path)

path ! file directory for written files

WATCHwatch - 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())

DEMO WORKFLOW

SASS CSS

SRC SITE

CSS

BROWER

CSS

LET’S DO IT. $ npm install -g gulp (install Gulp globally)

Create gulpfile.js & package.json

$ npm install [plugin_name] --save (project folder)

RESOURCE AND REFERENCE• https://github.com/kogakure/gulp-tutorial

• http://www.slideshare.net/Awilum/gulp-the-streaming-build-system-41140394

• http://www.slideshare.net/apdhtg6/introduction-to-gulp-37075907

• https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/guidelines.md