generator-ayen
v0.0.12
Published
Yeoman generator for a full stack, testable, web app development workflow with Browserify, Jade, Stylus/SASS/LESS, Gulp and Bower
Downloads
7
Readme
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