gulp

propósito

tutorial

npm install -g gulp
gulp -v
[18:19:20] CLI version 3.9.1
C:\nube\MEGA\programacion\JavaScript>
C:\nube\MEGA\programacion\JavaScript>mkdir gulpjs
C:\nube\MEGA\programacion\JavaScript>cd gulpjs
C:\nube\MEGA\programacion\JavaScript\gulpjs>mkdir gulp-primeros-pasos
C:\nube\MEGA\programacion\JavaScript\gulpjs>cd gulp-primeros-pasos
C:\nube\MEGA\programacion\JavaScript\gulpjs\gulp-primeros-pasos>

C:\nube\MEGA\programacion\JavaScript\gulpjs\gulp-primeros-pasos>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp-primeros-pasos)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: javier
license: (ISC) MIT
About to write to C:\nube\MEGA\programacion\JavaScript\gulpjs\gulp-primeros-pasos\package.json:

{
  "name": "gulp-primeros-pasos",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "javier",
  "license": "MIT"
}

Is this ok? (yes) yes

C:\nube\MEGA\programacion\JavaScript\gulpjs\gulp-primeros-pasos>
npm install --save-dev gulp
npm install --save-dev gulp-concat
npm install --save-dev gulp-uglify

secuencia de uso

  • tiene que estar npm instalado
    • npm -v
  • luego se instala gulp
    • npm install -g gulp
  • se comprueba que esta instalado
    • gulp -v
  • se crea el proyecto npm con
    • npm init
  • esto muestra una secuencia de preguntas que ayudan a crear, en el directorio, un archivo llamado package.json o a modificarlo si ya existe
  • se descargan los módulos necesarios con
    • npm init
    • esto crea el directorio npm_modules vacio
  • lo primero es cargar el módulo para gulp
    • npm install --save-dev gulp
    • esto descarga en node_modules el módulo para gulp y todos los modulos necesarios para usarlo
    • todo se resuelve con las dependencias declaradas en los archivos package.json que cada módulo tiene
  • lo que hace gulp se define en un archivo llamado gulpfile.js

gulpfiles

  • concatena y minifica los archivos con extensión js que están en la ruta js/source/*.js en un único archivo en la ruta js/build
  • antes hay que cargar los módulos npm install --save-dev gulp-uglify y npm install --save-dev gulp-concat
/*
* Dependencias
*/
var gulp = require('gulp'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify');

/*
* Configuración de la tarea 'demo'
*/
gulp.task('demo', function () {
  gulp.src('js/source/*.js')
  .pipe(concat('todo.js'))
  .pipe(uglify())
  .pipe(gulp.dest('js/build/'))
});

plugins

  • los plugins oficiales
  • interesante post sobre plugins y como usarlos.

post interesantes