1.3.6 • Published 6 years ago
generator-genjutsu v1.3.6
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