Digital

Introducción a la automatización de tareas con Gulp: NPM (I)

2 Mins de lectura

¿Qué es Gulp?

En este primer artículo vamos a ver los pasos previos para añadir Gulp a nuestro workflow. Vamos a instalar todo lo necesario para que funcione y vamos a ver como funciona NPM y el package.json que son los pilares básicos para utilizar Gulp.

Node

Lo primero es tener instalado Node.js en nuestro equipo, para ello nos vamos a la web de Node.js y descargamos la version «Recommended for most users», a día de hoy es la 4.4.7. A la vez que instalamos node.js también instalamos NPM.

NPM

NPM es el gestor de paquetes de node. Gracias a NPM tenemos a nuestra disposición miles de librerías para usar en nuestros proyectos.

La versión de NPM que instalamos con Node.js esta desactualizada así que lo primero que vamos a hacer es instalar la última versión.

package.json

El package.json es un archivo en formato JSON que almacena la información del proyecto como el nombre, repositorio, descripción, licencia, dependencias etc…

Para crear este archivo vamos desde la consola a la raíz del directorio de nuestro proyecto y escribimos lo siguiente


npm init

La consola nos hará una serie de preguntas como las que vemos en la imagen

terminal-npm-init

terminal-npm-init

Una vez terminado el proceso se habrá creado un archivo con el nombre package.json

Si lo abrimos con nuestro editor de código veremos lo siguiente


{ "name": "prueba", "version": "1.0.0", "description": "Esto es una prueba", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "prueba" ], "author": "Hiberus Digital", "license": "MIT" }

Instalando paquetes de NPM

Los paquetes de NPM los podemos instalar de maneral global o local. Para instalar de manera global utilizamos -g para instarlalos de manera local utilizamos –save o -D.

Para instalar un paquete de NPM vamos a la consola y escribimos lo siguiente


npm install npm -g

Vamos a diseccionar el comando.

[npm] Siempre que vayamos a instalar un paquete de NPM empezamos con npm

[install] para que instale el paquete, podemos sustituir install por i y así no tenemos que estar escribiendo install todo el rato.

[nombre-del-paquete] en este caso es Gulp

[-g | –save ] Aquí indicamos como queremos instalar el paquete de manera global o local.

Si instalamos todos los paquetes de manera local con –save o -S se añade una nueva sección a nuestra package.json, aquí se irán añadiendo todos los paquetes que vamos instalando.


"dependencies": { "gulp-postcss": "^6.1.1" }

Esto es fundamental, por eso es muy importante instalar todas las dependencias con -S para que todas se añadan a la sección de dependencies. Si se nos olvida -S no quedara constancia en el package.json de que estamos utilizando este paquete. Si una persona se descarga el proyecto y hace un npm i se instalará todas las dependencias que se han añadido a la sección de dependencies.

Comandos

De ahora en adelante tendremos que familiarizarnos con una serie de comandos de NPM

npm init que como ya hemos visto sirve para inicializar el package.json

npm i [nombre del paquete] [–save | -D] para instalar los paquetes como dependencias en nuestro package.json

npm uninstall –save [nombre del paquete] para desinstalar de manera local un paquete en concreto

npm help para mostrar una lista con todos los comandos disponibles

 

Desde nuestro departamento de Usabilidad, Diseño y Maquetación de Hiberus Digital, damos formación a equipos para entornos de front para agilizar el proceso de trabajo desde el ámbito del front. ¿Te ayudamos?

Mix de agencia digital y consultora de tecnología para ecommerce

Diseñamos experiencias digitales únicas, con una tecnología escalable y optimizado a resultados.

¿Te ayudamos?

Artículos relacionados
Digital

Experiencia Digital inclusiva utilizando SEO y Accesibilidad Web

4 Mins de lectura
No hace falta que llegados a este punto definamos qué es la accesibilidad ni el posicionamiento SEO, pero sí queremos ahondar en…
Digital

Transformando sectores a través del Marketing Automation

4 Mins de lectura
El auge de las soluciones digitales ha redefinido la forma en que las empresas interactúan con sus clientes. Una herramienta que ha…
Digital

¿Cuál es la importancia de la gestión de datos del cliente?

4 Mins de lectura
Hoy en día, las empresas generan y almacenan una enorme cantidad de datos y muchos de ellos están relacionados con sus clientes….

Deja una respuesta

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