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-genjutsuFeatures
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