generator-starterkit

generator-starterkit

Yeoman generator that scaffolds out my 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
  • Jade: Templating engine.
  • Html
• Babel: Use next generation JavaScript, today.
• Npm: Package manager used to install dependencies and everything you need.

Features

• styles Sass / Less auto compiling, prefixing and minifiying.
• templates: Jade / Html auto compiling and minifiying.
• scripts: Scripts concatenation, transpiling with Babel and minifiying.
• images: Images optimization.
• deploy: Deploying your project into a 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.

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.

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 Jade files / Html files.
│   │   └── _includes/       # Templating Jade partials.
└── gulpfile.js              # Gulp automatization file.

Demo

License

The code is available under the MIT license.