gulp.js

Un sistema de builds en streaming

@gruizdevilla

¡Streams everywhere!

Venimos de Grunt: configuraciones everywhere

 module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('test', ['jshint', 'qunit']);

  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};

Identifica los pasos de construcción
y modificalos
 

Con gulp.js

var gulp = require('gulp');
var pkg = require('./package.json');
var concat = require('gulp-concat');
var minify = require('gulp-minify');
var jshint = require('gulp-jshint');

var scriptFiles = './src/**/*.js';

gulp.task('compile', function(){
  // concat all scripts, minify, and output
  gulp.src(scriptFiles)
    .pipe(concat({fileName: pkg.name+".js"})
    .pipe(minify())
    .pipe(gulp.dest('./dist/'));
});

¡vaya flow!

¿Qué te proporciona gulp?

Un sistema básico de streams y un sistema también muy básico de tareas.

Y con eso puedes

• Que tu fichero sea código y no configuración (el código transmite la sensación de fluir)
• Usas librerías estándar para hacer coass
• Los plugins son super simples y hacen una ¡¡única cosa!!!
• Las tareas se ejecutarán con máxima concurrencia
• I/O funciona como te lo imaginas

Es más fácil componer cosas sencillas para conseguir hacer cosas complicadas

Las 4 funciones de gulp.js

gulp.task(name[, deps], fn)

• Registras una tarea
• Puedes definir dependencias opcionales,
  que se ejecutarán antes y en paralelo.

gulp.watch(glob [, opts], tasks)

• Ejecuta unas tareas cuando un fichero que cumpla el glob cambie (http://en.wikipedia.org/wiki/Glob_(programming))
• También puedes recibir un callback:

gulp.watch(glob [, opts, cb])

gulp.src(globs[, options])

• Devuelve un stream de ficheros que cumpla con el glob o array de globs. 
• El stream puede ser redirigido a los plugins (piped).
• Los ficheros son Vinyl files (https://github.com/wearefractal/vinyl-fs)

gulp.dest(path[, options])

• Escribirá lo que reciba.
• Reemite lo que recibe, por lo que puedes enviar a más tareas o carpetas.
• Si una carpeta no existe, la crea.

Algunos plugins

https://github.com/plus3network/gulp-less
https://github.com/hparra/gulp-rename
https://github.com/gulpjs/gulp-util
https://github.com/juanfran/gulp-jade-inheritance
https://github.com/phated/gulp-jade
https://github.com/colynb/gulp-data
https://github.com/schickling/gulp-webserver
https://github.com/spenceralger/gulp-jshint
https://github.com/robrich/gulp-if
https://github.com/jonathanepollack/gulp-minify-css
https://github.com/sindresorhus/gulp-autoprefixer
https://github.com/postcss/autoprefixer
https://github.com/jonathanepollack/gulp-minify-html
https://github.com/sindresorhus/gulp-imagemin
https://github.com/ck86/main-bower-files
https://github.com/mikaelbr/gulp-notify
https://github.com/sindresorhus/gulp-plato
https://github.com/floridoo/gulp-sourcemaps

Y ahora a programar unos builds de ejemplo.