Ejecutar tareas

Clase 10 de 18 • Curso de Gestión de Dependencias y Paquetes con NPM

Resumen

El apartado de "scripts" en el package.json es el que indica los comandos a ejecutar del proyecto. Esta sección es la que utilizarás para crear comandos que optimicen el desarrollo de tu aplicación.

Crear un comando en tu proyecto

Para crear un comando en tu proyecto sigue la siguiente estructura, donde <nombre> es el nombre del comando que debería ser muy descriptivo y <comando> es el comando que utilizarías en la terminal:

{
    "scripts": {
        "<nombre>": "<comando>"
    }
}

Una vez hayas escrito el comando en el archivo package.json, la manera de ejecutarlo será con el comando npm run.

Por ejemplo, creemos tres comandos para iniciar el proyecto (start), crear un archivo para producción (build) y combinarlos (deploy). Que no te preocupe si no entiendes cada comando, solo entiende cómo ejecuta NPM el script.

{
    "scripts": {
        "start": "webpack-dev-server --open --mode development",
        "build": "webpack --mode production",
        "deploy": "npm run format && npm run build"
    }
}

Y para ejecutarlos, es necesario utilizar el comando pertinente en la terminal:

$ npm run start
$ npm run build
$ npm run deploy

Contribución creada con aportes de: Andrés Guano.

Buzu B

student•

Puedes también especificar scripts con el prefijo "pre" que se ejecutarán automáticamente antes del comando que ejecutaste. Por ejemplo, si defines el comando build y prebuild, cuando corras npm run build el comando prebuild se ejecutará primero. Esto sirbe para poder ejecutar tareas que hagan algún tipo de preparación necesaria para correr el comando principal. Sin embargo, hay que hacer notar que si el comando pre falla (retorna un valor que no es 0) el comando principal no se ejecutará. Esto es algo bueno ya que si nuestro proceso de preparación no se realiza de forma exitosa, puede que tengamos problemas al querer ejecutar la tarea principal.

En algunas ocaciones, sin embargo, la tarea previa puede fallar sin que eso afecte la ejecución de la tarea principal. En esos casos puedes usar || exit 0 para retornar 0:

"presass-build": "(rm css/*.css; rm css/*.css.map) || exit 0"

Ese es un ejemplo de un comando que hice hace un tiempo. rm puede fallar si el directorio css está vacio, y en ese caso no hay problema, la tarea principal puede funcionar sin ningún problema ya que presass-build tiene el propósito de vaciar ese directorio.

Oscar Barajas Tavares

Team Platzi•

Muy buena explicación y sin duda falto añadirla en el flujo. gracias.

Buzu B

student•

Gracias, algo que también faltó mencionar es que npm run agrega el directorio ./node_modules/bin/ al PATH de modo que para ejecutar un comando no es necesario agregar la ruta completa. Esto es algo que hace tiempo me confundió, cuando vi que Laravel ejecuta un comando setenv y yo quice buscarlo en mi computadora con which setenv y resultó que el comando no existía. Esto es porque en realidad el binario está ubicado en node_modules/bin/

Karla

student•

Los scripts NPM: Son comandos que podemos establecer para poder ejecutar desde la consola. Estos nos van a dar una serie de salidas según sea el caso.

Podemos crear la cantidad de scripts que necesitemos. Estos scripts van a poder correr de forma nativa dentro de nuestra terminal.

Platzi Team

student•

Gracias por el aporte compañera

jorge llanque

student•

Osea que es como si fueran shortcuts ?

Alan David R.L.

student•

A mi me gusta crear tres scripts.

"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"start": "serve ./dist -s -l 8080"

dev: Modo desarrollo.
build: Compila todo y me crea un directorio dist.
start: Toma el directorio dist y lanzo un servidor en modo producción.

Ricardo Martínez Murillo

student•

muy efectiva practica!

Christian Velázquez

student•

Gracias por sus recomendaciones.

Jesús Henríquez

student•

Si te aparece un error al ejecutar el comando:

npm run deploy

Posiblemente es porque no se han instalado las dependencias del proyecto, esto lo puedes solucionar ejecutando:

npm install

Y luego si puedes ejecutar el comando deploy e iniciar el proyecto con start

Angel Hernandez

student•

gracias pero me sale esta alerta: found 591 vulnerabilities (577 low, 3 moderate, 10 high, 1 critical) crees tu que eso esta bien o es mejor no instalar, no se, que hacer?

Jesús Henríquez

student•

Hola @Dariaux95, esa alerta la puedes resolver comúnmente con:

npm audit fix

Aunque algunas dependencias se actualizaran a la ultima version con el parche que resuelve las vulnerabilidades, habrán algunas que te pedirá que las actualices manualmente desde el package.json.

Te recomiendo que valides si al actualizar las dependencias la aplicación final sea compatible con esas nuevas versiones.

