- Brunch for super-fluid development (with some extra help)
- Coffeescript for clean, expressive JS
- Jade for clean, expressive HTML templates
- Pleeease for CSS optimization and autoprefixing
- Stylus for awesome and powerful CSS
- UglifyJS for JS minification
It features on-the-fly compilation, optimization and page reloading.
Everything is preset and ready to go. Simply follow the instructions below and start editing index.jade.
Install Node.js. Visit the download site and download the version appropriate to your OS. Once node and npm commmands are available on your system, run the following:
$ npm install
This will create a directory called node_modules and install its packages (using package.json for configuration).
You can install it using the node package manager: # npm install -g brunch
The following brunch plugins are subsequently installed:
- auto-reload-brunch
- coffee-script-brunch
- jade-static-brunch
- pleeease-brunch
- javascript-brunch
- stylus-brunch
- uglify-js-brunch
Bower no longer comes pre-bundled, but you can easily add it by installing it using $ npm install bower. You can then install your bower packages like so: $bower install --save my-package-name. This will create a bower_components directory and will contain all packages defined inside bower.json.
Simply issue the following command:$ npm start. This will start a server on http://localhost:3333 which you can open on your browser.
You can now edit index.jade for the main content, as well as scripts/app.coffee for the main JS and styles/app.styl for the CSS. Everything will be compiled in real time as soon as you save your changes.
You can deploy a production-ready version of your project by running $ npm run deploy. This will trigger all production-only optimizations, such as concatenation, minification, uglifyjs mangling, etc, as well as providing you with a zip file.
Inside the npm_scripts folder are a few scripts that make life a bit easier. The clean script will empty out your public folder. The zip script will zip up that same folder's contents. The wizard script will assist you in creating a new variables.cson file. You can run those scripts using the standard $ npm run <script_name>. More scripts are planned for future versions.
I will gladly consider suggestions and pull requests. This particular combo has served me really well, but of course there's always room for improvement.