grunt-express-workflow

KO | EN

gitlite — search

#python #typescript #llm #golang #machine-learning #linux #macos #nodejs #windows #awesome #awesome-list #vue #security #openai

grunt-express-workflow

(★ 68)

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.

grunt-express-workflow Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 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](https://darvelo.github.io/grunt-express-workflow) 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:

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

After installing the global dependencies above, run:

```bash
$ 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](http://modernizr.com/)
* [jQuery](http://jquery.com/)
* [Backbone](http://backbonejs.org)
* [Lo-dash](http://lodash.com/)
* [RequireJS](http://requirejs.org)
* [Handlebars](http://handlebarsjs.com/)
* [JSON3.js](http://bestiejs.github.io/json3/)
* [SASS](http://sass-lang.com/) with [Compass](http://compass-style.org/)

Server-side libraries included and configured:

* [Express](http://expressjs.com/)
* [Jade](http://jade-lang.com/)

Testing Libraries included and configured:

* [Karma](http://karma-runner.github.io/)
* [Istanbul](https://github.com/gotwarlost/istanbul)
* [Mocha](http://mochajs.org/)
* [Chai](http://chaijs.com/)
* [Sinon-Chai](https://github.com/domenic/sinon-chai)
* [Sinon](http://sinonjs.org/)
* [node-inspector](https://github.com/dannycoates/node-inspector)

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

* [grunt-nodemon](https://github.com/ChrisWren/grunt-nodemon) (~0.0.2)
* [grunt-contrib-handlebars](https://github.com/gruntjs/grunt-contrib-handlebars/) - for precompiled client-side templates
* [grunt-concurrent](https://github.com/sindresorhus/grunt-concurrent) (~0.2.0 !important)
* [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) (~0.5.1 !important)
* [grunt-simple-mocha](https://github.com/yaymukund/grunt-simple-mocha)
* [grunt-karma](https://github.com/karma-runner/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](http://compass-style.org/help/tutorials/spriting/). 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](https://gist.github.com/passy/5270050) [references](https://github.com/yeoman/yeoman/issues/419) 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](http://davidarvelo.com/blog/running-an-express-server-with-grunt-and-yeoman-part-3/).

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

This and more in the companion [blog](http://davidarvelo.com/blog/running-an-express-server-with-grunt-and-yeoman-part-2/) [posts](http://davidarvelo.com/blog/running-an-express-server-with-grunt-and-yeoman-part-3/) 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.

grunt-express-workflow

grunt-express-workflow Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

grunt-express-workflow

grunt-express-workflow Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README