Drupal Grunt Task – Construir y probar Drupal usando Grunt – Construyendo Drupal

View Github Repository Open presentation in a new window

danielnv18

See all presentation from danielnv18

Drupal Grunt Task – Construir y probar Drupal usando Grunt – Construyendo Drupal

0 0

Drupal-Grunt-Task-Presentacion

On Github danielnv18 / Drupal-Grunt-Task-Presentacion

Drupal Grunt Task

Construir y probar Drupal usando Grunt

Drupal Camp Costa Rica 2015

Cuantos han usado grunt antes? Quienes lo usan diariamente

Quien Soy?

  • Daniel Noyola
    • Correo: d.noyola@paralleldevs.com
    • Github: danielnv18
    • Twitter: @danielnv18
  • Full Stack Developer

Construyendo Drupal

Drupal realmente necesita una herramienta de contruccion

Desarrollo en Drupal

Enfoque: 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

Nuestra prácticas de desarrollo han evolucionado. Más herramientas complementarias.

Cada herramienta agrega complejidad.

No hay nada malo con el primer enfoque pero podríamos hacerlo mejor.

Porque Contruir Drupal?

Drush make Dejamos de mezclar el código contribuido/core y código custom. Tenemos control de nuestras dependecias. Una manera simplificada de de ver nuestras librerías y recursos. Reforzar la idea de automatizar.
  • Crear un forma mas consistente de unir las piezas
  • El archivo make hace mas claro las dependencias del projecto
  • No solo usamos recursos de Drupal sino librerias de jquery etc
  • Es el mismo proceso, no importa quien lo haga

Porque Probar Drupal?

Sitios complejos necesitan ser probados más allá de unos cuantos clicks. Empoderar a los desarrolladores para producir código de calidad. Encontrar errores en el código antes de integrar. No gastar mucho tiempo Parte del cotigo sea consistente Es mas facil arreglar codigo cuando aun estan en las masnos del desarrollador original

Surgen Preguntas

Como nos aseguramos que todos usan la mismas herramientas en la misma manera? Como separamos nuestro código fuente de las dependencias y crear un output corecto? Readme archivo con extensas intrucciones que solo se hace mas largo Separar las dependencias de drupal core, contrib

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.
Se tuvieron en cuenta otros task lib en js pero grunt era el que tenia los plugins necesarios

Grunt, Genial!

Tutorial en escribir un script en Grunt minificar JavaScript usando la herramienta "uglify"

http://gruntjs.com/getting-started

Drupal Grunt Task

  • plugins de grunt para tareas comunes para contruir y probar Drupal

Drupal Grunt Task

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

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

notas

Tiene opiniones

Aplica practicas en todo el equipo y el ambiente de CI (Continuous Integration) Asume cierto flujo en el codigo Verificar la calidad del código custom. Acoplar core y contrib con el código custom con Drush Make. Ejecutar pruebas.

1. Como estructurar y hacer el trabajo

2. Todos usando las mismas herramientas en la misma manera

Reúne una serie de herramientas

Utiliza varias herramientas que se han convertido en basicas.

Se queda fuera de tu camino

Todas las tareas se pueden modificar. Administra sus propias dependencias. Las herramientas son faciles de usar.
  • Las configuraciones por defecto de pueden modificar por puede que no funciones para todos
  • No me tengo que bajar lo necesario para ejecutar behat

Comenzando

Dependencias

  • Antes de comenzar tenemos que estar seguros que tenemos
    • node.js (npm)
  • Se recomienda para soportar el resto de herramientas
    • Bundler, Composer, Ruby y RubyGems
  • Opcional 
    npm install -g generator-gadget grunt-cli yo
    yo gadget
Voy a mostrar a continuacion
Primero nos pregunto que version de Drupal queremos y despues instala todas las dependencias para grunt-drupal-task

Estructura del Projecto

Asumiendo que lo ejecutemos en un projecto vacio esto es lo que veremos

Estructura del Projecto

en estos archivos es donde vive toda la configuracion de nuestro projecto

Estructura del node_modules

Dependencias del projecto y de grunt-drupal-task

Estructura del src/

Custom Drupal code y Drush Make File y hablaremos de este directorio mas adelante.

Estructura del test

Behat config files y features de behat

Objetivos

Acomodar (y aislar) el código custom, Drupal Core, código contribuido, archivos de configuración y herramientas de soporte. Permitir a todas la herramientas trabajar en conjunto con el minimo esfuerzo. Estandarizar la estructura base de un projecto

acomodar no solamente el codigo sino aislarlo. Esto nos permite unir las herramientas con minimo esfuerzo.

por ejemplo se pueden hacer chequeos de la calidad del codigo unicamente en nuestro codigo

Construyendo

Construccion del projecto

  • Utilizamos grunt para construir el projecto: 
    grunt

Una vez tengamos todo configurado pordemos simplemente usar grunt para crear el projecto.

Pasos de contruccion

  • Compass / Bundle
  • Valida Codigo
  • Drush make
  • Inserta el codigo custom en el sitio
  • Compilar el Tema

Esto ejecutas una series de tareas o procesos para contruir nuestro proyecto.

Todos los pasos se ejecutan solamente si son necesarios. Por ejemplo si no hay un cambio en el archivo de Drush Make no va a reconstruir el tema

