Glup.js base

gistfile1.js

/**
 * Lectura
 * http://andy-carter.com/blog/a-beginners-guide-to-the-task-runner-gulp
 * http://markgoodyear.com/2014/01/getting-started-with-gulp/
 * https://blog.nodejitsu.com/npmawesome-9-gulp-plugins/
 *
 * Para instalar un paquete debe ser
 * npm install <paquete> --save-dev
 *
 * Se estila utilizar una carpeta 'src' donde estan todas las fuentes
 * de los archivos y tener una carpeta 'build' con los archivos tratados
 * la cual gulp crea solito
 * ...
 * \src
 *     \css
 *     \js
 *     \images
 * \build
 *     \css
 *     ...
 * ...
 *
 * Using multiple sources in one task: http://goo.gl/5pM9AV
 * Split tasks across multiple files: http://goo.gl/dAufwW
 */

var gulp = require('gulp'),
// Plugins
concat = require('gulp-concat'), // Concatenar
uglify = require('gulp-uglify'), // Lo pone feito
rename = require('gulp-rename'), // Re-nombra archivos
compass = require('gulp-compass'), // Compass para gulp
minifyCSS = require('gulp-minify-css'), // Minifica CSS
imagemin = require('gulp-imagemin'), // Optimiza tamaño imagenes
notify = require('gulp-notify'), // Notifica en consola
clean = require('gulp-clean'), // Elimina archivos
filesize = require('gulp-filesize'); // Muestra información del peso de los archivos
/**
 * Plugins por probar
 *
 * https://github.com/sindresorhus/gulp-strip-debug
 * Permite eliminar de JS declaraciones console, alert y debugger
 *
 * https://github.com/spenceralger/gulp-jshint
 * Un lint para JS, lo usan harto en los tutoriales, pero se puede incluir
 * directamente en Sublime Text y te muestra las advertencias en tiempo real
 * (así lo tengo yo por lo menos)
 */

// JS
gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('build/dev/js'))
        .pipe(filesize())
        //.pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('build/production/js'))
        .pipe(filesize())
        .pipe(notify({ message: 'JavaScript task complete' }));
});

// CSS
// https://github.com/appleboy/gulp-compass
gulp.task('compass', function() {
    return gulp.src('src/sass/**/*.scss')
        .pipe(compass({
            css: 'src/css',
            sass: 'src/sass',
            image: 'src/imgs'
        }))
        .pipe(gulp.dest('build/dev/css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/production/css'));
        //pipe(notify({ message: 'Compass task complete' }));
});

// Imágenes
gulp.task('images', function() {
    return gulp.src('src/imgs/**/*')
        .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
        .pipe(gulp.dest('build/dev/imgs'))
        .pipe(gulp.dest('build/production/imgs'));
        //.pipe(notify({ message: 'Images task complete' }));
});

// Se encarga de re-generar los archivos automáticamente
// Se deben definir las rutas a 'mirar' y la tarea a realizar
gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['scripts']);
    gulp.watch('./src/sass/*.scss', ['compass']);
    gulp.watch('src/imgs/**/*', ['images']);
});

// Se encarga de borrar archivos antes de re-generar todo
gulp.task('clean', function() {
    return gulp.src(['build/*'], {read: false})
        .pipe(clean());
});

// Cuando ejecutamos 'gulp' en consola, se ejecutan estas tareas
gulp.task('default', ['clean'], function () {
    // Esto hay que cambiarlo, gulp.start va a quedar deprecated en un futuro
    gulp.start('scripts', 'compass', 'images', 'watch');
});

Excelente, acabo de entender varias cosas con leer esto, estoy armando el mío, te cuento cómo me va y lo posteo aquí.