Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including generator-starterkit with all npm packages installed. Try it out:

var generatorStarterkit = require("generator-starterkit")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

generator-starterkit v1.3.9

Yeoman generator that scaffolds out a front end development starterkit.

generator-starterkit

Build Status Dependency Status npm version npm-downloads XO code style

yeoman-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
  • 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

$ 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

yostarterkit

License

The code is available under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free