Directorio build/html

Nos genera una carpeta build y dentro de html podemos ver la estructura de un Drupal

Ya voveremos a esta carpeta

Directorio vendor

Todas las librerias decargadas desde packeist.org para ejecutar behat.

Directorio build/html

Saben que son Simlinks?

Todas nuestros archivos en src estan sincronizados con

notes sync link and src

SymLinks?

No hay necesidada de re-contruir despues de un cambio en el codigo La tarea "build" se encarga de que los Symlink esten correctos Los link son relativos a la aplicacion XDebug funciona con simlinks Usuarios de windows: CUIDADO!

Es una forma muy simple de sincronizar nuestro codigo con el drupal que se acaba de generar. Los servidores lo leen bien al igual que los IDE

Se ejecuta automatico

Ejecuta "validate", compila el tema, drush make (si es necesario) cuando un archivo es modificado.

grunt watch

La forma de construccion

Captura el flujo de trabajo diario. Produce un sitio completo en Drupal desde codigo custom y un archivo make. Contruido local, contruir sobre la integracion.

Todas las tareas que se ejecutan diariamente

No tenemos que preocuparnos por el output del archivo make

Funciona bien local y en produccion

Haslo a tu manera

  • Las tareas de contruccion puede ser ejecutadas individualmente.
  • Demosle un vistaso a las tareas predefinidas.
Vamos a hablar mas adelante de como modificar las tareas existentes.

Validation

Validando la calidad del codigo

Utiliza lints y analisis de codigo estatico para cuantificar la calidad del codigo Podemos ejecutar PHP Lint y PHP Code Sniffer (con los estandares de codigo de Drupal) 
grunt validate

PHP Lint

Verifica la sintaxis con la herramienta integrada en php.

PHP Code Sniffer

Verifica el estilo del codigo para que conicida con Drupal Code Standards

Verifiquemos antes de hacer algo

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

Compilando el tema

Herramientas Front-end

Compass fue una de la primeras herramientas no-PHP comun en la implementacion de Drupal Puedes configurar GDT para definir la compilacion de los temas 
grunt compile-theme

Compass

  • Incluya el archivo Gemfile para instalar y para requerir gemas
  • Compass compile es ejecutado durante la construccion del sitio
  • grunt compass

Grunt-to-Grunt

  • Delegar tareas a los temas que estan basados en grunt.
  • WIP (Work in progress)

Testing

Probando los "features" del sitio

  • Probar de Behat, Extenciones Drupal y otras dependencias
  • Probar el sitio con Behat requiere que Drupal este instalado y accesible por URL
  • 2 opciones para ejecutar pruebas localmente
    • Usando un ambiente local (Docker,VM, W/MAMP)
    • Usando el servidor integrado en PHP/Drush 
      grunt drush:liteinstall
crea un archivo sql lite e instala Drupal ahi. Es simplemente un wrapper a la funcionalidad de Drush

Ejecutando las pruebas

grunt test

Hacia BDD

GDT suporta el fujo de trabajo de BDD/TDD

  • Primero se escriben las pruebas
  • Codido interactua con el feedback de la prueba
  • Se puede automatizar mediante la tarea watch

Incluye herramientas y scripts de prueba para comenzar a probar

Empaquetamiento y despliegue (Deployment)

como se sube a un servidor

Deployment

  • Esta hecho para desarrollo local y ambientes de integracion
  • Prepara el codigo para el lanzamamiento
  • Entrega el codigo a otras herramientas de deployment

Empaquetamiento

  • Produce una version aislada, desplegable con Drupal
  • Excluye herramientas de soporte y configuracion
grunt package

Liberando el codigo

Se esta explorando como se pueden soportar processos de liberacion (release)

Commit el codigo a un repositorio (Acquia, Pantheon) Integrarlo con otras herramientas de release/deployment (Capistrano, ShipIt)

Configurando y extendiendo

Configuracion

  • Opciones configurable en Gruntconfig.json
    • La fuente y directorio de contruccion
    • Opciones para ejecutar behat
    • Argumentos a la ejecucion de Drush Make
    • Opciones para la configuracion de los temas
    • Incluir / Excluir archivos para el empaquetamiento

Extendiendo

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

  • Agregar nuevas tareas, reemplazar existentes
  • Ejecutar un comando de consola como una tarea
  • Sobre escribir los pasos por defecto para la construccion del sitio

Para Finalizar

Pruebalo

  • Intenta usar Drupal Grunt Task en tu siguiente projecto
  • Creat issue en GitHub para compartir como deberia funcionar mejor
  • Parches son bienvenidos (a.k.a Pull Request en GitHub)

Roadmap

Suportar mas herramientas de calidad de codigo (PHPunit Sass/js lint) Delegar para temas que hacen uso de grunt Mas opciones de releasing/deployment Contruir Drupal con composer Integracion con Drupal Console

Preguntas?

Codigo Usado para la presentacion https://github.com/danielnv18/gdt-drupalcamp-cr-2015

Presentacion

Drupal Grunt Task Construir y probar Drupal usando Grunt Drupal Camp Costa Rica 2015 Cuantos han usado grunt antes? Quienes lo usan diariamente