Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Automatización de procesos

30/31
Recursos

Aportes 54

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Después de aprender sobre automatización de procesos.

Que es gulp.js? 📖🖥💥

Es una herramienta de construcción en JavaScript construida sobre flujos de nodos . Estos flujos facilitan la conexión de operaciones de archivos a través de canalizaciones . Gulp lee el sistema de archivos y canaliza los datos disponibles de un complemento de un solo propósito a otro a través del .pipe()operador, haciendo una tarea a la vez. Los archivos originales no se ven afectados hasta que se procesan todos los complementos. Se puede configurar para modificar los archivos originales o para crear nuevos. Esto otorga la capacidad de realizar tareas complejas mediante la vinculación de sus numerosos complementos. Los usuarios también pueden escribir sus propios complementos para definir sus propias tareas. Wikipedia.

👉 Empezando con Gulp.js
👉 Automatiza tu flujo de trabajo con GulpJS

Yo tuve problemas de dependencias obsoletas cuando instalé gulp-server-livereload:

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected]

Entonces decidí hacer el ejercicio con otra librería llamada browser-sync. Me costó, pero lo logré 😃. Aca comparto lo que hice:

Instalar gulp y browsersync como dependencias de desarrollo:

npm i -D gulp browser-sync

** Escribir el task ‘serve’ en gulpfile.js**

const gulp = require('gulp');
const browserSync = require('browser-sync').create();

gulp.task('serve', () => {
	browserSync.init({
		server: './www',
		port: 8000
	});

	gulp.watch('www/*.html').on('change', browserSync.reload);
});

Cuando se ejecuta ‘npm run serve’, browsersync inicializará un servidor en localhost:8000.
La clave aca es la línea del gulp.watch(). Básicamente gulp.watch() vigila los archivos ‘.html’ en ‘www/’. Si detecta algún cambio en esos archivos, el método ‘reload’ de browsersync recarga automáticamente el navegador.

Finalmente, escribí el archivo html de prueba en www/

<!DOCTYPE html>
<html>
<head>
	<title>Browsersync + Gulp</title>
</head>
<body>
	<h1>Hello moto!! from node. Finally works</h1>
</body>
</html>

Aca es importante que el alchivo tenga las etiquetas ‘<body></body>’, para que browsersync funcione correctamente.

Si les está generando error en wsl es porque la librería de livereload no es compatible, una solución para que al menos no les de error sería empezarla en false:

const gulp = require("gulp");
const server = require("gulp-server-livereload");

gulp.task("build", function (cb) {
  console.log("Construyendo el sitio");
  setTimeout(cb, 1200);
});

gulp.task("serve", function (cb) {
  console.log("Abrí la web");
  gulp.src("www").pipe(
    server({
      livereload: false,
      open: true,
    })
  );
});

Si a alguien le está dando problemas el serve en linux con un error como [ERR_FEATURE_UNAVAILABLE_ON_PLATFORM] es porque la opción de recursividad no es soportada en linux y porque en node > 14 y en la librería gulp-server-livereload es usado.

Un workaround rápido que encontré es simplemente cambiar la versión de node que se usa, si notan el profe está en Ubuntu pero usa una versión menor a la 14, para arreglarlo usé nvm cambiando la versión a una anterior.
Después de instalado puedes correr

nvm use <otra versión, como 12.8.4>

Tal vez un arreglo mejor es buscar otro servidor pero para seguir el curso esta es una opción super rápida

Al instalar ‘gulp-server-livereload’ me aparecen vulnerabilidades, no se resuelven con el ‘npm audit fix’,

estuve buscando soluciones pero no lo he logrado resolver
¿a alguien más le aparecen? Ayuda!!

¿Se podría reemplazar gulp por webpack?

Ahora estoy tan acostumbrado a usar el plugin live server de VSC, pero es genial ver como función por detrás y poder hacer mi propio server

El ejemplo de series podría ser útil cuando estas construyendo una web que necesita en el backend Express y en el frontend React, no? En este caso cómo sería ya que en ambos tiran un comandos tipo node express y node react

Excelente. Muy interesante los script en package.json

{
  "name": "automatizacion",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "gulp",
    "build": "gulp build",
    "serve": "gulp serve"
  },
  "author": "",
  "license": "ISC"
}
const gulp = require('gulp');
const server = require('gulp-server-livereload');

