Después de aprender sobre automatización de procesos.
Conocer los conceptos básicos de NodeJS
Instalación de Node.js
Node: orígenes y filosofía
EventLoop: asíncrona por diseño
Monohilo: implicaciones en diseño y seguridad
Configurar las variables de entorno en Node.js
Herramientas para ser más felices: Nodemon y PM2
Cómo manejar la asincronía
Callbacks
Callback Hell: refactorizar o sufrir
Promesas
Async/await
Entender los módulos del core
Globals
File system
Console
Errores (try / catch)
Procesos hijo
Módulos nativos en C++
HTTP
OS
Process
Utilizar los módulos y paquetes externos
Gestión de paquetes: NPM y package.json
Construyendo módulos: Require e Import
Módulos útiles
Datos almacenados vs en memoria
Buffers
Streams
Conocer trucos que no quieren que sepas
Benchmarking (console time y timeEnd)
Debugger
Error First Callbacks
Manejar herramientas con Node
Scraping
Automatización de procesos
Aplicaciones de escritorio
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Automatización de procesos
30/31Recursos
Aportes 54
Preguntas 15
Ordenar por:
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
![Francisco Garcia [C6]](https://static.platzi.com/media/avatars/avatars/garciafran_c845c2fe-2ea4-42db-a305-a7f4ef13b0fd.jpeg)
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
-
Importar el módulo en el archivo
gulpfile.js.const gulp = require('gulp'); -
Crear la tarea que se va a automatizar.
gulp.task('build', (cb) => { console.log('Building the site'); setTimeout(cb, 1200); }); -
Crear un script personalizado en el
package.json."scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "gulp build" } -
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 .
-
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
defaulten 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.jsondeberá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.
https://openwebinars.net/blog/webpack-vs-gulp-comparacion-en-espanol-actualizado/
Este aporte de Julio Ramirez esta poderoso
¡como hubiera querida saber eso hace 4 años!
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.
- npm install gulp
- npm run build
- 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!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.