Grunt is a task runner that can be used to automate repetitive tasks like minification, compilation, unit testing, and linting. It uses plugins, or tasks, that are run from a Gruntfile configuration. Common tasks include concatenating files, compiling LESS/Sass to CSS, linting JavaScript, optimizing images, and more. Tasks can be combined and customized to set up efficient development and production build processes. Grunt runs tasks defined in the Gruntfile configuration to minimize assets, concatenate files, reduce requests, and optimize the final code and assets that are delivered to users.

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