A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Ejecutar tareas

9/15
Recursos

Aportes 43

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Puedes tambi茅n especificar scripts con el prefijo 鈥減re鈥 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.

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.

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.

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

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/

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

Para usuarios Windows:
Si les aparece un error al ejecutar 鈥渘pm 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 鈥渘px鈥 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

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 ^^

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
.

  • 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"
    }
    

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聽)

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

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```

Listo
Hay que correr antes

npm install
npm start
npm run deploy

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

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"

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.

Por si alguien quiere conocer m谩s sobre los scripts de NPM aqu铆 les dejo la documentaci贸n oficial de NPM 馃槂

La ventana se me congela despues de esto, no termina de ejetucar el comando. Que puede ser?

Hay muchos conceptos que desconozco en este curso como, que es lo que hacen cada script, que significa mandar a producci贸n y un gran etc. Es normar? Es algo que tengo que ver yo mismo en la documentaci贸n? O me salte alg煤n curso de fundamentos que no he visto? Ayuda porfa no me gusta el sentimiento de no entender y de no saber el porque de las cosas. Gracias 馃槉

A medida que vamos creando scripts, es posible que queramos realizar tareas concretas antes o despu茅s de ejecutar un script determinado. Esto es posible simplemente creando una tarea con el prefijo pre o el prefijo post respectivamente.

Veamoslo con el ejemplo anterior:

"scripts": {
  "start": "parcel src/index.html",
  "predeploy": "parcel build src/index.html -d build --public-url /frontend-project/",
  "deploy": "gh-pages -d build"
}

El script deploy sube a GitHub Pages el contenido de la carpeta build. Como queremos que est茅 actualizada, creamos un script predeploy (que se ejecutar谩 antes) y que ejecutar谩 parcel para generar el contenido de esa carpeta build antes de subirlo, y de este modo est茅 todo actualizado.

De la misma forma se podr铆a hacer con el prefijo post para tareas posteriores de finalizaci贸n.

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

Aqui jugando con el npm 馃槄

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "saludo": "echo \"Hola\"",
    "frase" : "npm run saludo && echo \"Trabajando duro y durando en el trabajo\""
  },
npm run frase

como backend developer me gusta agregar estos scripts en mi proyecto:

{
  "scripts": {
   "start": "node src/"
   "dev": "nodemon"
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix",
    "test": "jest",
    "test:cover": "npm test -- --coverage",
    "coveralls": "cat ./coverage/lcov.info | coveralls"
  }
}

y esos comandos los puedes correr en tu pipeline de CI/CD

Para los que le sale error al querer correr 鈥榥pm run deploy鈥 o 鈥榥pm start鈥 primero hay que poner:

npm install

Ayuden 馃槮

> [email protected]1.0.0 start
> webpack-dev-server --open --mode development --port 3002

"webpack-dev-server" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.

Al correr el script npm start me sale el siguiente error. 驴C贸mo puedo arreglarlo?

npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\11.13.0\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> [email protected]1.0.0 start C:\Users\Cristobal\Documents\Cursos programaci贸n\Curso NPM\react-base
> webpack-dev-server --open --mode development

"webpack-dev-server" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 start: `webpack-dev-server --open --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Cristobal\AppData\Roaming\npm-cache\_logs\2020-06-21T17_26_11_778Z-debug.log```

Los scripts en NPM son comandos que podemos establecer para poder ejecutar en la console. Podemos ver sus OUTPUT Segun sea el caso.

podemos crear cualquier cantidad de Scripts, correran de forma nativa dentro de la terminal. Para agregar en el Package.json en la parte de scripts, le agregamos nombre que sera la formula en la que llamamos a los comandos.

"nombre" : "comandos a ejecutar"

Podemos utilizar varios comandos o incluso scripts ya creados dentro de otro comando. Es como un tipo de alias del CMD pero dentro del proyecto.

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.

Notas 馃摑

  • Para crear un script la estructura es la siguiente:
    "nombre del script": "comando",

  • Tambi茅n podemos concatenar comando
    "nombre del script": "comando && otro comando",

.
Para ejecutarlos solamente hay que ir a nuestra terminal y poner el nombre del script.

Podemos pasar argumentos a nuestros scripts configurados en package.js
.

npm run <command> [-- <args>]

En la documentaci贸n de NPM puedes encontrar la informaci贸n detallada acerca de c贸mo funcionan los scripts 馃槃

B谩sicamente, los scripts son como tipo shortcuts; nos ayudan a crear comandos con nombres personalizados que ejecuten un c贸digo o comandos en particular 馃槈

No olviden primero hacer 鈥渘pm install鈥 para instalar todos los modulos que vienen en el repositorio que clonamos.

Ejecutar tareas

Se pueden agregar 鈥渟cripts鈥 que permiten ejecutar un comando o una serie de comandos en la terminal con npm.

Ejemplos

"scripts": {
	"hola": "node",
	"deploy": "npm run format && npm run build"
}

Antes de ejecutar cualquier script escribe en la terminal

npm install

Esto, porque puede pasar que no tengas las dependencias instaladas en local.

Para esta clase, clonaremos un repositorio de GitHub en una carpeta diferente

git clone https://github.com/gndx/react-base.git

Scripts

Los scripts en NPM son comandos que podamos establecer para poder ejecutar desde la consola de forma nativa. Estos nos van a dar una serie de salidas (outputs) depende de cual sea el caso.

Nosotros podemos crear la cantidad de scripts que necesitemos. En este caso, crearemos dos scripts en el package.json del proyecto de React que clonamos. Estos son 鈥渄eploy鈥 y 鈥渉ola鈥

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --open",
    "format": "prettier --write '{*.js,src/**/*.{js,jsx}}'",
    "lint": "eslint src/ --fix",
    "deploy": "npm run format && npm run build",
    "hola": "node"
  },

Luego, instalamos todas las dependencias para que pueda funcionar:

npm install

De esta forma, podemos correrlos en la consola.

npm run deploy
npm run hola

Y listo, ahora ver铆amos los outputs que producen esos scripts.

Hay ciertos comandos por defecto

npm start

Este comando iniciar铆a nuestro proyecto.

npm test

Este comando ejecuta todo lo que est茅 dentro de test.

Ya hab铆a visto los scripts en otros cursos, realmente facilitan mucho m谩s el proceso en JavaScript, en mi opini贸n son una excelente pr谩ctica

Si lo corriste y te dio un mont贸n de errores puede ser porque tienes que instalar los paquetes con npm install
jeje

  • En la secci贸n del archivo package.json, los scripts en npm son comando que podemos establecer para ejecutar desde la consola (build, start, format, test).
Sigamos!

hasta el momento me esta costando entender siento que si no estoy en un proyecto real no lo entender茅 por completo.

cual es la diferencia de tener dependencias en produccion y en desarrollo no termino de entender esa parte.