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)
- 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
- Run
npm install
from the command line at the project root to install grunt and grunt plugins - Run
grunt watch
from the command line within the project directory - Build your project
- Keep tabs on the watch task output as custom CSS and Javascript files are saved
- 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 with npm is installed. Grunt with dependancies are installed when running npm install
.
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
orgrunt 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.
- Open up a command line instance and navigate to the project directory where Grunt is set up.
- Run
grunt
orgrunt default
, note the output. - Run
grunt watch
from 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 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. 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.
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