What grunt?
An introduction to Front end compilation
Specialization
More devices
More software
More specialization
Web Dev
Back end front end
Optimization in both sides
Large process broken into pieces
Dependencies handled separately
FrontEnd compile
Assets are minimized
Files are concatenated
Less requests
Static page size reduced
Bower
Manage source code dependencies
Jquery, Angular, etc
Dependencies listed in bower.json
Common folder: bower_components
Each app has its bower config
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
Grunt in action
Several tiny tasks
Single responsibility principle
Automate repetitive tasks
Separate prod from dev
Modules
Setup configs
Export configs
The final task is a node module
Grunt config
Define grunt final tasks
Where grunt modules are used
Grunt config
Initial Config vs Merge
Set once vs prepend
Custom tasks definition
Group several tasks into one
More explicit to user
Custom tasks definition
Task renaming
Extend support for tasks without targets
Development tasks
Automatization
Console debug
Fast browser refresh
JSHint task
Inspired in JS lint
Verify syntax of javascript source code
Search for warning and errors
Include source task
Inject several files references into code
No forget about new files
Anyt type of file, js, less
Include source task
Source: index.html.template
Include source task
Result: Index.html
Wiredep task
Smart injection of bower dependencies, js and css
Wiredep task
Source: index.html.template
Wiredep task
Result: Index.html
Less task
Compile less into CSS
A main less file with @imports
Only 1 css file as output
Ng templates task
Compiles all the HTML into a JS file
Usage of $templateCache
Watch task
Observe files
Execute an action after modifications noticed
Don't need to re-run tasks manually
BrowserSync task
Proxy the server
Use an unique instance through different devices
Inject source code live in browser after changes (live
reload)
Production tasks
Optimization of everything
Output is what user will get
Ng templates task
Same as before and:
Optimization by reducing
Whitespaces
Unneded attributes, etc
Less task
Same as before
Yep, not even optimization
UseminPrepare task
Specifies list of files to concatenates
Reading index.html
Further tasks can process one file instead of a few
UseminPrepare task
Files inside comment concatenates in one file
Concat task
Actually concatenates the files specified by useminPrepare
task
Uglify task
Remove unnecessary JS code
Warning for security with compiler bugs
PostCSS task
PostCSS is the new black
My fav post processors: minify css and autoprefixers
Copy task
Copy other files to the prod directory
Usually, they aren't optimized yet
Usemin task
Replace references in index.html to optimized version
Runs after optimized files are in prod directory
Imagemin task
Optimize images
Output is saved in prod directory
Usually metadata is removed
Not all the images are optimized but all are moved
Htmlmin task
Optimize the final index.html
Templates were already optimized in the js
Attributions
Thanks to Scott Rippey!
End.
Lucio Martinez GitHub
project:https://github.com/lucio-martinez/what-grunt
