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
27
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
22
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
290
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
270
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
3
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
1
580

Other Decks in Programming

See All in Programming
9e32efa81b675ecd55c166fb7b0a1890?s=48 clusterinc
0
280
Dc5157c1e1b11923f4cdd210ee27d4af?s=48 patorash
0
130
C90bac78c0fb61105cfd8239767f903d?s=48 o0h
PRO
0
310
13f3313ae1ec1d9b3ed76ccbd746291b?s=48 takuyaa
4
480
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
0
120
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
1.4k
8673a339e4002704b42bc66c43c65445?s=48 scrpgil
0
100
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
0
560
326530203cf3b827e41f68edb45e7509?s=48 bamboooo
1
110
438799c739f93d00abc30fa2da33c543?s=48 rukiadia
3
850
3138f3848e96b7dfc3dba2113bcb43e7?s=48 tmyk110
1
150
3179e6bb62dc91d29bb906ffef4fa2d4?s=48 marcoow
0
160

Featured

See All Featured
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
10
540
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
99
11k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
167
7.3k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
270k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
370
42k
78b475797a14c84799063c7cd073962f?s=48 holman
288
130k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
94
14k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
8.7k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
330
15k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
340
16k

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