bonus new member

https://librolibre.net/

masterjp

masterjp

¿Qué demonios son los comandos npm? | trucos CSS

npm es, como ya sabes, un administrador de paquetes. Pero similar a las herramientas anteriores que realizan tareas en la línea de comandos, como trueno y sorbonpm también puede realizar tareas, lo cual es perfecto para nosotros, porque ahora que instalamos el paquete Sass en el capítulo anterior, ¡podemos comenzar a usarlo!

📑 Aquí podrás encontrar 👇

Capítulos del manual

  1. ¿Para quién diablos es esta guía?
  2. ¿Qué diablos significa "npm"?
  3. ¿Qué diablos es la línea de comando?
  4. ¿Qué diablos es Nodo?
  5. ¿Qué diablos es un administrador de paquetes?
  6. ¿Cómo diablos se instala npm?
  7. ¿Cómo diablos instalas los paquetes npm?
  8. ¿Qué demonios son los comandos npm? (¡Estás aquí!)
  9. ¿Cómo diablos se instala un proyecto npm existente?

Saltar a comandos npm

Abrir package.json archivo en su carpeta de prueba y no verá mucho en este momento; solo un dependencies propiedad, con una sola dependencia hasta el momento:

{
  "dependencies": {
    "sass": "^1.43.4"
  }
}

EN package.json Sin embargo, el archivo alberga mucho más que solo dependencias: contiene mucha metainformación. sobre Su proyecto también Una de las partes más interesantes es una propiedad opcional pero extremadamente útil llamada scripts.

Recuerde que se rastrean todas las dependencias de Sass package-lock.jsonque se genera automáticamente y no necesita ser editado a mano. package.json normalmente contiene solo las dependencias de más alto nivel y podemos personalizarlo libremente.

EN scripts objeto en tu package.json El archivo le permite crear comandos que puede ejecutar en este proyecto para manejar diferentes tareas para usted, ya sea como un proceso único o continuo. Por lo general, estas "tareas" se usan para cosas como ejecutar un servidor de desarrollo local, compilar activos y/o ejecutar pruebas. De hecho, a menudo hay uno start o dev comando incrustado en proyectos de procesamiento todo tareas que puede necesitar realizar al mismo tiempo, como compilar Sass y JavaScript en la misma secuencia.

Todavía no tenemos ningún script para ejecutar, ¡pero arreglemos eso!

Artículo Recomendado:  La diferencia entre sockets web, trabajadores web y trabajadores de servicios | trucos CSS

Ejemplo: Compilar Sass en CSS

Dentro scripts Sección de package.json archivo, tenemos acceso a todos nuestros paquetes instalados. Aunque no podemos simplemente presentar sass comandos en la terminal ahora mismo, podemos empezar sass comandos como parte del script npm.

Podríamos correr sass comandos en la terminal si Sass se ha instalado globalmente, lo que significa en todo el sistema y no en una carpeta de proyecto específica.Hasta ahora hemos instalado Sass solo en esta carpeta (esto sucede de manera predeterminada cuando instala un paquete). Pero una instalación global serviría sass Comandos disponibles en todo el sistema.

