Ejecutar tareas

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.

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

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 )

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

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 ‘npm run deploy’ o ‘npm 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 “npm install” para instalar todos los modulos que vienen en el repositorio que clonamos.

Ejecutar tareas

Se pueden agregar “scripts” 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 “deploy” y “hola”

"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).

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.