Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Task Automation (Grunt vs. Gulp)

158df2ad2d800432b505bb1b0e6308c8?s=47 Ghis
August 31, 2015

Task Automation (Grunt vs. Gulp)

In this presentation, I will be sharing about Task automation, from the bottom up on how can you structure, configure, install some of the most essential plugins for better yet smoother front end development, for any web project.

The workshop will cover up the following:
- Installing Grunt & Gulp
- Walkthrough their configurations
- Connect local server on your machine
- Essential Front end development modules
- Deployment

Github (Demo files):
- https://github.com/fatasuir9/wwc-grunt
- https://github.com/fatasuir9/wwc-gulp

158df2ad2d800432b505bb1b0e6308c8?s=128

Ghis

August 31, 2015
Tweet

Transcript

  1. TASK AUTOMATION (Grunt vs. Gulp)

  2. SPEAKERS Ghis @fatasuir9 Jecelyn @JecelynYeen

  3. None
  4. None
  5. What’s a task runner?

  6. In one word…

  7. AUTOMATION

  8. It’s all about the less work you have to perform

    when doing repetitive tasks such as minification, compilation, unit testing, linting etc..
  9. doing such tasks can be…

  10. BORING

  11. TIME CONSUMING and most importantly…

  12. None
  13. YES, WE CAN

  14. HOW?

  15. Turn on your machine

  16. npm install -g grunt-cli

  17. npm install -g gulp

  18. CLONE IT

  19. https://github.com/fatasuir9/wwc-grunt https://github.com/fatasuir9/wwc-gulp

  20. DEMO

  21. None
  22. COOL STUFF • Inject references on the go • gulp-inject,

    grunt-injector • Separate tasks into multiple files • require-dir • Create production build • gulp-useref, grunt-useref
  23. COOL STUFF • Bundling • gulp-concat, grunt-contrib-concat • Prevent pipe

    breaking caused by errors • gulp-plumber • Transpile ES6 • gulp-babel, grunt-babel
  24. SUMMARY • Higher productivity • Overcome repetitive tasks • Speed

    up your workflow • Focus on bigger problems • Ain’t nobody got time for that!!!
  25. WHO WINS? vs

  26. –Unknown “It doesn’t really matter”

  27. USEFUL RESOURCES • Grunt • http://gruntjs.com • https://www.youtube.com/watch?v=lGMmkQEJZxU • Gulp

    • http://gulpjs.com • https://www.youtube.com/playlist?list=PLLnpHn493BHE2RsdyUNpbiVn-cfuV7Fos
  28. QUESTIONS

  29. THANK YOU

  30. SPONSORS