Comience poniendo este bloque de código en el suyo package.json archivo inmediatamente después de abrir { corsé:

"scripts": {
  "sass:build": "sass style.scss style.css"
},

La sintaxis de JSON es muy estricta. Intente ejecutar el contenido del archivo usando un Validador JSON si se atasca.

Esto nos da acceso a npm run sass:build ¡un script que compilará Sass en CSS para nosotros!

El nombre del comando no es importante, siempre que sea una cadena continua. También vale la pena señalar que los dos puntos (:) no hace nada especial aquí; es solo una convención, ya que ambos build o sass en sí mismo probablemente sería demasiado general.

Si ha trabajado con comandos Sass antes, o si ha mirado hacia el futuro, probablemente sepa que esto significa que también debemos crear style.scss archivo en la raíz de nuestra carpeta de proyecto. Hagamos esto y agreguemos cualquier código Sass.

Captura de pantalla de la aplicación VS Code con el archivo style.scss abierto.  El archivo contiene una variable de color Sass y un selector anidado en tres niveles de profundidad.
EN style.scss El archivo se encuentra junto a los archivos JSON y node_modules carpeta en el nivel superior de la carpeta del proyecto.

Aquí está el código Sass que utilicé si quieres copiarlo y pegarlo:

$myColor: #ffd100;

.a {
  .nested {
    .selector {
      color: $myColor;
    }
  }
}

¡Estupendo! Guardar este archivo como style.scss en la raíz de su proyecto e intentemos ejecutar nuestro nuevo comando:

npm run sass:build

Una vez que se completa esta tarea, debería ver dos archivos nuevos que aparecen casi inmediatamente en la carpeta de su proyecto: style.css y style.css.map.

Captura de pantalla de la aplicación VS Code con el archivo style.scss abierto y el terminal abierto debajo con los comandos npm, incluido npm run sass: build.
despues de correr npm run sass:builddebería ver el archivo style.css y style.css.map aparecer en el nivel superior de la carpeta del proyecto.

Si quieres, puedes abrir style.css archivo, que contiene el código CSS compilado, para verificar si realmente es lo que esperamos:

Artículo Recomendado:  Cómo crear plantillas de temas de bloques en WordPress 6.0 | trucos CSS
Captura de pantalla de la aplicación VS Code con un archivo style.css compilado abierto que muestra cómo el comando npm para iniciar Sass procesó el código Sass en CSS normal.  Debajo hay una terminal abierta que muestra los comandos npm utilizados.
Mira esto, puro CSS!

EN sass El paquete incluso llega a compilar un mapa de salida para nosotros que nos permite ver qué estilos provienen de qué .scss archivos cuando los revisamos en el navegador DevTools. ¡Que agradable!

Si comete un error: verifique dos veces la sintaxis dentro package.json para asegurarse de que JSON sea válido (aquí hay uno validador JSON en línea puede usar), y que su .scss El archivo contiene sass válido (aquí hay uno convertidor descarado en líneaOtra cosa que debe verificar es si el nombre del archivo coincide con el nombre en el comando.

Crear solo un comando de desarrollo

Esto es bastante bueno, pero probablemente nos cansaremos de ejecutar este comando una y otra vez a medida que evolucionemos. Entonces, configuremos un segundo comando que le diga a Sass que Estoy viendo archivo para nosotros y compilarlo automáticamente cada vez que guardamos los cambios!

Agrega esto dentro del scripts objeto en package.json:

"sass:watch": "sass style.scss style.css --watch"

Nota IMPORTANTE: Asegúrate de que haya una coma (,) entre los dos guiones. El orden no importa, pero hay una coma entre ellos. Una vez más, JSON es estricto, así que apóyate en Validador JSON si necesario.

Ahora, si corremos sass:watch (que no debe confundirse con sasquatch), verá un mensaje en su terminal que dice: "Sass está buscando cambios. Presione Ctrl-C para detener.

Si abres el tuyo style.scss archivo ahora, haga un cambio y guárdelo, debería ver un mensaje emergente automático en la terminal que confirma que Sass se ha vuelto a compilar en CSS:

Captura de pantalla del texto de la terminal que dice que Sass está atento a los cambios.  Presione control más c para detener.  Dice a continuación que el archivo style.scss se compila en el archivo style.css.

Ahora Está ¡útil! No solo eso, sino que una vez que configuremos estos archivos en nuestro repositorio, tendremos las instrucciones exactas para instalar e iniciar Sass con un comando simple, ¡como todos los demás que trabajan en este proyecto!

Dejaremos cosas aquí para este proyecto de prueba. Fue útil ver cómo empezar, pero con más frecuencia buscará un proyecto preconfigurado en lugar de crear comandos npm para ellos desde cero, que es exactamente lo que haremos más adelante en el último capítulo de esta guía npm.

Artículo Recomendado:  Crea reflejos realistas con CSS trucos CSS

Notas recientes sobre la instalación de paquetes npm

Debe saber que en realidad hay dos formas de instalar paquetes npm, y cuál desea depende de si el paquete está destinado a ser parte de un ensamblaje de producción o si solo tiene fines de desarrollo.

  • npm install (o npm i) es la forma estándar (y predeterminada) de agregar un paquete a un proyecto.
  • npm install --save-dev (o npm i -D) agrega el paquete solo a sus "dependencias de desarrollador", lo que significa que solo se instalarán cuando desarrollando el proyecto y no en la construcción de la versión final de producción del proyecto.

Los paquetes instalados como dependencias de desarrollo pueden incluir bibliotecas de prueba, enlazadores, servidores de visualización y otras herramientas que lo ayudan solo durante el proceso de desarrollo. Por lo general, no se utilizan para compilar o ejecutar el sitio web en sí.

Hay una última bandera que vale la pena conocer: npm install --global (o npm i -g). Esta es la forma de instalar un paquete globalmente, como discutimos un poco antes al instalar Sass. Puede usar esto si, por ejemplo, desea poder iniciar sass En todas partes en su máquina Otros usos comunes para la instalación global pueden incluir CLI herramientas que le gustaría usar en cualquier lugar, o incluso otro administrador de paquetes como Hilo.

Qué sigue

¡Nos acercamos al final de nuestro viaje! Hay una última cosa que necesita saber y cómo usar npm para desarrollar rápidamente todo lo que necesita en un proyecto existente. Entonces, digamos que heredas un proyecto que usa npm. ¿Donde empezar? ¿Cómo te aseguras de colaborar con los demás de manera constante? Este es el enfoque de la última sección de esta guía npm.

Deja una respuesta

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

Subir