Automating Large Applications on Modular and Structured Form with Gulp
-
Upload
anderson-aguiar -
Category
Internet
-
view
577 -
download
1
Transcript of Automating Large Applications on Modular and Structured Form with Gulp
![Page 1: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/1.jpg)
E
![Page 2: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/2.jpg)
@andersonaguiarFront-end Analyst at
![Page 3: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/3.jpg)
why automate?
![Page 4: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/4.jpg)
Less mistakes
Delivery faster
Save time
Don’t repeat
Improve quality
![Page 5: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/5.jpg)
time isyour
precious
![Page 6: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/6.jpg)
WITHOUT AUTOMATE…
![Page 7: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/7.jpg)
![Page 8: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/8.jpg)
![Page 9: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/9.jpg)
automatejust
![Page 10: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/10.jpg)
makechoice
http://www.pintjs.com/http://jakejs.com/http://gruntjs.com/http://gulpjs.com/
your
![Page 11: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/11.jpg)
![Page 12: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/12.jpg)
whouses?
![Page 14: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/14.jpg)
WHY USE API is simple Easy to start Fast{GULP?
![Page 15: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/15.jpg)
API IS SIMPLE
![Page 16: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/16.jpg)
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
![Page 17: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/17.jpg)
gulp.task
![Page 18: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/18.jpg)
gulp.task
![Page 19: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/19.jpg)
gulp.src
![Page 20: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/20.jpg)
gulp.dest
![Page 21: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/21.jpg)
gulp.watch
![Page 22: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/22.jpg)
————————o read ———o process in memory
——————o write file
![Page 23: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/23.jpg)
Now you are a gulp expert!
![Page 24: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/24.jpg)
easy to start
![Page 25: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/25.jpg)
Download and install node.js: https://nodejs.org/
npm i gulp -g
#1 - INSTALL NODE.JS & GULP
Install gulp globally:
![Page 26: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/26.jpg)
• 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
![Page 27: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/27.jpg)
package.json
![Page 28: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/28.jpg)
gulpfile.js
![Page 30: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/30.jpg)
Install from npm
npm i gulp-uglify --save-dev
Adding to gulp file using require
INSTALLING A PLUGIN
![Page 31: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/31.jpg)
USING A PLUGIN
![Page 32: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/32.jpg)
That’s it!
![Page 34: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/34.jpg)
plugins
![Page 35: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/35.jpg)
https://www.npmjs.com/package/browser-sync
![Page 36: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/36.jpg)
https://www.npmjs.com/package/esformatter
![Page 37: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/37.jpg)
https://www.npmjs.com/package/gulp-mocha
![Page 39: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/39.jpg)
https://www.npmjs.com/package/gulp-sass
![Page 40: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/40.jpg)
https://www.npmjs.com/package/gulp-less
![Page 41: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/41.jpg)
https://www.npmjs.com/package/gulp-stylus
![Page 48: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/48.jpg)
[ … ]
![Page 49: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/49.jpg)
FAST
![Page 50: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/50.jpg)
STREAMSare fast
find . | grep -l "coffeescript" | xargs -I {} rm -rf {}
Base on pipe unix
![Page 51: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/51.jpg)
![Page 52: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/52.jpg)
![Page 53: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/53.jpg)
![Page 56: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/56.jpg)
GULP 4
![Page 57: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/57.jpg)
https://twitter.com/contrahacks/status/560936371012263936
![Page 58: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/58.jpg)
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
![Page 59: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/59.jpg)
http://blog.reactandbethankful.com/posts/2015/05/01/how-to-install-gulp-4/
![Page 60: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/60.jpg)
IMPORTANTdocumentation is very
![Page 61: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/61.jpg)
![Page 62: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/62.jpg)
workflowimproveyour
![Page 64: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/64.jpg)
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
…
![Page 65: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/65.jpg)
gulpfile.js
![Page 66: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/66.jpg)
imports.js
![Page 67: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/67.jpg)
config.js
![Page 68: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/68.jpg)
![Page 69: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/69.jpg)
task file
To work with plugins, just install them: npm i gulp-name-plugin --save-dev
![Page 70: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/70.jpg)
![Page 71: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/71.jpg)
demo code
![Page 72: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/72.jpg)
automatemake
just
your lifeeasier
![Page 73: Automating Large Applications on Modular and Structured Form with Gulp](https://reader034.fdocuments.net/reader034/viewer/2022042716/55b5a26cbb61eb8f108b46ee/html5/thumbnails/73.jpg)
@andersonaguiar
QUESTIONS?