What grunt?
Download as ODP, PDF0 likes848 views
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.
What grunt?
- 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
- 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
- 18. Include source task Result: Index.html
- 19. Wiredep task ●Smart injection of bower dependencies, js and css
- 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!