These files are meant to help you quickly get up and running using Grunt with Express, with livereload, automatic app server reboots, automatic testing, and a SASS-based flexible responsive grid for rapid development. Client-side libraries are retrieved with bower.

This is an example of what the project compiles to. Resize the browser to see it at different media query breakpoints.

Note: It's important that you have the proper npm libraries globally installed:

$ npm install -g yo node-inspector nodemon grunt-cli bower karma istanbul

After installing the global dependencies above, run:

$ cd grunt-express-workflow
$ npm install
$ bower install
$ grunt server

And you're ready to go!

Popular client-side libraries included and configured:

• Modernizr
• jQuery
• Backbone
• Lo-dash
• RequireJS
• Handlebars
• JSON3.js
• SASS with Compass

Server-side libraries included and configured:

• Express
• Jade

Testing Libraries included and configured:

• Karma
• Istanbul
• Mocha
• Chai
• Sinon-Chai
• Sinon
• node-inspector

Grunt plugins I included in package.json and configured in Gruntfile.js are:

• grunt-nodemon (~0.0.2)
• grunt-contrib-handlebars - for precompiled client-side templates
• grunt-concurrent (~0.2.0 !important)
• grunt-contrib-watch (~0.5.1 !important)
• grunt-simple-mocha
• grunt-karma

This scaffold is based off of the default Yeoman scaffold, started with

$ yo webapp

I've built on it from that initial state.

The project has been outfitted with helpful SASS modules, including the flexible responsive grid module. Examples of how you can leverage some of the power of SASS and Compass are shown throughout the app/styles/ folder. The app/images/sprites folder is now special. You can create folders in it with images you wish to make into individual spritesheets using Compass' sprite helpers. An example of this is in the project.

Karma, Istanbul, and Mocha run automated tests and coverage for the frontend and backend. This happens when development files or test files are changed during a grunt server run, or when the grunt test command is run on the command line. More information can be found in this blog post.

This and more in the companion blog posts to this repository.

1. If you want to grunt build for production with Handlebars in your project, you'll need to change the Handlebars runtime library code from the initial var Handlebars = {}; to this.Handlebars = {}; so that it'll be attached to the window object and found by RequireJS modules. It seems this is being fixed upstream with the Handlebars developers at the time of this writing.

• 0.3.2 - Update grunt-contrib-watch in package.json to 0.5.1. Update responsive-sass-grid to 0.1.0.
• 0.3.1 - Change Jade templates to accommodate deprecation of implicit text support for scripts in Jade 0.31.0.
• 0.3.0 - Example SASS with a flexible responsive grid module, and a special sprites folder are now included.
• 0.2.0 - Namespaced Karma task targets in the Gruntfile as well as Istanbul coverage output files.
• 0.1.0 - Added Karma, Mocha, and Istanbul for a full-featured frontend and backend test framework.