Genjutsu

Yeoman generator that scaffolds out a front-end web app using Gulp for the build process, Panini for templating, Sass for CSS pre-processing, and Babel for the latest features of Javascript.

Installation

$ npm i -g generator-genjutsu

Features

Please see gulpfile for up to date information on supported packages.

• Built-in preview server with BrowserSync
• enable ES2015 features using Babel and Browserify
• Powerful and modular stylesheet using Sass
• Automagically clean your stylesheet for unused CSS
• Compile HTML layouts, pages, and partials
• Awesome optimization of all your assets
• Automagically upload production build to Github Pages

For more information on what this generator can do for you, take a look at the gulp plugins used in our package.json.

Usage

Run the following after installing yeoman and generator-genjutsu.

• $ yo genjutsu - scaffold your project
• $ yarn start - build files
• $ yarn serve - preview and watch for changes
• $ yarn prod - build for production
• $ yarn deploy - deploy using gh-pages

Directory Structure

A basic Genjutsu project usually looks something like this:

root-directory
├── app
|   ├── images
|   |   ├── background-image.jpg
|   |   ...
|   |   └── favicon.ico
|   ├── layouts
|   |   ├── admin.html
|   |   └── default.html
|   ├── pages
|   |   ├── about.html
|   |   ...
|   |   └── index.html
|   ├── partials
|   |   ├── footer.html
|   |   ...
|   |   └── navbar.html
|   ├── scripts
|   |   ...
|   |   └── app.js
|   └── styles
|   |   ...
|   |   └── app.sass
├── gulp-tasks
|   ├── browser-sync.js
|   ...
|   └── watch.js
├── .gitignore
├── gulpfile.js
├── package.json
└── yarn.lock