A generator for creating static sites using tools like Pug and Sass.

Usage no npm install needed!

<script type="module">
  import generatorMissionS from '';


Yeoman Mission-s Generator

A generator for creating static sites using tools like Pug and Sass.

Table of Contents


  • Preview with Browsersync
  • Automated build process: compilation of preprocessors (Pug and Sass)

Getting Started

This generator utilizes Yeoman, Gulp and Bower to scaffold out projects, run tasks and manage front-end dependencies.


Check to see if you have Node installed, type node -v. if you don't have installed, navigate to Node.js website and install from there.


To start a new project, you need to open up a terminal/command prompt, make a new directory, and navigate into it.

mkdir my-new-project
cd my-new-project

then, run Mission-s generator.

yo mission-s

Once everything is installed, you will see a project structure like this:

├── app/                       # Folder for all the source files
|   ├── dist                     # Folder for production build
|   |   ├── css                    # Compiled css
|   |   ├── img                    # All your img
|   |   ├── scripts                # JS scripts
|   |   ├── favicon
|   |   ├── humans.txt
|   |   ├── robots.txt
|   |   └── index.html             # Compiled pug
|   ├── pug                      # Pug modules
|   └── sass                     # Sass modules
├── .bowerrc
├── .editorconfig
├── .jshintrc
├── .yo-rc.json
├── bower.json                 # Dependencies configuration
├── gulpfile.js                # Gulp task configuration
├── package.json               # DevDependencies and site/folder configuration
└──                  # Readme file


Run gulp to build all your pug and sass files, and also it will open a local server.


Run gulp build to minify and compress all your css, js and images.


yo mission-s scss Use SCSS syntax instead of SASS.


MIT © Jaime Simental