/**
* File: gulpfile.js
* Author: Alex Arriaga (@alex_arriaga_m) - http://www.alex-arriaga.com
* Date: 26/Aug/2014
*/
var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var stylus = require('gulp-stylus');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var baseDirDev = './dev/';
var baseDirJs = './dev/js/';
var baseDirCSS = './dev/css/';
var paths = {
dev : './dev/',
prod : './prod/',
scripts : [baseDirJs + 'jquery-1.11.1.js', baseDirJs + 'js/bootstrap.js'],
images : [baseDirDev +'img/*.jpg', baseDirDev +'img/*.png'],
fonts : 'fonts/*',
less : 'less/*.less',
stylus : 'stylus/*.styl',
css : [baseDirCSS + 'bootstrap.css', baseDirCSS + 'econtinua.css', baseDirCSS + 'econtinua-responsive.css', baseDirCSS + 'font-awesome.css']
// stylus : 'stylus/*.styl'
};
// This object contains parameters for minifying operation.
// Please, read more about it in this link: https://www.npmjs.org/package/gulp-minify-css
var minifyCSSOptions = {
keepSpecialComments: 0,
keepBreaks: false,
debug: true
};
/*
// 1. Transform LESS file to CSS (place CSS files into dev/css folder)
gulp.task('less', function() {
console.log("Running LESS task...");
return gulp.src(paths.dev + paths.less)
.pipe(less())
.pipe(minifyCSS(minifyCSSOptions))
.pipe(gulp.dest(paths.dev + 'css'));
});
*/
// 1. Transform Stylus files to CSS (place CSS files into dev/css folder)
gulp.task('stylus', function() {
console.log("Running Stylus task...");
return gulp.src(paths.dev + paths.stylus)
.pipe(stylus())
.pipe(minifyCSS(minifyCSSOptions))
.pipe(gulp.dest(paths.dev + 'css'));
});
// 2. Compress CSS (it will run after 'stylus' task finishes
gulp.task('compress-css',['stylus'], function() {
console.log("Running compressing CSS task...");
return gulp.src(paths.css)
.pipe(concat('all-styles.css'))
.pipe(gulp.dest(paths.prod + 'css'))
.pipe(rename('all-styles.min.css'))
.pipe(minifyCSS(minifyCSSOptions))
.pipe(gulp.dest(paths.prod + 'css'));
});
// 3. Compress JavaScript files and place them into production folder
gulp.task('compress-js', function() {
console.log("Running compressing JavaScript task...");
return gulp.src(paths.scripts)
.pipe(concat('all-scripts.js'))
.pipe(gulp.dest(paths.prod + 'js'))
.pipe(rename('all-scripts.min.js'))
.pipe(uglify())
.pipe(gulp.dest(paths.prod + 'js'));
});
// 4. Copy images
gulp.task('copy-static-resources', function() {
// console.log("Copy images from:" + (paths.dev+paths.images));
console.log("Copying static resources task...");
gulp.src(paths.images)
.pipe(imagemin({
progressive: true,
optimizationLevel: 6,
svgoPlugins: [{ removeViewBox: false }],
use: [pngcrush({ reduce: true })]
}))
.pipe(gulp.dest(paths.prod + 'img'));
gulp.src(paths.dev+paths.fonts)
.pipe(gulp.dest(paths.prod + 'fonts'));
});
// Watch files for fhanges
gulp.task('watch', function() {
//gulp.watch(paths.scripts, ['create-documentation']);
//gulp.watch(paths.scripts, ['compress-js']);
console.log("Registering path to watch:" + paths.dev + paths.stylus);
gulp.watch(paths.dev + paths.stylus, ['stylus','compress-css']);
});
// Default gulp task to run
gulp.task('default',['stylus', 'compress-css', 'compress-js', 'copy-static-resources', 'watch']);
During the last four months I have been involved in creating UI Kits for a government, so part of my job is to document every single front-end asset (component) we generate. In the past I have worked with Assemble.io which is more an static site generator (something like Hexo) than a library for components documentation, in fact Assemble.io is kind of out-dated.
I started my search for a mechanism to create documentation for UI style guides and UI components, after some hours of investigation and testing I found this great library: Fractal, built as a NPM package (which is even better, because you can integrate it with a task runner like Gulp.js.
From the official guide from Fractal:
See the workshop available in Webtraining.Zone: Documentación de componentes con Fractal
See you next time.
First command you have to learn is the one related with the initialization of a project using the 
Alex Arriaga 
