generator-wonnie

Tired 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

Why Wonnie?

• Easy to configure
• Smaller assets footprint than every framework can build
• Boilerplate and tools for code organization - no more spagetti hell

Getting Started

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

Usage

For development environment run:

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

For production build:

grunt build

File structure

By default it generates next file structure:

• assets/
• • css/
• • • app/
• • • lib/
• • • vendor/
• • img
• • js
• • • app/
• • • lib/
• • • vendor/
• config/grunt
• Gruntfile.js
• package.json

Convensions

Stylesheets

Only scss files will be processed for now.

Naming:

• widget.scss - stylesheet
• _typo.scss - partial

Javascripts

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:

<% if Rails.env.development? %>
  <script type="text/javascript" src="/js/vendor/requirejs.js"></script>
  <script type="text/javascript" src="/js/require_config.js"></script>
<% end %>

<script type="text/javascript" src="/js/main.js"></script>

License

MIT License