La mayorías de las extensiones Joomla! aún utilizan un sistema de construcción basado en Phing, que hace su trabajo pero sin utilizar las últimas tecnologías. Gulp es un sistema de construcción moderno basado en Node.js increíblemente rápido y fácil de entender ya que usa código javascript.
Aunque para este artículo se pondrá como ejemplo la creación de una plantilla Joomla!, no tiene como objetivo enseñar como es el desarrollo de extensiones con este CMS. A continuación se explicará un modo de automatizar tareas comunes en el desarrollo de extensiones Joomla! tales como la minificación de código JavaScript, recarga del navegador, compilación de archivos LESS y SASS, validación de sintaxis de código y un sin fin de tareas más, mediante el uso de Gulp.
Creando el repositorio
En primer lugar y como todo desarrollador de bien de hoy en día, empezaremos por crear un repositorio en nuestro sistema de control de versiones preferido. Yo utilizo Git y en este caso he creado un repositorio público en Github.com que he llamado Base. En la Figura 1 puedes ver el resultado:
Para trabajar cómodamente debemos clonar este repositorio a nuestro equipo local para lo cual podemos utilizar el cliente Sourcetree. Para hacer esto y una vez instalado dicho cliente hacemos clic en Clone/New y rellenamos la información que nos pide como se muestra en la Figura 2 basándonos en nuestra preferencias para la ruta que queramos.
Utilizando PuPHPet para configurar nuestro entorno de desarrollo
Nos disponemos a desarrollar extensiones para Joomla!, por lo que además de necesitar el propio CMS, primero debemos tener el servidor web (Apache), el gestor de bases de datos (MySQL), el lenguaje de programación(PHP) y el sistema operativo(Ubuntu) que lo soportará, además de diferentes herramientas que necesitaremos para el desarrollo, como un depurador de PHP (Xdebug). Si quieres conseguir todo esto del modo más rápido, profesional y automatizado te recomiendo que leas el artículo Construye máquinas virtuales para desarrollo web con PuPHPet con el que conseguirás tener un entorno de desarrollo personalizado en muy poco tiempo y que además podrás utilizar en cualquier equipo. Imagina cambiar de puesto de trabajo, a un portátil por ejemplo, y tener todo tu entorno de desarrollo en cuestión de minutos.
Así que me he dirigido a puphpet.com y después de realizar toda las configuraciones pertinentes ya puedo descargar el archivo zip con todo lo necesario para poner en marcha mi máquina virtual con todo el software asociado que necesito. Para ver la configuración que he seguido para este tutorial puedes abrir el archivo config.yaml que se encuentra dentro de la carpeta puppet en el repositorio de Github de este tutorial. Como podrás observar se trata de un archivo de texto con toda la configuración realizada por PuPHPet, pero si lo quieres ver de un modo más gráfico puedes seleccionar todo el texto, copiarlo, dirigirte a puphpet.com y pegarlo (Ctrl+V) en esta web. Automáticamente se recargará la web con toda la configuración que has copiado. Como podrás observar se trata de una máquina Ubuntu en local, con Apache como servidor web, MySQL como gestor de bases de datos y PHP como lenguaje de programación.
No obstante hay algunas partes importantes a tener en cuenta y que necesitaremos más tarde:
- La primera de ellas es la sección "Virtual Host" dentro de "Apache". He creado un host virtual de Apache con nombre base.dev que apunta a la carpeta /var/www/vendor/joomla/joomla-cms. Esto es así porque quiero que al introducir base.dev en el navegador, Apache me sirva el contenido de esta carpeta, que será donde instalaremos Joomla! más adelante.
- En segundo lugar en seleccionado que se instale Xdebug como depurador para PHP.
- Tambien he pedido que se instale Node.js con el paquete gulp y una determinada versión de Ruby con la gema sass.
- He seleccionado la creación automática de la base de datos llamada "base" que será la utilizada para la instalación de Joomla!.
Ya puedes descargar el archivo zip con toda la configuración, extraerlo y copiar su contenido al repositorio local clonado antes. Haz commit a cada paso que des por si en algún momento quieres volver atrás.
Finalmente puedes dirigirte mediante la lína de comandos a la carpeta local de tu repositorio y ejecutar vagrant up. Tal y como explico en el artículo sobre PuPHPet en poco tiempo tendrás tu máquina virtual ejecutándose en segundo plano, lista para que conectarte a ella escribiendo vagrant ssh. Si aún no habías utilizado y arrancado la máquina virtual seleccionada en tu configuración, se descargará y tardará más por ser la primera vez. Así que si estás en este caso hazte un café y prepárate para seguir.
Preparando el archivo composer.json del proyecto
Lo único que necesitas para empezar a utilizar Composer en tu proyecto es crear un archivo llamado composer.json. En este archivo se describen las dependencias del proyecto y también puede contener otro tipo de información.
El archivo utiliza el formato JSON y es muy fácil tanto de leer como de escribir. El contenido del archivo normalmente consiste en una serie de estructuras de información anidadas. Puedes ver como ha quedado el archivo composer.json para este proyecto en el repositorio de Github. Como observarás es muy simple y lo único que requerimos para el desarrollo de la plantilla es el CMS de Joomla!. Una vez tenemos definidas las dependencias en nuestro proyecto debemos instalarlas. Esto lo conseguimos con un simple comando en el terminal en el que le pedimos a Composer que las instale:
composer install
Como nuestra máquina virtual ya tiene instalado Composer, lo único que tenemos que hacer para poder ejecutar este comando es conectarnos a la máquina mediante vagrant ssh y ejecutar este comandod estando en el directorio /var/www. Lanzado ese comando Composer se encargará de ir a los repositorios de paquetes de software y descargar aquellas librerías mencionadas, copiándolas en la carpeta de tu proyecto.
Límite de la API y tokens OAuth
Debido al límite de Github en su API puede pasar que Composer te pregunte por tu usuario y contraseña para autenticarte y poder llevar a cabo su trabajo. Si prefiere no dar a Composer tus credenciales puedes crear un token manualmente usando el siguiente procedimiento:
- Crea un token OAuth en Github. Leer más sobre esto.
- Añadelo a la configuración ejecutando composer config -g github-oauth.github.com <oauthtoken>
Ahora Composer debería instalar/actualizar sin preguntar por autenticación. Tal y como se muestra en la Figura 3.
Una vez finalizado el proceso en tu consola de comandos podrás encontrar en la carpeta de tu proyecto un directorio llamado "vendor" donde estarán las librerías declaradas. Por lo tanto ya tendremos Joomla! en la carpeta /var/www/vendor/joomla/joomla-cms.
Finalmente sólo nos queda editar nuestro archivo hosts y agregar la ip configurada en PuPHPet para nuestro host virtual, tal y como se muestra en la Figura 4. Si la intentar guardar los cambios obtienes un error informándote que no puedes guardarlos, intenta abriendo el archivo ejecutando el editor como administrador.
Instalando Joomla
Ya tenemos nuestra máquina virtual ejecutándose con servidor, base de datos, lenguaje y Joomla descargado en la carpeta a la que apunta el host virtual de Apache, por lo que podemos instalar Joomla desde nuestro navegador preferido accediendo a base.dev como se muestra en la Figura 5. Acuérdate que ya tenemos una base de datos creada en MySQL llamada base creada por vagrant y que podemos utilizar el usuario dbuser y contraseña 123 en los pasos de instalación.
Ya tenemos Joomla instalado por lo que ahora ya podemos desarrollar nuestra plantilla con tranquilidad.
Presentando Gulp.js
Gulp.js es un build system(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.
Como verás no importa si eres un desarrollador Front-End, Back-End ó los dos a la vez. Si hoy en día no quieres perder tiempo realizando tareas comunes “manualmente”, es momento de que aprendas a usar un automatizador como Gulp.js.
Adicionalmente Gulp.js está construído con Javascript, funciona sobre Node.js y es Open Source, así que su código fuente lo puedes encontrar en github. Para saber más sobre Gulp te recomiendo que leas el mejor tutorial sobre Gulp para dar tus primeros pasos. No te preocupes por su instalación. Como ya sabrás vagrant lo ha hecho por nosotros si hemos seguido todos los pasos.
Joomla-Gulp al rescate
Como habrás podido comprobar Gulp es un sistema con infinidad de plugins que nos permite automatizar tareas comunes en nuestro trabajo de desarrollo. Evidentemente la utilización de todos estos plugins requiere un conocimiento mínimo de los mismos y de javascript por nuestra parte. Afortunadamente en Joomla tenemos un sistema para utilizar Gulp sin empezar de cero y adaptado al desarrollo de extensiones. Se llama Joomla-Gulp y lo ha creado el genial programador valenciano Roberto Segura. Aprovecho estas líneas para dar mis más sinceros agredecimientos por esta gran aportación, a parte de otras tantas, que nos hace la vida más fácil. Este hombre es ya un ídolo para mí.
¿Cómo funciona?
Es un sistema Gulp base y reusable para el desarrollo de extensiones Joomla!. No esperes nada mágico aquí excepto eso y convenciones en nombres de tareas. Es un sistema base que te permite añadir scripts de construcción a tus extensiones de un modo estándar para que puedas enfocarte en las tareas específicas de tu proyecto.
Este sistema de construcción base no depende de ninguna estructura de proyecto, por lo que puedes especificarlo en los scripts de construcción de tu extensión.
La idea principal de este sistema de construcción es que siempre desarrolles tus extensiones en el directorio principal de extensiones de tu repositorio. El sistema de construcción copia archivos a su sitio de pruebas y vuelve a cargar tu navegador cuando cualquier cosa que quieras ver cambie.
Instalación
Lo primero que tenemos que hacer, es crear un fichero package.json en la raíz de nuestro proyecto que será quien mantenga la configuración del mismo. Lo podemos crear de forma manual o ejecutando por consola el comando npm init (respondiendo a las preguntas que nos hagan por consola).
Lo hagáis como lo hagáis, el resultado debería ser un fichero en formato json con los metadatos que identifican nuestro proyecto.
Ya tenemos un fichero package.json con la configuración básica del proyecto. Ahora nos queda añadir las dependencias que llevará. Este proyecto sólo tiene 3 dependencias y puedes instalarlas con los siguiente comandos desde la raíz de vuestro proyecto(/var/www en nuestro caso):
npm install browser-sync --save-dev
npm install gulp-zip --save-dev
npm install require-dir --save-dev
De este modo estamos, además de instalando las dependencias, guardando estos requisitos en el archivo package.json que hemos generado antes. Puedes ver en el repositorio de github para este tutorial como ha quedado. Y del mismo modo puedes instalar todos los plugins que necesites. En la documentación de Joomla Gulp proporcionada por Roberto Segura se clona el repositorio para descargar este sistema. Yo he preferido agregar Joomla Gulp a mi archivo package.json para que se instale como una dependencia más. Si has creado las dependencias de desarrollo en el archivo package.json de manera manual puedes instalarlas todos de una vez con el siguiente comando:
npm install
Si obtienes errores en la línea de comandos prueba a ejecutar el comando como root:
sudo npm install
Y si estás en Windows y obtienes errores del tipo:
Error: EPERM, open '/srv/www/harvsworld/htdocs/wp-content/themes/harvsworld/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin/node_modules/bin-wrapper/node_modules/download-status/node_modules/lpad-align/package.json'
sigue los pasos de este artículo para solucionarlo y ejecuta el comando como sigue:
sudo npm install --no-bin-links
Crea tu directorio joomla-gulp-extensions
Copia el directorio joomla-gulp-extensions-sample que está dentro de node_modules/joomla-gulp a tu raíz del proyecto y renómbralo a joomla-gulp-extensions. Ese directorio contiene una estructura de ejemplo. Nota: puedes renombrar los directorios como quieras, sólo tienes que asegurarte de que tu archivo gulpfile.js apunta a los directorios correctos.
Crear tu archivo de configuración
Copia el archivo gulp-config.json.sample a la raíz de tu proyecto y renómbralo a gulp-config.json y personaliza sus parámetros para ajustarlos a tu proyecto.
Opciones de configuración:
- wwwDir: directorio local donde está alojada tu web.
- browserSyncProxy: máquina a usar por browser-sync. Puedes crear un host virtual o utilizar localhost directamente.
- extensions: objeto que contiene la lista de extensiones disponibles en tu repositorio.
A continuación tiene un ejemplo de definición de extensiones:
"extensions" : {
"components" : ["content"],
"libraries" : ["joomla"],
"media" : ["joomla"],
"modules" : {
"backend" : ["quickicon"]
"frontend" : ["latest-articles"]
},
"plugins" : {
"authentication" : ["joomla"],
"content" : ["emailcloak"],
"system" : ["languagecode"]
},
"templates" : {
"frontend" : ["protostar"]
}
}
Para nuestro proyecto de plantilla Joomla ha quedado como sigue:
{
"wwwDir" : "/var/www/vendor/joomla/joomla-cms",
"browserSyncProxy" : "base.dev",
"extensions" : {
"templates" : {
"frontend" : ["base"]
}
}
}
Convenciones de nombres
El sistema está construido con una estructura jerárquica de tareas en mente.
Nivel principal
Es la llamada a gulp estándar:
gulp: limpia el sitio de pruebas, copia los archivos nuevos, empieza a ver los cambios en cualquier extensión y lanza la sincronización del navegador para ver tus cambios en tiempo real.
Segundo nivel
También puedes llamar a tareas principales independientemente:
gulp clean: limpia el sitio de pruebas
gulp copy: copia el contenido de la extensión en el sitio de pruebas
gulp watch: observa cambios en los archivos de la extensión y actua consecuentemente
Tercer nivel
Y por supuesto puedes llamar a tareas por tipo de extensión:
gulp clean:components : limpia todos los componentes
gulp copy:plugins : copia todos los plugins
gulp watch:templates : observa cambios en las plantillas
Cuarto nivel
Finalmente puedes llamar a tareas específicas para una extensión. Ejemplos:
gulp copy:components.content : Copia el contenido del componente al sitio de pruebas
gulp clean:plugins.authentication.joomla : Limpia el plugin de autenticación del sitio de pruebas
gulp watch:media.joomla : Observa cambios en el directorio media de Joomla
gulp copy:modules.frontend.latest-articles : Copia un módulo de frontend al sitio de pruebas
gulp watch:templates.frontend.protostar : Observa cambios en la plantilla de frontend protostar
Ya tenemos todo preparado para desarrollar nuestras extensiones Joomla, en nuestro caso una plantilla, con un sistema automatizado de tareas. Ahora sólo queda crear el script para llevar a cabo todas nuestras tareas automaticamente. Lo veremos en la segunda parte del tutorial.
Fuentes:
Gulp.js en español - tutorial básico y primeros pasos
How to fix ‘npm install’ errors on vagrant on windows because the paths are too long
