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

Jorge Aznar | 08/09/2016 | 1,800 Visitas


¿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?

Comentar

Su dirección de correo electrónico no será publicada.Los campos necesarios están marcados *

*

¡Contacta con nosotros!

¿ALGUNA DUDA?

Llámanos y nuestros expertos realizarán un asesoramiento personalizado sin compromiso

902 87 73 92

SOLICITAR INFORMACIÓN





* Campos Obligatorios

Afirmo que he leido el aviso legal y acepto la Política de privacidad
Permito el tratamiento de mis datos personales con la finalidad informada