Gulp – Instalación en OS X 10.11

Gulp

Gulp.js es un sistema de construcción que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más.

No solamente nos soluciona el problema de tener que utilizar múltiples herramientas en nuestro flujo de trabajo sin que nos permite ejecutarlo todo desde un único lugar.

Instalando globalmente Gulp

Gulp requiere Nodejs y Npm (administrador de paquetes de Node) por lo que debes tenerlos instalados antes. Aquí tienes un tutorial para hacerlo.

Abre el Terminal ( + ESPACIO para abrir Spotlight y escribe terminal) y dispara el siguiente comando:

npm install -g gulp

Instalando localmente – package.json

Para un proyecto local necesitas preparar primero un archivo package.json para configurar tus paquetes y dependencias Node/npm. Desde el Terminal cambia el directorio a tú carpeta de proyecto y dispara el siguiente comando para crear el archivo package.json:

npm init

Esto te ayuda a crear el archivo, aquí tienes la salida generada:

tonidg@[~/Desktop]: npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (Desktop) mi_proyecto
version: (1.0.0) 0.0.1
description: ejemplo de mi proyecto
entry point: (index.js)
test command:
git repository:
keywords:
author: Toni DG
license: (ISC)
About to write to /Users/tonidg/Desktop/package.json:
{
"name": "mi_proyecto"
"version": "0.0.1"
"description": "ejemplo de mi proyecto"
"main": "index.js"
"scripts":
"test": "echo \"Error: no test specified\" && exit 1
}
"author": "Toni DG"
"license": "ISC"
}

Tu solo tienes que añadir los valores para Nombre, Versión, Descripción y Autor. Mantén los demás campos en blanco y el archivo será escrito en la carpeta de tú proyecto. Tras esto puedes eliminar algunos de los campos en blanco en un editor de texto, obteniendo algo así:

{
"name": "mi_proyecto",
"version": "0.0.1",
"description": "ejemplo de mi proyecto",
"author": "Toni DG"
}

Fíjate en que la última coma ha sido eliminada.

Una vez tenemos nuestro archivo json situado podemos instalar el paquete Gulp localmente desde la linea de comandos en nuestro proyecto, esto escribirá a nuestro archivo package.json por lo que asegúrate de estar en el directorio del proyecto. Instala mediante:

npm install gulp --save-dev

Ahora nuestro package.json debería ser algo así:

{
"name": "test_proyecto",
"version": "1.0.0",
"description": "test",
"author": "Toni DG",
"devDependencies": {
"gulp": "^3.9.1"
}
}

Para añadir mas plugins, como por ejemplo el de recarga en vivo del navegador utiliza la siguiente sintaxis:

npm install browser-sync --save-dev

El parámetro -save-dev guardará el paquete como una dependencia del proyecto así que escribirá en el archivo package.json. Ahora mostrará algo así:

{
"name": "test_proyecto",
"version": "1.0.0",
"description": "test",
"author": "Toni DG",
"devDependencies": {
"gulp": "^3.9.1",
"browser-sync": "^2.11.1"
}
}

gulpfile.js

Nuestro último archivo de configuración es gulpfile.js el cual le dice a Gulp que debe hacer. Añade este archivo a la raíz de tú proyecto e inserta:

var gulp = require('gulp');

Como tenemos el plugin browsersync instalado vamos a crear una tarea que nos permita ver el proyecto web en el navegador y que este se recargue automáticamente cada vez que cambiemos el CSS. Ahora nuestro gulpfile.js será así:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('sync', function() {
browserSync.init({
proxy: "my_project.dev",
files: "*.css,*.php,css/*css"
});
});

Ahora ejecutamos nuestra tarea desde la linea de comandos usando:

gulp sync

Eso es todo, esta es una guía básica de inicio y no pretende más que eso, preparar tú entorno. Existen multitud de plugins  disponibles, repásalos y comprueba todo lo que pueden hacer por ti mejorando tus flujos de trabajo.

Node.js – Instalación en OSX El Capitan 10.11

Node.js - Instalación en OSX El Capitan

Node.js usa el motor de JavaScript V8 de Google: una VM tremendamente rápida y de gran calidad escrita por gente como Lars Bak, uno de los mejores ingenieros del mundo especializados en VMs. No olvidemos que V8 es actualizado constantemente y es uno de los intérpretes más rápidos que puedan existir en la actualidad para cualquier lenguaje dinámico. Además las capacidades de Node para I/O (Entrada/Salida) son realmente ligeras y potentes, dando al desarrollador la posibilidad de utilizar a tope la I/O del sistema.

Instalando Node.js

Para instalar Node.js en OSX puedes descargar un paquete pre-compilado desde https//nodejs.org mediante el cual podrás hacerlo de forma rápida y sencilla. Haz click y consigue la última versión estable.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Descargando-Node.png” alt=”Descargando Node” align=”center” lightbox=”off” caption=”Descargando Node” captionposition=”center”]

Con la instalación además conseguiremos npm. Npm es un administrador de paquetes para Node el cual nos facilita obtener paquetes adicionales.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Instalando-Node.png” alt=”Instalando Node” align=”center” lightbox=”off” caption=”Instalando Node” captionposition=”center”]

Al final de la instalación te recordará que te asegures de que /usr/local/bin está en tú $PATH. Para hacerlo abre el Terminal y escribe el siguiente comando:

echo $PATH

Deberías ver algo parecido a esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Comprobando-PATH.png” alt=”Comprobando $PATH” align=”center” lightbox=”off” caption=”Comprobando $PATH” captionposition=”center”]

Después de la instalación podemos comprobar que todo ha ido bien abriendo una sesión JavaScript de Node. Escribe en el Terminal:

node

y después:

console.log('hello node');

Deberás ver algo como esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Comprobando-Node.png” alt=”Comprobando Node” align=”center” lightbox=”off” caption=”Comprobando Node” captionposition=”center”]

Para salir de una sesión de Node puedes presionar CONTROL + C.

Recuerda que para actualizar simplemente descarga la última versión y sobreescribe la anterior. Puedes consultar tú versión con:

node -v

Instalando paquetes para Node

Existen multitud de paquetes como por ejemplo el popular Grunt.js, puedes utilizar el comando npm para obtener un listado completo:

npm search

Para instalar un paquete ejecuta:

npm install easyimage

Para listar paquetes desde un directorio de proyecto:

npm ls

Para actualizar paquetes npm:

npm update

Y eso es todo, te recomiendo buscar ayudas o realizar algún tutorial si te estás iniciando en Node.