¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Ejecutando scripts con npm

A menudo usamos nuestro fichero package.json para almacenar dependencias de nuestro proyecto, bien sean de desarrollo o del propio proyecto.

Pero ¿sabías que se pueden definir scripts en package.json para realizar acciones? Quizá sí, quizá no. Pero si no lo sabías quizá quieras seguir leyendo este artículo. Ten en cuenta que en este artículo solo vamos a ver los usos más básicos sin entrar en nada excesivamente técnico.

Los scripts nos permiten realizar multitud de acciones y para muchos (entre los que me incluyo) han venido a sustituir a grunt o gulp ya que nos permite realizar multitud de acciones.

Vamos a crear un directorio vacío y vamos a ejecutar lo siguiente:

$ npm init

Esto nos hará una serie de preguntas y, al final, nos habrá creado un fichero package.json que se parecerá a este:

{
  "name": "npm-scripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Si nos fijamos bien, vemos que hay una clave que dice scripts y que ya hay uno definido: test. Vamos a ver qué pasa si ejecutamos npm test:

$ npm test

> npm-scripts@1.0.0 test /Users/alaguna/Projects/npm-scripts
> echo "Error: no test specified" && exit 1

Error: no test specified  
npm ERR! Test failed.  See above for more details.  
npm WARN Local package.json exists, but node_modules missing, did you mean to install?  

Bien, hace justo lo que dice la clave, echo \"Error: no test specified\" && exit 1. Si cambiamos a esto "echo \"Aun no hay tests\"" el resultado es, como cabría esperar, diferente.

$ npm test

> npm-scripts@1.0.0 test /Users/alaguna/Projects/npm-scripts
> echo "Aun no hay tests"

Aun no hay tests  

Invocando scripts

Aunque ya has visto algo, los scripts con nombre start y test son especiales. El resto de scripts necesitan ejecutarse de la siguiente forma:

$ npm run NOMBRE_SCRIPT

Es decir, tenemos que añadir run. Veamos qué más podemos hacer con los scripts.

Pre y Post

Vamos a cambiar los scripts por lo siguiente:

"scripts": {
  "presaludo": "echo \"Buenos dias\"",
  "saludo": "echo \"Le saludo\"",
  "postsaludo": "echo \"Me despido\""
},

Aquí tenemos un ejemplo de scripts que se ejecutan antes (con pre) y después (con post). De manera que si ejecutamos npm run saludo. Obtenemos lo siguiente:

$ npm run saludo

> npm-scripts@1.0.0 presaludo /Users/alaguna/Projects/npm-scripts
> echo "Buenos dias"

Buenos dias

> npm-scripts@1.0.0 saludo /Users/alaguna/Projects/npm-scripts
> echo "Le saludo"

Le saludo

> npm-scripts@1.0.0 postsaludo /Users/alaguna/Projects/npm-scripts
> echo "Me despido"

Me despido  

Por supuesto podrías ejecutar npm run presaludo y se ejecutaría con normalidad. Esto es comúnmente usado para, por ejemplo, antes de crear los ficheros compilados de una librería, borrar los anteriores, para asegurarnos que los ficheros y directorios sean limpios.

Invocando binarios

Hasta ahora, hemos visto ejemplos que consisten en ejecutar scripts declarados en package.json pero esto no hace falta. Cualquier comando que esté dentro de node_modules/.bin puede ser invocado desde npm run. Esto significa que podemos invocar comandos como mocha, jshint o incluso node-sass directamente desde ahí.

Aquí es sin duda donde vamos a sacar más provecho como ya veremos más adelante.

Combinando comandos

Hasta ahora hemos visto características que nos van a ser útiles pero más a menudo de lo que piensas, querrás hacer más de una cosa a la vez. npm también soporta esto. npm funciona ejecutando comandos en la línea de comandos. Esto nos permite usar cualquier cosa que puedas usar en la línea de comandos.

Por ejemplo:

"scripts": {  
  "clean": "rm -rf dist/",
  "prebuild": "npm run clean",
  "build": "echo \"Construyendo\""
}

Si ejecutamos npm run build, primero se ejecutará el script prebuild que, como ves, llama al script clean en sí. ¡Práctico!

Usando pipelines

Las pipelines nos permiten pasar los resultados de un comando a otro. Veamos un ejemplo sencillo:

"scripts": {  
  "build": "ls | head -3"
}

Aquí estamos diciendo:

  • Lista el contenido del directorio actual.
  • Pásaselo al siguiente comando.
  • Coge solo las tres primeras líneas.

Esto se vuelve útil cuando decimos cosas como: Coge el contenido de este comando y pásaselo a uglify para comprimir el código.

Usando &&

En ocasiones querremos ejecutar comandos si el comando anterior ha tenido éxito. Para ello podemos usar and: &&

"scripts": {  
  "build": "npm run build-js && npm run build-sass",
  "build-js":  "echo 'Haciendo JS'",
  "build-sass":  "echo 'Haciendo CSS con Sass'"
}

Aquí ejecutamos dos scripts que hemos declarado en el fichero package.json, en caso de que build-js fallara, build-sass no se ejecutaría.

Concurrencia

A veces querremos poder ejecutar varios comandos a la vez de manera concurrente. Para ello podemos usar & (uno solo) para ejecutarlos en segundo plano:

"scripts": {  
  "build": "npm run build-js & npm run build-sass",
  "build-js":  "echo 'Haciendo JS'",
  "build-sass":  "echo 'Haciendo CSS con Sass'"
}

Con este script, tenemos algo interesante. Al ejecutar npm run build, los dos scripts que estamos llamando se ejecutarían en paralelo. Si canceláramos el proceso, pulsando Ctrl+C, todos se detendrían a la vez ya que todos se ejecutan bajo el mismo proceso padre.

Conclusión

Como ves, con npm podemos hacer más que gestionar paquetes para Node. Configurándolo de manera adecuada, podemos añadir scripts que ejecutar a nuestro antojo. Como veremos más adelante, podemos usar todo esto en nuestro beneficio para poder librarnos de Gulp/Grunt y similares para compilar nuestros ficheros.

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!