Gulp & Grunt - What, Why & How

An introduction to Javascript Task Runners using Gulp & Grunt

Transcript

1. Gulp & Grunt What, Why & How Michael Wallis Front End Developer Platinum Seed
2. Responsibilities & Things I do everyday • Building HTML templates • Styling using SASS • Javascript development • Asset handling and organization (e.g images & fonts)
3. Javascript Task Runners
4. Why? • Save time • More consistent standards on assets • Improved workflow • Easy project setup
5. Things I no longer worry about • SASS/Less compilation • JS Linting • CSS & JS minification and concatenation • Image optimization • Sprite sheet generation • Asset injection • File cleaning
7. Node.js
8. npm
9. Installing • Gulp npm install gulp –g • Grunt npm install grunt cli –g
10. Node.js Example Setup
11. Package.json
12. • Gulp npm install gulp-sass --save-dev • Grunt npm install grunt-contrib-sass --save-dev Installing packages
13. Grunt - Empty
14. Grunt SASS Example
15. Running the task
16. Grunt - SASS, autoprefixer and minify
17. Running the task
18. Grunt - Adding Watch
19. Grunt – Default Watch Task
20. Running the task
21. Gulp: SASS Compilation
22. Running the task
23. Gulp: SASS, autoprefix & minify
24. Running the task
25. Gulp Watch
26. Running the task
27. • Styles – sass comp, minify and concat • Load Plugins – no imports • Error Handling • Live Reloading • Scripts – linting, moving, minifying • Images – optimization, sprite sheet generation, svg icon font • Asset injection and folder cleaning My Gulp Setup
28. Load Plugins
29. Error Handling
30. Error Handling
31. Error Handling
32. Error Handling
33. Javascript Linting
34. Live Reload
35. Javascript Minifying
36. Javascript Other Tasks
37. Image Optimization
38. Images Sprite Creation - 01
39. Images Sprite Creation - 02
40. Asset Injection
41. Folder Cleaning
42. Sequences
43. Speed
44. Community
45. • Downloads in the last month Gulp - 2,207,181 Grunt - 1,853,883 • Plugins Gulp – 2 436 Grunt – 5 738 Numbers as of 2 hours ago
46. Who Wins?!
48. Gulp & Grunt What, Why & How Michael Wallis Front End Developer Platinum Seed
49. • https://css-tricks.com/gulp-for-beginners/ • http://andy-carter.com/blog/a-beginners-guide-to-the-task-runner- gulp • https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why- the-other-f5d3b398edc4#.6zc1qnn2r • http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/ Links & Resources