Discover what grunt is and what you can do for it

1. What grunt?
An introduction to Front end compilation

2. Specialization
●More devices
●More software
●More specialization

3. Web Dev
●Back end – front end
●Optimization in both sides
●Large process broken into pieces
●Dependencies handled separately

4. FrontEnd compile
●Assets are minimized
●Files are concatenated
●Less requests
●Static page size reduced

5. Bower
●Manage source code dependencies
●Jquery, Angular, etc
●Dependencies listed in bower.json
●Common folder: bower_components
●Each app has its bower config

6. Grunt
●Manage compile tasks
●Usually every task is a plugin
●Plugins are grunt dependencies
●Dependencies are in package.json
●Common folder: node_modules
●Several apps can share grunt configs

7. Grunt in action
●Several tiny tasks
●Single responsibility principle
●Automate repetitive tasks
●Separate prod from dev

8. Modules
●Setup configs
●Export configs
●The final task is a node
module

9. Grunt config
●Define grunt final tasks
●Where grunt modules
are used

10. Grunt config
Initial Config vs Merge
Set once vs prepend

11. Custom tasks definition
●Group several tasks into
one
●More explicit to user

12. Custom tasks definition

13. Task renaming
●Extend support for tasks
without targets

14. Development tasks
●Automatization
●Console debug
●Fast browser refresh

15. JSHint task
●Inspired in JS lint
●Verify syntax of javascript
source code
●Search for warning and
errors

16. Include source task
●Inject several files
references into code
●No forget about new files
●Anyt type of file, js, less

17. Include source task
Source:
index.html.template

18. Include source task
Result: Index.html

19. Wiredep task
●Smart injection of bower
dependencies, js and
css

20. Wiredep task
Source:
index.html.template

21. Wiredep task
Result: Index.html

22. Less task
●Compile less into CSS
●A main less file with
@imports
●Only 1 css file as output

23. Ng templates task
●Compiles all the HTML
into a JS file
●Usage of
$templateCache

24. Watch task
●Observe files
●Execute an action after
modifications noticed
●Don't need to re-run tasks
manually

25. BrowserSync task
●Proxy the server
●Use an unique instance through
different devices
●Inject source code live in browser
after changes (live reload)

26. Production tasks
●Optimization of
everything
●Output is what user will
get

27. Ng templates task
●Same as before and:
●Optimization by reducing
●Whitespaces
●Unneded attributes, etc

28. Less task
●Same as before
●Yep, not even
optimization

29. UseminPrepare task
●Specifies list of files to
concatenates
●Reading index.html
●Further tasks can process
one file instead of a few

30. UseminPrepare task
●Files inside comment
concatenates in one file

31. Concat task
●Actually concatenates
the files specified by
useminPrepare task

32. Uglify task
●Remove unnecessary
JS code
●Warning for security with
compiler bugs

33. PostCSS task
●PostCSS is the new black
●My fav post processors:
minify css and
autoprefixers

34. Copy task
●Copy other files to the
prod directory
●Usually, they aren't
optimized yet

35. Usemin task
●Replace references in
index.html to optimized
version
●Runs after optimized files
are in prod directory

36. Imagemin task
●Optimize images
●Output is saved in prod directory
●Usually metadata is removed
●Not all the images are optimized but
all are moved

37. Htmlmin task
●Optimize the final
index.html
●Templates were already
optimized in the js

38. Attributions
Thanks to Scott Rippey!

39. End.
Lucio Martinez
GitHub project:
https://github.com/lucio-martinez/what-grunt