Task Automation (Grunt vs. Gulp)

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

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

Want more?

158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
2
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
0
158df2ad2d800432b505bb1b0e6308c8?s=48 fatasuir9
0
280
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
7
380
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
210
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
140
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
270
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
200
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
280
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
3
520
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
150
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
240

Transcript

  1. 1.

    TASK AUTOMATION (Grunt vs. Gulp)

  2. 2.

    SPEAKERS Ghis B @fatasuir9 Jecelyn @JecelynYeen

  3. 3.
    None
  4. 4.
    None
  5. 5.

    What’s a task runner?

  6. 6.

    In one word…

  7. 7.

    AUTOMATION

  8. 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. 9.

    doing such tasks can be…

  10. 10.

    BORING

  11. 11.

    TIME CONSUMING and most importantly…

  12. 12.
    None
  13. 13.

    YES, WE CAN

  14. 14.

    HOW?

  15. 15.

    Turn on your machine

  16. 16.

    npm install -g grunt-cli

  17. 17.

    npm install -g gulp

  18. 18.

    CLONE IT

  19. 19.

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

  20. 20.

    DEMO

  21. 21.
    None
  22. 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. 23.

    COOL STUFF • Bundling • gulp-concat, grunt-contrib-concat • Prevent pipe

    breaking caused by errors • gulp-plumber • Transpile ES6 • gulp-babel, grunt-babel
  24. 24.

    SUMMARY • Higher productivity • Overcome repetitive tasks • Speed

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

    WHO WINS? vs

  26. 26.

    –Unknown “It doesn’t really matter”

  27. 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. 28.

    QUESTIONS

  29. 29.

    THANK YOU

  30. 30.

    SPONSORS