gulp.task('build', (callback) =>{
    console.log('Construyendo el sitio');
    setTimeout(() => {
        callback();
    }, 1200);  
});

gulp.task('serve', (callback) => {
    gulp.src('www')
        .pipe(server({
            livereload: true,
            open: true
        }));
})

gulp.task('default', gulp.series('build', 'serve'))

Hola, a alguien además del profesor y a mi, no se le muestran los cambios al modificar la etiqueta H1?
reinstalé el gulp-server-livereload… pero nada

El titulo de esta clase debería incorporar que se usa la herramienta Gulp, ya que si se usa el buscador para dar con material de gulp en Platzi, no aparece. Tiempo atrás viendo el tema de plantillas vi que algunas vienen automatizadas y usan gulp para ello. En todo caso con tanta herramienta comienzo a entender el concepto de la fatiga de Javascript.

Excelente la automatización!! Yo use Gulp en Laravel para compilar css, html y js

/*
  Trabajando automatizacion de procesos con gulp
*/
const gulp = require('gulp');
const server = require('gulp-server-livereload');

/*
  Iniciar una tarea con gulp, usando task que recibe dos parametros
  1. El nombre de la tarea.
  2. Un callback que tambien recibe un callback
*/
gulp.task('build', function(fn){
  console.log('Contruyendo el sitio');
  setTimeout(fn, 1200);
});

gulp.task('serve', function(fn){
  // pipe encadena streams
  gulp.src('www')
    .pipe(server({
      livereload: true,
      open: true
    }))
});

// Encadenar tareas
gulp.task('default', gulp.series('build', 'serve'));```

Automatización de procesos

Pueden ser:

  • Procesos de consola
  • Procesos con paquetes externos

Existen distintos módulos externos que nos ayudan en la automatización de procesos, sin embargo, gulp es una herramienta muy completa para este tipo de tareas.

Instalación

npm i gulp gulp-server-livereload

Utilización

  1. Importar el módulo en el archivo gulpfile.js .

    const gulp = require('gulp');
    
  2. Crear la tarea que se va a automatizar.

    gulp.task('build', (cb) => {
      console.log('Building the site');
      setTimeout(cb, 1200);
    });
    
  3. Crear un script personalizado en el package.json.

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "gulp build"
      }
    
  4. Correr el script.

    npm run build
    
    /* 
    Output:
    	> [email protected] build
    	> gulp build
    	
    	[16:15:03] Using gulpfile ~/personalProjects/course-nodejs-basis/src/tools/automatization/gulpfile.js
    	[16:15:03] Starting 'build'...
    	Building the site
    	[16:15:04] Finished 'build' after 1.21 s
    */
    

Otros scripts

```jsx
gulp.task('serve', (cb) => {
  gulp.src('www').pipe(
    server({
      livereload: false,
      open: true,
    })
  );
});```

Crea una tarea llamada serve y en la función utiliza métodos de gulp como el src que permite dar el inicio de la ruta del lugar dónde se obtiene la información. En este caso es un servidor y empieza por www.

Luego se concatena con el método pipe() la información que crea el módulo gulp-server-livereload que puede recibir algunas propiedades de configuración como livereload o open .

  1. En caso de querer ejecutar 2 tareas seguidas se puede hacer lo siguiente en el archivo gulpfile.js:

    gulp.task('default', gulp.series('build', 'serve'));
    

    El nombre default en el primer argumento de la tarea permite que no se deba poner nombre a esta, sino que sea la tarea a ejecutar por defecto.

    Y luego en el package.json deberás poner lo siguiente:

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "gulp",
      },
    

Si después de ejecutar

npm run build

aparece este mensaje de error:

> [email protected]1.0.0 build
> gulp build

fs.js:47
} = primordials;
    ^
ReferenceError: primordials is not defined

Solucionarlo con una actualización a gulp 4:

npm i [email protected]

Y no te olvides de incluir el build de gulp en el package.json:
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “gulp build”
}

a mi me da este error en la consola de comandos al ejecutar el comando npm run build no pegue la imagen por que no supe como

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 build: `gulp build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\miguel\AppData\Roaming\npm-cache\_logs\2020-07-29T03_45_33_395Z-debug.log
PS C:\Users\miguel\Desktop\curso_fundamentos_nodejs\automatizacion> ```

Si les sale un permission denied 127.0.0.1:8000 deben cambiar el puerto como se indica en el siguiente código:

const gulp = require('gulp');
const server = require('gulp-server-livereload');

gulp.task('build', function (cb) {
    console.log('Construyendo el sitio');
    setTimeout(cb, 1200);
});

gulp.task('serve', function(){
    gulp.src('www')
        .pipe(server({
            livereload: true,
            open: true,
            port: 8001
        }));
});```