William Schnaider Torres Bermon

student•

Organización y scripts en paralelo Conforme vamos creando scripts en el package.json, nuestra sección de scripts se puede ir complicando y haciendo más grande, por lo que conviene mantenerla organizada. Además, también puede entrar en juego la necesidad de crear scripts que ejecuten múltiples tareas de forma simultánea, o crear comandos que funcionen en sistemas como GNU/Linux y Mac, pero también en Windows. Para todo ello, existe un paquete llamado npm-run-all que nos permite realizar esto, entre otras cosas.

Lo primero, es instalar el paquete npm-run-all en nuestro proyecto. Lo instalaremos como dependencia de desarrollo, puesto que es para gestionar proyectos NPM y no tiene relación con la web definitiva en producción:

npm install --save-dev npm-run-all

Una vez instalado, si necesitamos que se ejecuten múltiples tareas que queremos realizar de forma independiente podemos agruparlas con un namespace utilizando los dos puntos : y luego ejecutar el grupo entero con un npm-run-all <namespace>:*:

"scripts": {
  "build": "npm-run-all build:*",
  "build:html": "pug src/index.pug ...",
  "build:css": "postcss src/index.css ...",
  "build:js": "rollup src/index.js ..."
}

Por defecto, estas tareas se ejecutan secuencialmente. Es decir, hasta que la primera no termine, no se ejecutará la siguiente. Esto puede ser alterado utilizando el flag -p (parallel) a npm-run-all:

"scripts": {
  "dev": "npm-run-all -p dev:*",
  "dev:html": "pug --watch src/index.pug ...",
  "dev:css": "postcss --watch src/index.css ...",
  "dev:js": "rollup --watch src/index.js ..."
}

Fuente: https://lenguajejs.com/npm/administracion/scripts-de-npm/

Gonzalo Amador Hernández

student•

Muchas gracias este fue un gran aporte!!!!!! de verdad!!!

Andres Roberto Coello Goyes

student•

Normalmente yo creo 3 script ( DEV ) significa modo desarrollo o develomenp. ( BUILD ) significa contruccion de tu proyecto, se compila lo necesario para pasar de desarrollo a produccion. ( START ) significa que corre en produccion

pero puedes crear tus propios script y ¿ como hacer que funcionen ? eso depende del lenguaje o framework que estes utilizando por ejemplo en node js: NODE_ENV=Production

Oscar Barajas Tavares

Team Platzi•

Me gusta la recomendación, yo en lo personal solo utilizo start y build

Carlos Eduardo Gomez García

teacher•

Añadir comandos a npm suele ser buena idea pues nos ayudan a tener shortcuts de comandos más largos, lo genial es que frameworks como Vue ya traen pre escritos estos comandos para que solo nos preocupemos en desarrollar ^^

Ronny Valdivieso

student•

Para usuarios Windows: Si les aparece un error al ejecutar "npm run format", quiten las comillas simples del script para que les quede de la siguiente manera:

prettier --write {*.js,src/**/*.{js,jsx}}

Si al volver a ejecutar les aparece el mensaje:

prettier : El término 'prettier' no se reconoce como 
nombre de un cmdlet......

Pueden hacer dos cosas:

Agregar "npx" al inicio del script

npx prettier --write {*.js,src/**/*.{js,jsx}}

O instalar prettier con el siguiente comando (esto instalará otra versión):

npm install --save-dev --save-exact prettier

Juan Felipe Barahona Gonzalez

student•

muchas gracias!!!!

Diego Artiles

student•

Como enviar parámetros al comando interno

. Por ejemplo npm run build ejecuta internamente webpack --mode production, si quisieramos agregarle otro parametro desde npm a webpack tendremos que usar dobles guiones "--" seguido del parametro que recibirá nuestro comando interno. . Entonces tendríamos lo siguiente npm run build -- --env NODE_ENV=local lo que internamente sería webpack --mode production --env NODE_ENV=local aunque no tengamos especificado el parámetro --env en el package.json . Este ejemplo puede ser útil para tener un solo comando para hacer un build en distintos environments sin necesidad de crear los tipicos scripts de: . npm run build:development npm run build:staging npm run build:production .

Levi Nuñez

student•

Ejecutar tareas o script los cuales son comando que podemos establecer y ejecutar desde la consola, y podemos crear los que necesitemos además van a correr de forma nativa dentro de nuestra terminal, para nombrarlo debe ser un shortcut de lo que vamos a ejecutar con npm run <script-name>

"scripts": {
	"build": "webpack --mode production",
	"start": "webpack-dev-server --open --mode development",
	"format": "prettier --write '{**.js,src/**/*.{js,jsx}}'"
	"lint": "eslint src/ --fix",
	//aqui podemos concatenar dos comandos
	"deploy": "npm run format && npm run build"
}

William Schnaider Torres Bermon

student•

