Grunt

Transcript

1. GRUNT An Introduction !1 !1
2. !2 Introduction • JavaScript Task Runner • Runs on Node.js • Helps automate tasks, taking the repetitive work out of every day workflow: • Code linting, compilation, minification • Image minification • File concatenation • CSS Sprites etc. What is Grunt?
3. !3 How does it all work? • Specify project metadata, packages and dependencies • Manages versioning of plugins • Located at the root of a project • Once Node.js is installed • cd Sites/project- directory • npm install • Install new plugins • npm install plugin-name --save-dev Package.json
4. !4 How does it all work? • Tasks and their targets are defined in this file ! • Each task will have its own individual configuration - check the plugin documentation Gruntfile.js
5. !5 How does it all work? • Wrapper function • All Grunt related code is specified inside this function Gruntfile.js §
6. !6 How does it all work? • Wrapper function • All Grunt related code is specified inside this function • Project configuration Gruntfile.js
7. !7 How does it all work? • Wrapper function • All Grunt related code is specified inside this function • Project configuration • Import metadata from package.json Gruntfile.js
8. !8 How does it all work? • Wrapper function • All Grunt related code is specified inside this function • Project configuration • Import metadata from package.json • Configure individual tasks Gruntfile.js
9. !9 How does it all work? • Wrapper function • All Grunt related code is specified inside this function • Project configuration • Import metadata from package.json • Configure individual tasks • Task specific options Gruntfile.js
10. !10 How does it all work? • Wrapper function • All Grunt related code is specified inside this function • Project configuration • Import metadata from package.json • Configure individual tasks • Task specific options • Task specific targets Gruntfile.js
11. !11 How does it all work? • Wrapper function • All Grunt related code is specified inside this function • Project configuration • Import metadata from package.json • Configure individual tasks • Task specific options • Task specific targets • Target specific “globbing” patterns Gruntfile.js
12. !12 How does it all work? • Once the tasks have been configured, we individually load in our plugins Gruntfile.js
13. !13 How does it all work? • Once the tasks have been configured, we individually load in our plugins • Finally, register a set of tasks to be run • “default” task is what happens when just type “grunt” into command line • “grunt build” and “grunt” will run both targets within the “sass” task • “grunt build:desktop” will target “sass:desktop” Gruntfile.js
14. !14 How does it all work? • http://gruntjs.com/getting-started • http://gruntjs.com/configuring-tasks • http://gruntjs.com/creating-tasks Further Reading
15. !15 Changes in Workflow • Compass has/is in the process of being removed as part of our workflow • Slow compilation times • Bloated • Not as strict when it comes to coding standards - errors not flagged on compile • Still creates legacy code through mixins • Code stored in Gemfiles local to users machine • Last stable release was: 24/06/2012 • Horrendous documentations ! • Grunt will be used as the primary method of compiling Sass and running pre-build “Sass tasks” So what’s changing?
16. !16 Changes in Workflow • Checkout & Mobile optimisation task • Expanded on the idea of a “mixin library” • styles/scss/common/mixins • referenced in all screen and mobile CSS files • use only what we need • Removed old Compass mixin references • @include border-radius(5px); • @include linear-gradient(top(#fff, #000)); • @include filter-gradient(top(#fff, #000)); • Bad performing, opt for graceful degradation What’s already been done?
17. !17 Changes in Workflow • Surprisingly, not many are needed nowadays • Most browsers now understand border-radius, box- shadow, linear-gradients, transitions un-prefixed • For those that don’t…. What about Vendor prefixes
18. Autoprefixer !18
19. !19 Autoprefixer • Parses CSS files and adds vendor prefixes if required • References against Can I Use database and local project configuration ! • Advantages • Write W3C spec code, without worrying about prefixes • Removes unnecessary prefixes based • Define browser support by specific version number, last 2 versions (Google strategy) or global usage statistics • Firefox 3.6 • last 2 versions • > 1% How does it work
20. !20 Autoprefixer • “Disadvantages” • Won’t add polyfills - graceful degradation • Will not work with non-spec properties • Works behind the scenes - check/ peer review How does it work
21. !21 Autoprefixer Before
22. !22 Autoprefixer After
23. !23 Autoprefixer • Anything that requires a prefix - write in it’s original spec • Intelligent, but sometimes won’t recognise if written prefixed first • Browser support can be adjusted in the Gruntfile • Changes can be rolled out quickly • Look forward to a web without prefixes ! • https://github.com/nDmitry/grunt-autoprefixer Going Forward
24. • Coupled with other tasks, compilation speeds have greatly increased: ! ! ! ! ! ! ! ! ! • 2008 iMac, 2.8Ghz Intel Core 2 Duo, 6GB DDR2 • Compass - 418.863s / about 7 minutes • Grunt - 102.7s / 1-2 minutes • 4x quicker • compass clean, compass compile --time • grunt sass !24 Changes in Workflow Back to Grunt…
25. • Grunt-Sass • https://github.com/sindresorhus/ grunt-sass ! • Node.js binding for libsass - C++ implementation of Sass compiler • Much quicker (7.9s - “53x” quicker in this case) • Still issues with @extend and a few others features ! • Remove Ruby and as a dependancy !25 Changes in Workflow Something to look forward to…
26. • LiveReload • Monitors for filesystem changes • detects and injects changes straight into the browser ! • Works to a certain degree • Grunt watch patterns very elaborate • Slow to initialise • More work needed to split from other watch tasks !26 Changes in Workflow Something to look forward to…
27. !27 Changes in Workflow • Currently minified on compile using Compass • Looking to minify only on build • Commit only Sass files in the future ! ! ! ! ! ! • Why should I be checking what is getting compiled….? Unminified code in Development
28. !28 Issues with Sass • Because we end up with something like this: ! ! ! ! ! ! ! ! • Bad combination of nesting and using @extend’s across a project • Just to further illustrate…. 6,299 bytes for a single selector
29. !29 Issues with Sass • A single line change like this:
30. !30 Issues with Sass • Can lead to this…. ! ! ! ! ! ! ! ! ! ! • Can’t be that bad can it….?
31. !31 Issues with Sass ! ! ! ! ! ! ! ! ! ! • Increase of 31KB from a single line change • 1/6 of its original file size • Easily done without noticing Before 187KB After 218KB
32. !32 Issues with Sass • Need to address how we use @extend’s and structure Sass • Don’t be scared to use @extend, just be careful. • Try using @mixin’s as an alternative • smaller footprint - in most cases • try both and compare the output • mixins more customisable • Re-usable classes - adhere to proper OOCSS principles • Faster, smaller and much more efficient stylesheets • Page load, render times • Less code to maintain etc etc etc. Going Forward
33. !33 Changes in Workflow • https://github.com/Ensighten/grunt- spritesmith ! • Automated construction • No messing with background positions • No issues with source files in SVN - multiple people editing PSD source at same time • Original vector assets in one folder, raster images in other • Currently working in mobile • can be expanded to desktop • generates both retina and non- retina sprites - w/ Retina Media Queries Spritesmith
34. !34 Changes in Workflow • Disadvantages (as of now) • Code output isn’t great - repeating URL declarations, ugly relative paths (todo) • Manual work with outputting source images (todo) • Automatic class name creation has been disabled - issues with retina • Not an SVG solution • Preferred solution going forward • Grunticon, Webfonts (rendering inconsistencies). Need more research/testing • Repeated Media Queries…. Spritesmith
35. !35 Changes in Workflow • https://github.com/buildingblocks/grunt-combine-media- queries ! • Targets matching media queries blocks and combines them into a single definition. • Nested media queries in Sass • Retina media queries generated by Spritesmith Combine Media Queries
36. !36 Changes in Workflow • Combining Maille’s Retina Media Queries • 10 retina media query references • Saves 6KB • Checkout screen.css • Common - nested media queries - average file size = 31KB • Saves 4KB Before After
37. !37
38. !38 Changes in Workflow • https://github.com/jshint/jshint ! • Tool to help detect errors and potential problems in JavaScript • Configured on a site by site basis • Mobile, desktop and common • Encourages conformity in everyones code • Fail build if errors • Not ideal in it’s current state • Configured in .jshintrc • Can be as strict or as lenient as we want JSHint
39. !39 Future • ImageMin • Current issues on Windows with empty images • Source Maps • SASS - whenever v3.3.0 is released • or - when Grunt-SASS progresses to a more stable state • Front End Testing • Phantomas - “PhantomJS-based web performance metrics collector and monitoring tool” • CSS regression testing • CSSCSS • UnCSS • File revision hashing • Cachebust files • File concatenation • Less requests • Unit Tests
40. !40 Future • Looking to get this rolled out in the next few weeks • Few issues with Windows, requires more testing • Detailed installation guide • Node.js • Grunt CLI • Ruby • Sass • Latest stable releases • Try it out: • https://github.com/cahamilton/grunt-elysium-demo or • SVN Checkout: branches/mobile-optimisation ! • Any questions? Rollout Plan
41. Thank You !41