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