Drupal Grunt TaskConstruir y probar Drupal usando Grunt

Drupal Camp Costa Rica 2015

Quien Soy?Daniel Noyola

Correo: d.noyola@paralleldevs.comGithub: danielnv18Twitter: @danielnv18

Full Stack Developer

Construyendo Drupal

Desarrollo en DrupalEnfoque: instale y ejecute

Descargar e instalar -> Agregar codigo -> Subir al servidor

Enfoque: Contruya y pruebe

Drush Make -> Codigo -> Confirmar codigo -> Compilar Sass ->Ejecutar Behat -> git commit

Porque Contruir Drupal?1. Drush make2. Dejamos de mezclar el código contribuido/core y código custom.3. Tenemos control de nuestras dependecias.4. Una manera simplificada de de ver nuestras librerías y recursos.5. Reforzar la idea de automatizar.

Porque Probar Drupal?1. Sitios complejos necesitan ser probados más allá de unos cuantos

clicks.2. Empoderar a los desarrolladores para producir código de calidad.3. Encontrar errores en el código antes de integrar.

Surgen Preguntas1. Como nos aseguramos que todos usan la mismas herramientas en

la misma manera?2. Como separamos nuestro código fuente de las dependencias y

crear un output corecto?

Grunt

Porque Grunt?Es un ejecutador de tareas basado en javascript.Fuerte comunidad, flexible, ampliamente adoptado.Solamente requiere node.js.Tiene un enfoque simple: tareas en js, configuración en JSON.4,000+ Plugins Contruibuidos.

Grunt, Genial!Tutorial en escribir un script en Grunt minificar JavaScript usando la

herramienta "uglify"

http://gruntjs.com/getting-started

Drupal Grunt Task

Drupal Grunt Task

https://github.com/phase2/grunt-drupal-tasks

grunt-drupal-task es un conjunto de herramientas que nos ayudanconstruir y probar (aka Testear) Drupal y otras herramientas comunes

en Drupal

Tiene opiniones1. Aplica practicas en todo el equipo y el ambiente de CI (Continuous

Integration)2. Asume cierto flujo en el codigo

1. Verificar la calidad del código custom.2. Acoplar core y contrib con el código custom con Drush Make.3. Ejecutar pruebas.

Reúne una serie de herramientas

Se queda fuera de tu camino1. Todas las tareas se pueden modificar.2. Administra sus propias dependencias.3. Las herramientas son faciles de usar.

Comenzando

DependenciasAntes de comenzar tenemos que estar seguros que tenemos

node.js (npm)Se recomienda para soportar el resto de herramientas

Bundler, Composer, Ruby y RubyGemsOpcional

npm install -g generator-gadget grunt-cli yo

yo gadget

Estructura del Projecto

Estructura del Projecto

Estructura del node_modules

Estructura del src/

Estructura del test

Objetivos1. Acomodar (y aislar) el código custom, Drupal Core, código

contribuido, archivos de configuración y herramientas de soporte.2. Permitir a todas la herramientas trabajar en conjunto con el minimo

esfuerzo.3. Estandarizar la estructura base de un projecto

Construyendo

Construccion del projectoUtilizamos grunt para construir el projecto:grunt

Pasos de contruccionCompass / BundleValida CodigoDrush makeInserta el codigo custom en el sitioCompilar el Tema

Directorio build/html

Directorio vendor

Directorio build/html

SymLinks?1. No hay necesidada de re-contruir despues de un cambio en el

codigo2. La tarea "build" se encarga de que los Symlink esten correctos3. Los link son relativos a la aplicacion4. XDebug funciona con simlinks5. Usuarios de windows: CUIDADO!

Se ejecuta automaticoEjecuta "validate", compila el tema, drush make (si es necesario)

cuando un archivo es modificado.grunt watch

La forma de construccion1. Captura el flujo de trabajo diario.2. Produce un sitio completo en Drupal desde codigo custom y un

archivo make.3. Contruido local, contruir sobre la integracion.

Haslo a tu maneraLas tareas de contruccion puede ser ejecutadas individualmente.Demosle un vistaso a las tareas predefinidas.

Validation

Validando la calidad del codigo1. Utiliza lints y analisis de codigo estatico para cuantificar la calidad

del codigo2. Podemos ejecutar PHP Lint y PHP Code Sniffer (con los estandares

de codigo de Drupal)grunt validate

PHP LintVerifica la sintaxis con la herramienta integrada en php.

PHP Code SnifferVerifica el estilo del codigo para que conicida con Drupal Code

Standards

Verifiquemos antes de hacer algo1. Anima a los desarrolladores a validar el codigo antes de subirlo.2. Enfoca la arquitentura en revisiones de codigo.3. Rechazar el deployment o PR bajo ciertos parametros.

Compilando el tema

Herramientas Front-end1. Compass fue una de la primeras herramientas no-PHP comun en la

implementacion de Drupal2. Puedes configurar GDT para definir la compilacion de los temas

grunt compile-theme

CompassIncluya el archivo Gemfile para instalar y para requerir gemasCompass compile es ejecutado durante la construccion del sitio

grunt compass

Grunt-to-GruntDelegar tareas a los temas que estan basados en grunt.WIP (Work in progress)

Testing

Probando los "features" del sitioProbar de Behat, Extenciones Drupal y otras dependenciasProbar el sitio con Behat requiere que Drupal este instalado yaccesible por URL2 opciones para ejecutar pruebas localmente

Usando un ambiente local (Docker,VM, W/MAMP)Usando el servidor integrado en PHP/Drush

grunt drush:liteinstall

Ejecutando las pruebasgrunt test

Hacia BDDGDT suporta el fujo de trabajo de BDD/TDD

Primero se escriben las pruebasCodido interactua con el feedback de la pruebaSe puede automatizar mediante la tarea watch

Incluye herramientas y scripts de prueba para comenzar a probar

Empaquetamiento y despliegue (Deployment)

DeploymentEsta hecho para desarrollo local y ambientes de integracionPrepara el codigo para el lanzamamientoEntrega el codigo a otras herramientas de deployment

EmpaquetamientoProduce una version aislada, desplegable con DrupalExcluye herramientas de soporte y configuracion

grunt package

Liberando el codigoSe esta explorando como se pueden soportar processos de liberacion

(release)

1. Commit el codigo a un repositorio (Acquia, Pantheon)2. Integrarlo con otras herramientas de release/deployment

(Capistrano, ShipIt)

Configurando y extendiendo

ConfiguracionOpciones configurable en Gruntconfig.json

La fuente y directorio de contruccionOpciones para ejecutar behatArgumentos a la ejecucion de Drush MakeOpciones para la configuracion de los temasIncluir / Excluir archivos para el empaquetamiento

ExtendiendoLa entension es posible a travez de cambios en Gruntfile.js

Agregar nuevas tareas, reemplazar existentesEjecutar un comando de consola como una tareaSobre escribir los pasos por defecto para la construccion del sitio

Para Finalizar

PruebaloIntenta usar Drupal Grunt Task en tu siguiente projectoCreat issue en GitHub para compartir como deberia funcionar mejorParches son bienvenidos (a.k.a Pull Request en GitHub)

Roadmap1. Suportar mas herramientas de calidad de codigo (PHPunit Sass/js

lint)2. Delegar para temas que hacen uso de grunt3. Mas opciones de releasing/deployment4. Contruir Drupal con composer5. Integracion con Drupal Console

Preguntas?Codigo Usado para la presentacion

https://github.com/danielnv18/gdt-drupalcamp-cr-2015

Presentacion