generator-kibe

kibe

A substitute for the Pastel.

Kibe is a simple Yeoman Generator to start projects with the most common tasks of my workflow using Gulp.

I use:

• NodeJS
• Babel
• Gulpjs
• Bower
• Stylus
• Kouto-swiss
• Rupture
• Vendor prefixes - Look here to ;)
• SMACSS
• Image sprites
• CSS, JS and Images minify

Operational System dependencies

• NodeJS

How to use?

Instalation

Install Yeoman if you don't have installed on your system:

npm i -g yo

Install Kibe on your project:

npm i generator-kibe

Wait and enjoy!!!

The tasks

Configs on Gulp

In the gulp.config.js file have the variables:

{
  dev     : './src/',
  js      : './src/js/',
  mainjs  : 'main.js',
  styl    : './src/styl/',
  sprites : './src/img/sprites/',
  dist    : './dist/',
  img     : './dist/img/'
}

On end of your project

Run:

gulp

Simple, not?

To development

Run gulp one time to prepare the dist folder.

gulp server

Write your code on scr folder.

When finish your work the dist folder already exists and is solemnly send to production!

All tasks

Uglify & Concat JS

Concat and minify JS files.

Run:

gulp js

The concat option on this task is commented to you active if is needed concatenate JS files on your project.

Compile Stylus (<3)

Compile Stylus and execute koutoSwiss, prefixer, jeet and rupture plugins.

Run:

gulp stylus

Minify images

Optimize images with the options:

{
  optimizationLevel: 3, 
  progressive: true,
  interlaced: true
}

Run:

gulp imagemin

Create image Sprites

Get images on ./src/img/sprites/ and create a image sprite on /img/sprite.png.

Run:

gulp sprites

Reload Browsers

Watch files [html, css, js] on dist and reload browsers when you save changes on your editor.

Run:

gulp browser-sync

Thanks @darlanmendonca