Automating Large Applications on Modular and Structured Form with Gulp

E

@andersonaguiarFront-end Analyst at

why automate?

Less mistakes

Delivery faster

Save time

Don’t repeat

Improve quality

time isyour

precious

WITHOUT AUTOMATE…

automatejust

makechoice

http://www.pintjs.com/http://jakejs.com/http://gruntjs.com/http://gulpjs.com/

your

whouses?

https://github.com/gulpjs/gulp/issues/540

WHY USE API is simple Easy to start Fast{GULP?

API IS SIMPLE

API SIMPLE• gulp.task(name, [deps,], fn)

define a task with optional dependencies.

• gulp.src(glob) create a stream from given file system glob.

• gulp.dest(folder) save files from a stream to given directory.

• gulp.watch(glob, tasks) run a task when one of the globed files is changed.

are just four functions

gulp.task

gulp.task

gulp.src

gulp.dest

gulp.watch

————————o read ———o process in memory

——————o write file

Now you are a gulp expert!

easy to start

Download and install node.js: https://nodejs.org/

npm i gulp -g

#1 - INSTALL NODE.JS & GULP

Install gulp globally:

• Create a project • Install global Gulp

• Create a package.json

• Install local Gulp

• Create and configure a Gulpfile.js

npm init

[sudo] npm i -g gulp

npm i gulp --save-dev

#2 - CONFIGURE DEV ENVIRONMENT

package.json

gulpfile.js

#3 - INSTALL GULP PLUGINS

http://gulpjs.com/plugins/

Install from npm

npm i gulp-uglify --save-dev

Adding to gulp file using require

INSTALLING A PLUGIN

USING A PLUGIN

That’s it!

https://github.com/osscafe/gulp-cheatsheet

plugins

https://www.npmjs.com/package/browser-sync

https://www.npmjs.com/package/esformatter

https://www.npmjs.com/package/gulp-mocha

https://www.npmjs.com/package/gulp-load-plugins

https://www.npmjs.com/package/gulp-sass

https://www.npmjs.com/package/gulp-less

https://www.npmjs.com/package/gulp-stylus

https://www.npmjs.com/package/gulp-uglify

https://www.npmjs.com/package/gulp-concat

https://www.npmjs.com/package/gulp-imagemin

https://www.npmjs.com/package/gulp-sourcemaps

https://www.npmjs.com/package/gulp-bump

https://www.npmjs.com/package/gulp-zip

[ … ]

FAST

STREAMSare fast

find . | grep -l "coffeescript" | xargs -I {} rm -rf {}

Base on pipe unix

https://github.com/substack/stream-handbook

https://www.npmjs.com/package/run-sequence

GULP 4

https://twitter.com/contrahacks/status/560936371012263936

gulp.lastRun(task, [timeResolution]) => [Timestamp]

gulp.tree([options]) => Objectgulp.series(taskName || fn...) => Function

gulp.parallel(taskName || fn...) => Function

https://github.com/gulpjs/gulp/labels/gulp4

http://blog.reactandbethankful.com/posts/2015/05/01/how-to-install-gulp-4/

IMPORTANTdocumentation is very

workflowimproveyour

https://github.com/andersonaguiar/GulpFile

ORGANIZE YOUR TASKS BY CONTEXT_default system css js img html

dev

build

deploy

…

copy

delete

move

rename

exec

…

preprocessor

source

maps

lints

…

hint

lint

uglify

formatter

test

…

optmin

total size

…

minify

replace

…

gulpfile.js

imports.js

config.js

task file

To work with plugins, just install them: npm i gulp-name-plugin --save-dev

demo code

automatemake

just

your lifeeasier

@andersonaguiar

QUESTIONS?