Basta con ejecutar npm run <tarea> para ejecutar un script concreto de nuestro package.json. Si no recordamos los nombres de los scripts o estamos trabajando en un proyecto ajeno del que aún no conocemos los scripts, podemos ejecutar el comando npm run (sin nombre de tarea) y nos mostrará las tareas disponibles:

# Muestra los scripts incluidos en el package.json
$ npm run```

Gonzalo Amador Hernández

student•

nice!!!!

Stephany Plaza

student•

buenardo

William Schnaider Torres Bermon

student•

Source: https://lenguajejs.com/npm/administracion/scripts-de-npm/

Carlos Eduardo Diaz Polanco

student•

Los scripts Los scripts npm son comandos que npm ejecutará cuando se le llame con los argumentos adecuados. El poder y la sensación de esto es NO instalar los paquetes npm de manera global contaminando su entorno.

La diferencia entre las secuencias de comandos pre-reconocidas y personalizadas se basa en la palabra de run entre las etiquetas, las secuencias de comandos custom deberán run entre npm y el nombre de la secuencia de comandos

En función de esto, podemos diferenciar y crear diferentes tareas o scripts para ejecutar con npm.

Dado el siguiente ejemplo en el archivo package.json :

{
  "name": "MyApp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "mocha --recursive ./tests/",
    "test:watch": "npm run test -- -w",
    "start": "nodemon --inspect ./app.js",
    "build": "rm -rf ./dist/ && gulp build"
  }
}

Podemos ver diferentes tareas a ejecutar:

npm test bien ya que es un script pre-reconocido
npm run test bien ya que es una forma válida de ejecutar un script npm
npm run test:watch también funcionaría, y se llama prueba de ejecución de npm dentro de sí mismo
npm run build Antes de ejecutar gulp build elimine la carpeta dist que se encuentra en el directorio (suponiendo que esté en Linux o que se reconozca el comando rm )

Jimmy Buriticá Londoño

student•

Muy detallada tu explicación. Gracias.

David Salcedo

student•

Me gusta este resumen.

Juan Gui Arenas

student•

Hola ¿Que significa llevar un proyecto a produccion?

Dani Landa

student•

¡Hola Juan! En la vida real, es decir, en los trabajos :P El código se trabaja en una area para llama pre-producción para hacer ahí todo el testing y ver si realmente el el código y el programa está funcionando como se desea. Cuando pasa las pruebas de los testers, se sube, copia, duplica (depende de la arquitectura del software) se pasa a producción, es decir, a otro server.

¡Saludos!

Mauricio Aquino

student•

Si no quieren escribir en la terminal, en vs code con un click puedes correr tus scripts, solo dale a los 3 puntitos y habilitas "NPM scripts"

Stephany Plaza

student•

que genial

Jose Manuel Montaño Saenz

student•

Ejecutar tareas

En nuestro archivo package.json encontramos una sección llamada scripts donde podemos nombrar comandos que apuntan a sentencias usadas a lo largo del proyecto. Estos comando pueden recibir cualquier nombre y contener cualquier sentencia.

{
  scripts: {
    bulid: node index.js,
    test: eslink --fix
  }
}

Para acceder a estas sentencias, debemos correr el siguiente comando_

npm run build 
npm run test

José María Cuevas Ramírez

student•

Por si alguien quiere conocer más sobre los scripts de NPM aquí les dejo la documentación oficial de NPM :)

Stephany Plaza

student•

gracias

DAVID EDUARDO BAEZ SANCHEZ

student•

Listo Hay que correr antes

npm install
npm start
npm run deploy

Andres Geovani Salamanca Martinez

student•

error tras error me sale :(

Rafael Lizarraga

student•

Hola Platzi! ¿Cómo va? Estoy armando una carpeta de Google Docs con la toma de notas de todos los cursos que voy realizando para que entre todos podamos aportar!

Los invito a participar! https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing

Francisco Javier Suarez Verdugo

student•

Interesante como podemos establecerlos de tal forma que nos ahorra escribir nuevamente comandos para así tener una lista organizada y abreviada de los más importantes.

Ejecutar tareas

Introducción a NPM

¡Renovamos este curso de NPM!

Acerca de NPM, paquetes y módulos

Instalación

Cómo instalar un NPM en Windows

Cómo instalar un NPM en Mac

Configuración

Iniciar un proyecto

Instalación de dependencias

Instalación de dependencias con force

Cómo actualizar y eliminar paquetes

Package lock y el uso los símbolos ^ y ~

Ejecutar tareas

Solución de problemas en proyectos con NPM

Gestionar la seguridad en proyectos con NPM

Publicar un paquete

¡Renovamos este curso de NPM!

¡Renovamos este curso de NPM!

Crear un paquete para NPM

Publicar un paquete en NPM

Paquetes privados

Cierre del curso

Tomar examen

Crear un comando en tu proyecto