A Grunt-enabled head-start with the H5BP, jQuery, Modernizr, and Respond. The building blocks to quickly get started with Grunt to create an optimized website.
Tim Svensen (follow @tsvensen)Created by
- CSS Grunt plugin to lint and minify CSS
- Smush-It Grunt plugin for losslessly compressing PNGs and JPGs
- HTML5 Boilerplate (H5BP) base CSS with normalize and inspired HTML index page
box-sizing: border-box;for all elements
- Ready to use starter Gruntfile config
- Clone or download GruntStart
npm installfrom the command line at the project root to install grunt and grunt plugins
grunt watchfrom the command line within the project directory
- Build your project
- When going to production make sure to use the custom Modernizr build, only testing for exactly what you need. See /js/vendor/
Take a closer look at index.html to
- optionally use Modernizr without Respond.js
It is assumed Nodejs with npm is installed. Grunt with dependancies are installed when running
GruntStart will lint all CSS within /custom/ then concatenate those into /libs/. The /libs/ directory is then concatenated and minified into /min/ for production use.
GruntStart is setup by default to grab all the files within /custom/ and /libs/, so no changes to the Grunt setup are needed by adding new files.
- /css/custom/ : your custom CSS files (recommended to only modify existing styles in _h5bp.css)
- /css/libs/ : add CSS provided by plugins or libraries here
- /css/min/ : the concatenated and minified CSS from /custom/ and /libs/
For example, jQuery lives within /vendor/ so it's only loaded once and only loaded if the Google CDN fails. Modernizr also lives in here as it needs to be added in the document HEAD.
GruntStart comes with the following tasks, ran from the command line:
grunt defaultwill lint, concat and minify both CSS and JS by default.
grunt minifywill run the default task above and compress images with Yahoo! SmushIt.
grunt watchis not a custom task, but intended to run while developing to see live linting and minification results.
Grunt watch is truly where the power of Grunt shines as the default task is ran after each watched file is changed. See the quick tutorial below to learn more.
Understanding The Watch Task
- Open up a command line instance and navigate to the project directory where Grunt is set up.
grunt default, note the output.
grunt watchfrom the command line. Grunt is now running the watch task and waiting.
- Open /css/custom/style.css or /js/custom/scripts.js in your favorite code editor and save the file.
- Go back to the command line where watch is running and note the output, the same as running the default task.
- Success! The default task is ran every time a watched file is changed.
GruntStart Architecture Decisions and Advanced Usage
The /css/libs/ and /js/libs/ directories have a z.style.concat.js and z.scripts.concat.js. These are the files concatenated from /custom/ by GruntStart. The 'z' prefix is there to make sure the custom code is included after any plugin or library code. Again this provides flexibility and solves a few problems, one of which is ordering what code comes first.
In the future a custom Grunt task could solve this problem. Until then, to gain further control of file order you will have to re-work the grunt.js configuration specifically to your project.
Project Goal and Future
Provide a quick and easy solution for developers to lint and minify their code. In the future GruntStart will most likely become a template for scaffolding with
Remember, this is a start. From here you can mold and shape it to fit your approach.
Author & copyright (c) 2012: Tim Svensen, Dual MIT & GPL license
Copyright (c) 2012 "Cowboy" Ben Alman, contributors Licensed under the MIT license.
Grunt Plugins Legal
- CSS: Copyright (c) 2012 Jörn Zaefferer Licensed under the MIT license.
- Smush-it: MIT License (c) Helder Santana : based on: grunt-recess