Downloaded 11 times
Uploaded byLucio Martinez
What grunt?
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 introductionto Front end compilation
- 2. Specialization ●More devices ●More software ●Morespecialization
- 3. Web Dev ●Back end– front end ●Optimization in both sides ●Large process broken into pieces ●Dependencies handled separately
- 4. FrontEnd compile ●Assets areminimized ●Files are concatenated ●Less requests ●Static page size reduced
- 5. Bower ●Manage source codedependencies ●Jquery, Angular, etc ●Dependencies listed in bower.json ●Common folder: bower_components ●Each app has its bower config
- 6. Grunt ●Manage compile tasks ●Usuallyevery 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 ●Severaltiny tasks ●Single responsibility principle ●Automate repetitive tasks ●Separate prod from dev
- 8. Modules ●Setup configs ●Export configs ●Thefinal task is a node module
- 9. Grunt config ●Define gruntfinal tasks ●Where grunt modules are used
- 10. Grunt config Initial Configvs Merge Set once vs prepend
- 11. Custom tasks definition ●Groupseveral tasks into one ●More explicit to user
- 12.
- 13. Task renaming ●Extend supportfor tasks without targets
- 14. Development tasks ●Automatization ●Console debug ●Fastbrowser refresh
- 15. JSHint task ●Inspired inJS lint ●Verify syntax of javascript source code ●Search for warning and errors
- 16. Include source task ●Injectseveral files references into code ●No forget about new files ●Anyt type of file, js, less
- 17.
- 18. Include source task Result:Index.html
- 19. Wiredep task ●Smart injectionof bower dependencies, js and css
- 20.
- 21.
- 22. Less task ●Compile lessinto CSS ●A main less file with @imports ●Only 1 css file as output
- 23. Ng templates task ●Compilesall the HTML into a JS file ●Usage of $templateCache
- 24. Watch task ●Observe files ●Executean action after modifications noticed ●Don't need to re-run tasks manually
- 25. BrowserSync task ●Proxy theserver ●Use an unique instance through different devices ●Inject source code live in browser after changes (live reload)
- 26. Production tasks ●Optimization of everything ●Outputis what user will get
- 27. Ng templates task ●Sameas before and: ●Optimization by reducing ●Whitespaces ●Unneded attributes, etc
- 28. Less task ●Same asbefore ●Yep, not even optimization
- 29. UseminPrepare task ●Specifies listof files to concatenates ●Reading index.html ●Further tasks can process one file instead of a few
- 30. UseminPrepare task ●Files insidecomment concatenates in one file
- 31. Concat task ●Actually concatenates thefiles specified by useminPrepare task
- 32. Uglify task ●Remove unnecessary JScode ●Warning for security with compiler bugs
- 33. PostCSS task ●PostCSS isthe new black ●My fav post processors: minify css and autoprefixers
- 34. Copy task ●Copy otherfiles to the prod directory ●Usually, they aren't optimized yet
- 35. Usemin task ●Replace referencesin index.html to optimized version ●Runs after optimized files are in prod directory
- 36. Imagemin task ●Optimize images ●Outputis saved in prod directory ●Usually metadata is removed ●Not all the images are optimized but all are moved
- 37. Htmlmin task ●Optimize thefinal index.html ●Templates were already optimized in the js
- 38. Attributions Thanks to ScottRippey!
- 39.