generator-starterkit

Yeoman generator that scaffolds out a front end development starterkit.

Technologies

• Gulp: Automate and enhance your workflow.
• CSS Preprocessors
  • Sass: CSS with superpowers.
  • Less: Less extends CSS with dynamic behavior.
• Templating / Markup
  • Pug: Templating engine.
  • Html
• JavaScript
  • Babel: Use next generation JavaScript, today.
  • Npm: Package manager used to install dependencies and everything you need.
  • Linters
    • JSCS: Code style linter for programmatically enforcing your style guide.
    • JSHint: A Static Code Analysis Tool for JavaScript.

Features

• styles: Sass / Less auto compiling, prefixing, minifiying and sourcemapping.
• templates: Pug / Html auto compiling and minifiying.
• scripts: Scripts concatenation, transpiling with Babel, minifiying and sourcemapping.
• lint: Lint your JavaScript files.
• images: Images optimization.
• deploy: Deploying your project into a github pages surge or ftp server.
• beautify: Beautify preproduction files.
• browsersync: Automatically injects all your changes in styles, templates and scripts into your browser and other devices on save.
• optimize: Automatically autoptimize your project using critical and uncss, to improve your page speed.

For more information about gulp workflow / tasks go to starterkit gulp tasks

Requirements and Use

Requirements

• NodeJS
• Yeoman
• Generator-Starterkit

$ npm install -g yo
$ npm install -g generator-starterkit

Use

Before running the generator you will need to create a folder for your project where the generator will create all the project files and directories.

Once you have, NodeJS, Yeoman, generator-starterkit installed and your project folder created you can run the generator using:

$ mkdir project
$ cd project
$ yo starterkit
$ gulp

Now the generator-starterkit will start to ask some questions to setup the project for you; project information, technologies and languages that you want to use and will install the dependencies automatically based on your decisions.

Also there are a lot of files being created dynamically such as gulp.js, package.json, readme.md, styles and templates to match the technologies and options that you choose from the generator. (See the technologies available)

Don't forget to run gulp after the yeoman finishes. Also you can use npm run to list the gulp tasks available and running them using for example npm run dev, (dev will run the default gulp task).

Options

• --skip-install: Skips the installation of dependencies with npm.
• --skip-welcome-message: Skips the welcome message.
• --skip-install-message: Skips the message after the installation of dependencies.
• --skip-cache: Do not remember prompt answers.

Project Structure

.
├── /dist/                   # Minified, optimized and compiled files.
│   ├── /assets/             # Assets folder.
│   │   ├── /css/            # CSS style files.
│   │   ├── /files/          # Static files.
│   │   │   └── img/         # Images folder.
│   │   └── /js/             # JS files.
│   └── *.html               # Minified HTML files.
├── /node_modules/           # Node modules dependencies and packages.
├── /src/                    # Source files.
│   ├── /images/             # Images non compressed.
│   ├── /scripts/            # JavaScript files.
│   ├── /styles/             # SCSS / Less style files.
│   │   └── _includes/       # Styles SCSS / Less partials.
│   ├── /templates/          # Templating Pug files / Html files.
│   │   └── _includes/       # Templating Pug partials.
└── gulpfile.js              # Gulp automatization file.

Demo

License

The code is available under the MIT license.