Automating Large Applications on Modular and Structured Form with Gulp

Automating Large Applications on Modular and Structured Form with Gulp

Transcript

1. E
2. @andersonaguiar Front-end Analyst at
3. why automate?
4. Less mistakes Delivery faster Save time Don’t repeat Improve quality
5. timeis your precious
6. WITHOUT AUTOMATE…
9. automate just
10. make choice http://www.pintjs.com/ http://jakejs.com/ http://gruntjs.com/ http://gulpjs.com/ your
12. who uses?
13. 
 https://github.com/gulpjs/gulp/issues/540

14. WHY USE API is simple Easy to start Fast { GULP?
15. API IS SIMPLE
16. 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
17. gulp.task
18. gulp.task
19. gulp.src
20. gulp.dest
21. gulp.watch
22. ————————o read ———o process in memory ——————o write file
23. Now you are a gulp expert!
24. easy to start
25. Download and install node.js: https://nodejs.org/ npm i gulp -g #1 - INSTALL NODE.JS & GULP Install gulp globally:
26. • 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
27. package.json
28. gulpfile.js
29. #3 - INSTALL GULP PLUGINS 
 http://gulpjs.com/plugins/

30. Install from npm npm i gulp-uglify --save-dev Adding to gulp file using require INSTALLING A PLUGIN
31. USING A PLUGIN
32. That’s it!
33. 
 https://github.com/osscafe/gulp-cheatsheet

34. plugins
35. 
 https://www.npmjs.com/package/browser-sync

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

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

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

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

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

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

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

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

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

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

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

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

48. [ … ]
49. FAST
50. STREAMS are fast find . | grep -l "coffeescript" | xargs -I {} rm -rf {} Base on pipe unix
54. 
 https://github.com/substack/stream-handbook

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

56. GULP 4
57. 
 https://twitter.com/contrahacks/status/560936371012263936

58. gulp.lastRun(task, [timeResolution]) => [Timestamp] gulp.tree([options]) => Object gulp.series(taskName || fn...) => Function gulp.parallel(taskName || fn...) => Function 
 https://github.com/gulpjs/gulp/labels/gulp4

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

60. IMPORTANT documentationis very
62. workflow improve your
63. 
 https://github.com/andersonaguiar/GulpFile

64. 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 …
65. gulpfile.js
66. imports.js
67. config.js
69. task file To work with plugins, just install them: npm i gulp-name-plugin --save-dev
71. demo code
72. automate make just your life easier
73. @andersonaguiar QUESTIONS?