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