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

• NodeJS

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!!!

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/'
}

Run:

gulp

Simple, not?

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!

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 and execute koutoSwiss, prefixer, jeet and rupture plugins.

Run:

gulp stylus

Optimize images with the options:

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

Run:

gulp imagemin

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

Run:

gulp sprites

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

Run:

gulp browser-sync

Thanks @darlanmendonca