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.

Lint, minify and concatenate CSS and Javascript and provide simple lossless image compression throughout a project build.

• 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 Grunt configuration file

1. Clone or download GruntStart
2. Run grunt watch from the command line within the project directory
3. Build your project
4. Keep tabs on the watch task output as custom CSS and Javascript files are saved
5. 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 the non-minified CSS and Javascript for development
• optionally use Modernizr without Respond.js

By default GruntStart will lint, concatenate and minify your CSS and Javascript.

It is assumed Nodejs and Grunt are installed.

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/

GruntStart will lint all Javascript within /custom/ then concatenate those into /libs/. The /libs/ directory is then concatenated and minified into /min/ for production use.

• /js/custom/ : your custom Javascript files
• /js/libs/ : add non-minified Javascript plugins or libraries here
• /js/min/ : the concatenated and minified Javascript from /custom/ and /libs/
• /js/vendor/ : already minified Javascript not be concatenated and minified

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 or grunt default will lint, concat and minify both CSS and JS by default.
• grunt minify will run the default task above and compress images with Yahoo! SmushIt.
• grunt watch is 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.

1. Open up a command line instance and navigate to the project directory where Grunt is set up.
2. Run grunt or grunt default, note the output.
3. Run grunt watch from the command line. Grunt is now running the watch task and waiting.
4. Open /css/custom/style.css or /js/custom/scripts.js in your favorite code editor and save the file.
5. Go back to the command line where watch is running and note the output, the same as running the default task.
6. Success! The default task is ran every time a watched file is changed.

GruntStart utilizes a flat directory structure within /js/ and /css/ to solve path-ing issues for media that arise in CSS or Javascript development. The multiple directories within /css/ and /js/ allow flexibility for a wide range of development approaches.

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.

Provide a quick and easy solution for developers to lint and minify their code. The goal is to branch and extend this base setup for other starter projects such as Twitter Bootstrap, Foundation and more. Feel free to contribute, Pull Requests will be accepted for improvements to the base setup and framework specific branches.

Remember, this is a start. From here you can mold and shape it to fit your approach.

Checkout the Grunt Documentation and Merrick Christensen's Grunt workflow article for a great grunt primer.

Author & copyright (c) 2012: Tim Svensen, Dual MIT & GPL license

Copyright (c) 2012 "Cowboy" Ben Alman, contributors Licensed under the MIT license.

https://github.com/gruntjs/grunt/blob/master/LICENSE-MIT

• CSS: Copyright (c) 2012 Jörn Zaefferer Licensed under the MIT license.
• Smush-it: MIT License (c) Helder Santana : based on: grunt-recess