kyjb2000 / grunt-express-workflow

A simple set of starter files that will help you to integrate grunt, express, and nodemon for rapid development of the server and client. Client-side files based off of a Yeoman scaffold.

Intro

These files are meant to help you quickly get up and running using Grunt with Express, with LiveReload, automatic app server reboots, and automatic testing for rapid development. Automatic cache-busting of all assets in production is supported with grunt-usemin.

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!

What's Included

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

Yeoman strong

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

$ yo webapp

I've built on it from that initial state.

SASS/Compass Example Files and Modules

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. The relativeAssets option in the compass grunt task has been changed to false, since relativeAssets: true produces incorrect references to sprites in the final CSS. Images are now referenced relative to the definitions in the compass task in Gruntfile.js.

Testing

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.

"But how do I use this? Why did you make this?"

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

Special Notes:

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.

2. If you want to test your media queries in old IE with respond.js, be sure to modify your Gruntfile.js to switch your compass:server options from debugInfo: true to debugInfo: false. This removes Compass' ability to inject certain media queries into your CSS, which would make it easier for you to debug your styles in modern browser debuggers, but confuse the logic of respond.js.

Changelog

• 0.4.0 - Support automatic cache-busting of all assets in production.
• 0.3.6 - Fix reference to Handlebars templates in Karma test config.
• 0.3.5 - Update lodash to 1.3.1 and change references from lodash.legacy to lodash.compat.
• 0.3.4 - Fix an issue where nodemon runs coffee and prevents the server from starting in some cases.
• 0.3.3 - Switch to using lodash.legacy and use safe console.log calls for IE8. Update jQuery to 1.10.2.
• 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.