generator-zero

A simple frontend scaffold using coffeescript, pug, stylus, webpack, gulp

Features

• pug -> html, coffeescript -> javascript, stylus -> css
• use webpack to bundle npm dependencies
• inline css into html
• inline assets as data url
• utilize webpack dev server, hot reload and auto refresh when anything changes
• utilize proxy middleware, good for debugging with existing API

Folder Structure and Name Convention

src
├── coffee
    ├── main.coffee
    └── _dependency.coffee
├── pug
    ├── index.pug
    └── _dependency.pug
├── stylus
    └── index.pug
├── miscellaneous
    ├── robots.txt
    └── favicon.png
└── assets
    └── images
dist
├── index.html
├── robots.txt
├── favicon.png
└── assets
    └── images

All coding should happen in src folder and all things will be compiled into dist folder. Files in coffee and pug folder will be compiled if they are not preceeded with an underscore.

Installation

First, install Yeoman and generator-zero using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-zero

Then generate your new project:

yo zero

Gulp Tasks

• gulp serve: run the dev server on port 5000
• gulp dist: compile all things into dist folder

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

License

MIT © Thomas Yang