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?
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
Install from npm
npm i gulp-uglify --save-dev
Adding to gulp file using require
INSTALLING A PLUGIN
USING A PLUGIN
That’s it!
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-sass
https://www.npmjs.com/package/gulp-less
https://www.npmjs.com/package/gulp-stylus
[ … ]
FAST
STREAMSare fast
find . | grep -l "coffeescript" | xargs -I {} rm -rf {}
Base on pipe unix
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
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?
