Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Automating Large Applications on Modular and Structured Form with Gulp

4,196 views

Published on

Automating Large Applications on Modular and Structured Form with Gulp.

Published in: Internet

Automating Large Applications on Modular and Structured Form with Gulp

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

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

  27. 27. Install from npm npm i gulp-uglify --save-dev Adding to gulp file using require INSTALLING A PLUGIN
  28. 28. USING A PLUGIN
  29. 29. That’sit!
  30. 30. 
 https://github.com/osscafe/gulp-cheatsheet

  31. 31. plugins
  32. 32. 
 https://www.npmjs.com/package/browser-sync

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

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

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

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

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

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

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

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

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

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

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

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

  45. 45. [ … ]
  46. 46. FAST
  47. 47. STREAMSare fast find . | grep -l "coffeescript" | xargs -I {} rm -rf {} Base on pipe unix
  48. 48. 
 https://github.com/substack/stream-handbook

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

  50. 50. GULP4
  51. 51. 
 https://twitter.com/contrahacks/status/560936371012263936

  52. 52. 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

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

  54. 54. IMPORTANT documentationis very
  55. 55. workflow improve your
  56. 56. 
 https://github.com/andersonaguiar/GulpFile

  57. 57. 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 …
  58. 58. gulpfile.js
  59. 59. imports.js
  60. 60. config.js
  61. 61. taskfile To work with plugins, just install them: npm i gulp-name-plugin --save-dev
  62. 62. demo code
  63. 63. automate make just your life easier
  64. 64. @andersonaguiar QUESTIONS?

×