generator-sizzle
Sizzle generator for quickly bootstrapping web apps using AMD modules and SMACSS like styling usinc Compass and Bourbon.
Using this generator will give you a quickly bootstrapped web app. I wrote this generator to make my life easier, as I have been using this particular set up for quite some time now and I am loving it! It might not be for you, but who knows - I hope it helps others too :)
Features
- Scaffolding projects with Yeoman
- Run automated tasks with Grunt
- Handle dependencies with Bower
- Browser LiveReload
- Compass stylesheets compilation and sprite generation (plus more)
- HTML, JavaScript and CSS obfuscation and minification
- Event driven JavaScript with JSSignals
- No touch event latency thanks to FastClick
- Double rainbow animations with the Greensock tweening engine
- A nice SASS based grid framework thanks to Bourbon Neat
- Quick deployment via SSH
- Cache busting of image files including your JavaScript and JSON files
- 1 CSS file in the and 1 JavaScript file before the , no unnecessary HTTP requests
- Keep your JavaScript code modular with AMD modules via RequireJS
- Use brill JavaScript utilities thanks to Underscore.js
Caveats
- Right now there is no unit testing in place (might add later)
- Because Yeoman doesn't like RequireJS, there is no way of making asyncronous calls to multiple AMD modules. Your code is generated by Almond into one single module
- You need to install the Compass Ruby gem (detailed below)
Bower components
- jQuery
- Underscore.js
- Greensock
- FastClick
- Almond (a working substitute of requirejs with Yeoman)
- JS Signals
- Bourbon + Bourbon Neat
- Normalize.scss
NPM modules (other than the usual stuff)
- Compass
- RequireJS (r.js optimiser)
Installing Compass
-
Make sure you have Ruby installed. Perhaps a better way of installing ruby is via rbenv
-
Install Bundler if you haven't already
-
In your project root run:
$ bundle install
Usage
Install generator-sizzle
:
npm install -g generator-sizzle
Make a new directory, and cd
into it:
mkdir my-new-project && cd $_
Run yo sizzle
, optionally passing an app name:
yo sizzle [app-name]
Run grunt
for building and grunt serve
for preview
Changelog
All changes are logged in the CHANGELOG.md file.
To do
- Add soft build Grunt task
- Add optional jsHint and Mocha support