generator-ayen

generator-ayen

Yeoman generator with Anything You'll Ever Need to write a single-page app. Features live-reloading development workflow, Browserify, Bower integration, Jade templates, a CSS preprocessor and testing tools.

WARNING: This generator is still in flux. Expect breaking changes.

Features:

• Choose between Stylus, SASS, LESS or just plain CSS
• Start with a bare JS app template, with a Backbone app or with a React + Flux scaffold.
• Write modular code with Browserify
• Compile your HTML templates with Jade and templatizer
• Manage your dependencies with npm and Bower
• Watch and automatically reload your project when the sources change with Browsersync
• Write a custom server for your app for advanced functionality
• Develop easier with source maps
• Produce a minified, production ready build with autoprefixed styles and critical path CSS

Installation

Install Yeoman

Yeoman is a project scaffolding tool. You install it from npm by running:

npm install -g yo

Installing Ayen

To install generator-ayen from npm, run:

npm install -g generator-ayen

Installing Gulp

Ayen projects need Gulp to work. You know the drill:

npm install -g gulp

Creating a project

Pick a good spot on your hard drive for your project and cd to it:

mkdir my-new-app
cd my-new-app

Initiate the generator:

yo ayen

Now just answer all the questions truthfully and you're done.

P.S.: Did you know you can run yo ayen again even after you've already scaffolded an app? Yeoman will help you resolve conflicting files, so don't worry about losing your work if you re-scaffold.

Ayen knows to play nice with your project even after you've done some work, so don't hesitate to upgrade your build environment whenever a new version of ayen is out.

Using your new project

Watching

Start the watcher:

gulp watch

A browser window will pop out. It will reload whenever you make a change to a file.

At this point, you can start hacking away with your favorite text editor.

You will find browser-side code in ./client and server-side code in ./server.

Building

gulp build:dist

This builds for production and outputs the results in ./public.

gulp build

This builds a minimal development build in ./public. It contains symlinks, so you may not want to move it around.

Testing (Work in Progress)

gulp test

This runs the tests once

gulp test:watch

This runs the in continuous live-reload mode (just like gulp watch).

gulp pagespeed

Checks your site automatically against Google's Pagepeed.

Known issues

• Tests are not implemented yet
• Sometimes, the server process remains orphaned in the background after gulp quits

License

MPLv2