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

Task Automation (Grunt vs. Gulp)

158df2ad2d800432b505bb1b0e6308c8?s=47 Ghis
August 31, 2015
Programming
1
430

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

More Decks by Ghis

See All by Ghis
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
1
21
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
13
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
290
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
260
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
3
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
1
580

Other Decks in Programming

See All in Programming
51105482dc2e3d01b3ba64c9751d75c6?s=48 showwin
0
120
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
0
200
B793da271a45d149b52f507bca9f137c?s=48 77web
0
210
804bf3fd2baebf9a27e4774553688d37?s=48 saki4869
0
190
6dd0483f1353a4a359e92633cfd65c64?s=48 wasabeef
1
560
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
260
04df7340898eac3a0536d3b47c55501c?s=48 hirotokirimaru
1
410
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
9
4.6k
Dbab5e5a1fd54531e1119ede6b3b9e65?s=48 horie1024
1
360
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
1
1.2k
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
410
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
490

Featured

See All Featured
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
219
15k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
656
54k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
87
3.9k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
83
4.7k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
127
20k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.8k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
329
35k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.3k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
302
31k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
18
780
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k

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