tsvensen / GruntStart

A Grunt-enabled head-start with H5BP + jQuery + Modernizr + Respond + box-sizing:border-box;

GruntStart

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.

---

Created by Tim Svensen (follow @tsvensen)

---

What

• 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

Quick Start

1. Clone or download GruntStart
2. Run npm install from the command line at the project root to install grunt and grunt plugins
3. Run grunt watch from the command line within the project directory
4. Build your project
5. Keep tabs on the watch task output as custom CSS and Javascript files are saved
6. 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

Usage

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

It is assumed Nodejs with npm is installed. Grunt with dependancies are installed when running npm install.

CSS

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/

Javascript

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.

Tasks

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.

Understanding The Watch Task

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 Architecture Decisions and Advanced Usage

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.

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 grunt init.

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

Legal

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

Grunt Legal

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

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

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