npm install generator-wonnieTired with your Rails asset pipeline? Have no idea how to manage assets in Sinatra or %your_favorite_framework%? Try Wonnie!
Wonnie is an web-application layout generator. Build stack does next:
- Build scss files, postprocess them with autoprefixer and minify with CSSO
- Build AMD javascripts with requirejs and amdclean, minify with UglifyJS
- Optimize images with OptiPNG, jpegtran, and SVGO.
- Gzip text assets for nginx
- Easy to configure
- Smaller assets footprint than every framework can build
- Boilerplate and tools for code organization - no more spagetti hell
This is the sceleton generator for Yeoman, so you need to have it installed.
Install yeoman:
``
$ npm install -g yo
To install generator-wonnie from npm, run:
`
$ npm install -g generator-wonnie
Initiate the generator:
`
$ yo wonnie
Edit $grunt_config/project.js if needed
`
grunt watch
Make sure that you pick proper public folder for your framework.
If you use foreman/shoreman/honcho/norman you may want to add this to Procfile:
`
web: ...
assets: grunt watch
Users of tmuxinator can add grunt watch to the separate tab
`
grunt build
By default it generates next file structure:
- assets/
- - css/
- - - app/
- - - lib/
- - - vendor/
- - img
- - js
- - - app/
- - - lib/
- - - vendor/
- config/grunt
- Gruntfile.js
- package.json
Only scss files will be processed for now.
Naming:
- widget.scss - stylesheet_typo.scss
- - partial
Currently only AMD supported
By default, only app/main.js will be processed. You can add additional files to $grunt_config/project.js inside the modules array.
File require_config.js contains global requirejs options.
Production files will be built with amdclean so all it's limitations should be applied to the development code too.
In development mode you need to add requirejs and require_config manually. For example in Rails it looks like:
`erb
<% if Rails.env.development? %>
<% end %>
``