En un mundo ideal, todo desarrollador web utilizaría herramientas que le permitan automatizar las tareas repetitivas que aparecen todos los días en el proceso de construcción. Gulp.js es una de ellas y su objetivo es generar código para erradicar este pequeño, pero tedioso, problema. Puede ayudar en procesos como minificar CSS y JavaScript, validación de sintaxis, prefijar propiedades CSS automáticamente, disminuir el tiempo de carga de la web, entre otras. Gulp.js nos ahorrará mucho tiempo tiempo y nos permitirá concentrarnos en lo importante. De esta manera, nuestro flujo de trabajo mejorará de manera significativa. Este automatizador de tareas está hecho en JavaScript y utiliza el módulo Stream de Node.js. Pero, ¿qué es un Stream? Es una herramienta que permite leer fácilmente los datos de una fuente y llevarlos a un lugar de destino utilizando el método de tuberías (pipes). Dependiendo de los métodos implementados, un Stream puede ser:
La principal característica de Gulp.js es que no escribe archivos ni capetas temporales en el disco duro; a diferencia de otros automatizadores en el mercado. Y, gracias a esto, puede lograr un alto rendimiento.
Gulp.js puede instalarse en Windows, Mac OS X o Linux. Y el proceso es similar en cualquiera de estos sistemas operativos; la única diferencia es que en Mac OS X y Linux debes anteponer la palabra sudo en el código. Para poder hacer la instlación es necesario tener Node.js instalado previamente. Puedes descargarlo en su web oficial aquí. Ya con Node.js en tu máquina, abre una consola y escribe la siguiente línea que iniciará el proceso de instalación de Gulp.js:
Windows
npm install –g gulp
Mac OS X – Linux
sudo npm install –g gulp
Debemos esperar a que termine el proceso y el siguiente paso es verificar si se instaló correctamente. Para comprobarlo escribe la siguiente línea:
gulp –v
Si lo hicimos bien, veremos la versión de Gulp.js instalada en nuestra máquina:** CLI versión 3.9.0**
¡Perfecto! Ya tenemos Gulp instalado.
Para entender el uso de esta herramienta y sus partes, haremos un ejercicio sencillo que describa todo el proceso paso a paso:
Con este comando se comenzará a generar un archivo llamado package.json. En el proceso, el sistema nos pedirá ingresar los siguientes datos:
Sin embargo, para este ejercicio sólo agregaremos Name, Description y Author. Los otros elementos podemos saltarlos presionando la tecla Enter. 
El archivo package.json ya fue creado y aparecerá dentro de la carpeta Miproyecto. Y contendrá la información básica que ingresamos previamente. Si abrimos este archivo con cualquier editor, el contenido del archivo lucirá así: 
JS utiliza un sistema de tareas basado en dependencias. Esto quiere decir que podemos definir cada actividad indicando de qué otras actividades o tareas depende. Para que nuestro proyecto funcione correctamente debemos agregarlas.
Seguro notaste que al final de cada comando agregamos la línea –save-dev. Esto lo hacemos porque si no la utilizamos, npm no agregará estas dependencias a nuestro archivo **package.json. ** Después de instalar todas las dependencias, nuestro archivo json ahora se verá de la siguiente manera: 
Ahora veremos las dependencias que agregamos bajo devDependencies: 
Ahora, para demostrar las capacidades de Gulp.js, crearemos un nueva carpeta llamada js. Dentro de ella crearemos otra carpeta más que llamaremos **source. **Es importante que creemos estas carpetas dentro de Miproyecto. En la carpeta source crearemos dos archivos con extensión .js. Los nombraremos **codigo1.**js y codigo2.js; y tendrán el siguiente código:
[javascript] $(document).ready(function(){ $("#demosMenu").change(function(){ window.location.href = $(this).find(“option:selected”).attr(“id”) + ‘.html’; }); });
[/javascript]
[javascript] var sections = $$(SECTION_SEL); for(var i = 0; i <sections.length; i++){="" var="" index=“i;” section=“sections[i];” that=“section;” slides="$$(SLIDE_SEL," section);="" numslides=“slides.length;” if(!index="" &&="" $(section_active_sel)="==" null)="" {="" addclass(section,="" active);="" }="" if="" (typeof="" options.anchors[index]="" !="=" ‘undefined’)="" section.setattribute(‘data-anchor’,="" options.anchors[index]);="" if(hasclass(section,="" active)){="" activatemenuandnav(options.anchors[index],="" index);="" }<="" p="">[/javascript] Hasta este punto ya casi tenemos todo configurado. Lo único que nos falta es agregar las tareas que queremos hacer con Gulp.js. ¿Recuerdas el archivo gulpfile.js que creamos al inicio? Debemos abrirlo y añadir las siguientes líneas de código que explicaré debajo: [js] /* * Dependencias / var gulp = require(‘gulp’), concat = require(‘gulp-concat’), uglify = require(‘gulp-uglify’); / * Configuración de las tareas ‘demo’ / gulp.task(‘demo’, function () { gulp.src('js/source/.js’) .pipe(concat(‘compilacion.js’)) .pipe(uglify()) .pipe(gulp.dest(‘js/build/’)) }); [/js] En este archivo package.json definimos las siguientes dependencias:
Estas son las actividades y elementos que necesitamos en nuestro proyecto. Si agregamos más elementos como, por ejemplo, la dependencia – plugin de Stylus; este aparecerá en esta sección de nuestro código. Con el método gulp.task definimos una tarea. Este toma 3 argumentos: el nombre de la tarea, la o las tareas que dependen de esta tarea y la función que llama a esta tarea. También es posible realizar varias tareas de manera simultánea o definir qué tarea quieres realizar si una tarea anterior a terminado. Por ejemplo:
gulp.task(‘js’, [‘css’], function () {
El contenido de mi tarea js se ejecutará sólo cuando la tarea css haya terminado. El método gulp.src(‘js/source/*.js’), que hace referencia a gulp.src(globs[, options]), toma como valor un parámetro globs. Los globs pueden ser tipo cadena o arreglos y devuelven un Stream que luego será canalizado por un pipe(). Gulp.js usa el paquete de Node.js node-glob para obtener los archivos y existen distintos métodos de utilizarlo. En este caso, usaremos el método pipe para leer y tomar un archivo y llevarlo a otra ubicación. Este debe ser leíble y editable para poder moverlo. En nuestro ejemplo, utilizamos tres veces este elemento para realizar el proceso de tomar el archivo y aplicarle los cambios que le hemos pedido.
¡Y ya tenemos todo listo! Para finalizar con este proceso, debemos escribir en nuestra consola la siguiente línea de código, tomando en cuenta que debemos ubicarnos en la ruta de nuestro proyecto: gulp miproyecto
Si ves esta pantalla, quiere decir que el proyecto se ha compilado de manera exitosa. Si ahora vamos a la ubicación **C:\Miproyecto\js\build, **encontraremos un archivo llamado compilacion.js y al abrirlo tendrá este aspecto: [js]$(document).ready(function(){$("#demosMenu").change(function(){window.location.href=$(this).find(“option:selected”).attr(“id”)+".html"})});for(var sections=$(SECTION_SEL),i=0;i<sections.length;i++){var index=“i,section=sections[i],that=section,slides=$(SLIDE_SEL,section),numSlides=slides.length;index||null!==$(SECTION_ACTIVE_SEL)||addClass(section,ACTIVE),“undefined”!=typeof” options.anchors[index]&&(section.setattribute(“data-anchor”,options.anchors[index]),hasclass(section,active)&&activatemenuandnav(options.anchors[index],index))}[="" js]="" gulp.js="" nos="" facilitará="" la="" vida="" permitiéndonos <strong="">optimizar distintos procesos. No importa si eres desarrollador Front-end o Backend, Gulp.js es una herramienta que te ahorrará muchos problemas a la hora de crear un proyecto web. Si quieres saber más de esta y otras herramientas que optimizarán tu código, no te pierdas el Curso Profesional de Front-end de Platzi.</sections.length;i++){var></sections.length;>
Tengo problemas en la instalación dé gulp, hago exactamente todo, pero este me arroja tres advertencias y vulnerabilidades.
y cuando ejecuto gulp -v me sale esto:
Además intente hacer algunas tareas y solo pasa esto:
Aun cuando todo lo que espero es un console.log( );
Necesito ayuda esto comienza a ser frustrante, por que no encuentro respuestas en ningún lado.
Para saber la version debes ejecutar esto:
Seguramente tienes una version menor a la 4.0, te recomiendo que instales la ultima version, asi:
Por ultimo trata de ejecutar una tarea simple como esta:
const { task } = require('gulp') task('hello', async () => { console.log('Hello world') })Ejecutando
gulp hellodeberia funcionar.De todas maneras acá dejo la documentación
¿por qué cuando intento correr mis tareas en Gulp con el comando “gulp” me aparece el siguiente error?
elmachado@elmachado-PC:~/Documents/platzigram-6/platzigram$ gulp
module.js:538
throw err;
^
Error: Cannot find module 'internal/util/types’
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at evalmachine.<anonymous>:31:26
at Object.<anonymous> (/home/elmachado/Documents/platzigram-6/platzigram/node_modules/graceful-fs/fs.js:11:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions…js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
este es mi archivo gulpfile.js
var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var rename = require(‘gulp-rename’);
gulp.task(‘styles’, function () {
gulp.src(‘index.scss’)
.pipe(sass())
.pipe(rename(‘app.css’))
.pipe(gulp.dest(‘public’));
})
gulp.task(‘assets’,function(){
gulp.src(‘assets/*’)
.pipe(gulp.dest(‘public’));
})
gulp.task(‘default’, [‘styles’])