Que el profe nos enseñe una nueva alternativa a GULP ya que al instalarlo cuenta con muchas vulnerabilidades, me parece ser que ya no es soportado.

No creo que sea buena idea implementarlo en un proyecto real.

Saludos.

¡como hubiera querida saber eso hace 4 años!

![](

Alguien mas le sale ese vaso rojo ??

para los que les arroja error al ejecutar el código cambiar a false

 livereload: false, 

A mi me daba el error cuando ejecutaba el npm run build pero encontre la solucion en foros y aqui les dejo la forma de solucionarlo.

  1. npm install gulp
  2. npm run build
  3. codigo listo.

Lo que yo hice para resolver lo del primordials es instalar las versiones exactas que tiene el profesor

npm i [email protected]4.0.2 [email protected]1.9.2

Gulp como forma de vida ♥

Como que ahora quiero meterle gulp hasta en la cocina

const gulp = require('gulp');
const server = require('gulp-server-livereload');

gulp.task('build', function(cb) {
    console.log('Construyendo el sitio');
    setTimeout(cb, 1200);
})

gulp.task('serve', function(cb) {
    gulp.src('www')
        .pipe(server( {
            liverload: true,
            open: true
        }
        ));
});

gulp.task('default', gulp.series("build", "serve"))

Si tu gulpfile se llama diferente puedes usar:
gulp --gulpfile ./tools/automate/gulpfile.js build

Me sale este error:

[16:09:11] 'serve' errored after 133 ms
[16:09:11] Error: listen EACCES: permission denied 127.0.0.1:8000
    at Server.setupListenHandle [as _listen2] (net.js:1262:19)
    at listenInCluster (net.js:1327:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1460:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:61:10)```

A mi me daba este error:

> gulp build

fs.js:36
} = primordials;
    ^

ReferenceError: primordials is not defined

Desde que quise ejecutar solo esto:

const gulp = require('gulp');

gulp.task('build', function(cb) {
    console.log('Construyendo sitio...');
    setTimeout(cb, 1200); 
})

Se resolvió cambiando la versión de node.js a una menor a la 12, con:

nvm install 10.24.1

Aquí la fuente y explicación que encontré.
En los comentarios vi que resolvieron un error diferente de la misma forma 😊

gulp, funcionalidad para crear un live server

Para los que les salga en la consola:

[10:53:47] No gulpfile found

Intenten crear un archivo gulpfile.js en la raiz del proyecto y de ahi, llaman a su gulpfile.js que este en otra carpeta y/o sitio y de ahi, corren los comandos mediante una funcion.

❤️

crazy!

XD

11 vulnerabilities (4 high, 7 critical)

Para no ver el molesto gift que distrae: dar scroll hacia abajo y dejarlo ahí, luego concentrarse en la clase. Técnica super avanzada 😃

super usar gulp

npm i gulp gulp-server-livereload

Aqui pueden encontrar otro ejemplo práctico. Aqui

Crei que gulp era un motor de plantillas simplemente 😮

Buen curso! , la verdad es que esta muy bien para aprender las herramientas de las que dispone NODE!

gulp

npm i gulp gulp-server-livereload 

gulp es mejor que webpack?

¿Por que aca con gulp.task no ocupa error first?

que hermosa clase :,

cual es el curso que le da mas enfoque a este tema?? de gulp o debo investigar en la documentacion de gulp?

esto reemplaza a PM2?

Excelente clase será de mucha ayuda…

tambien se puede utilziar mocha si no me equivoco

muy interesante como es el uso de gulp

Me encantó esta clase 😄

Gracias!