Introducción a los scripts de NPM

NPM es un administrador de paquetes de Nodes. Es el Registro de Software más grande del mundo. Este registro contiene más de 800.000 paquetes de código. Muchos desarrolladores de código abierto usan npm para compartir software. Muchas organizaciones también usan npm para administrar el desarrollo privado.

Los «scripts npm» son las entradas en el campo scripts del archivo package.json . El campo de secuencias de comandos contiene un objeto donde puede especificar varios comandos y secuencias de comandos que desea exponer. Estos se pueden ejecutar usando el siguiente comando:

npm run <script-name>

Los scripts de NPM se utilizan para automatizar tareas como minimizar CSS, afear JavaScript, construir proyectos. Los scripts de NPM son versátiles y simples y, al aprender menos herramientas, podemos automatizar tareas en nuestro proyecto web.

Por ejemplo, este es nuestro archivo package.json.

{
  "name": "example",
  "scripts": {
    "test": "echo 'hello world'"
  }
}

y se puede ejecutar usando el siguiente comando:

npm run test

Esto es muy útil cuando tenemos tareas repetitivas y tenemos que automatizarlas.

Scripts de NPM dentro de otros scripts de NPM:

{
  "name": "example",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server" 
  }
}

Entonces, al usar npm start, ejecutará otro comando npm run lite, lite is lite-server. Entonces, el comando que se ejecuta es npm run lite-server, esto hará que se ejecute el servidor de Nodes.

El desarrollo y la implementación web requieren muchas tareas repetitivas, por lo que se necesitaban herramientas que automatizaran estas tareas.

Así que aquí hay algunas tareas que se pueden automatizar.

Tareas CSS:

  • Compilando Sass o Less en CSS.
  • Ejecutar Autoprefixer para agregar los prefijos de proveedores que se necesitan.
  • Minificación: eliminación de caracteres innecesarios (espacios en blanco, líneas nuevas, comentarios) del código fuente sin comprometer la funcionalidad.
  • Concatenación

Tareas de JavaScript:

  • JSHint: Comprobación del código JavaScript en busca de errores y problemas potenciales (análisis de código estático).
  • Concatenación
  • Uglificación: minificación + mutilación (reducir las variables locales a letras individuales).
  • Recomprobación de errores.

Proyecto de construcción:

  • Se pueden construir proyectos que consisten en todos los archivos y carpetas requeridos y varias dependencias.
  • algunos de los paquetes que se utilizan son rimraf, copyfiles, usemin, cssmin, htmlmin, uglifyjs.

Compresión de imágenes y sincronización del navegador:

  • Las imágenes se comprimen con imagemin.
  • El navegador se procesa automáticamente cuando se realizan cambios usando onchange, watch.

Publicación traducida automáticamente

Artículo escrito por hvrgupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *