Desarrollo rápido de temas a medida

1. Usando Sass y Gulp paraUsando Sass y Gulp para
el desarrollo de temasel desarrollo de temas
en WordPressen WordPress
WordCamp Barcelona - 2018
@nuriarai

2. para empezar un nuevo proyecto a
medida de forma rápida y eficiente
para no repetirnos, ser más eficientes y
centrarnos en el trabajo creativo
AUTOMATIZARAUTOMATIZAR

3. DRYDRY
compilación preprocesadores CSS
autoprefijos CSS
minificación de CSS y JS
detección errores JS (js lint)
compresión imágenes
....

4. EFICIENCIA DURANTE ELEFICIENCIA DURANTE EL
DESARROLLODESARROLLO
autorecarga de la página
navegación sincronizada entre
dispositivos

5. MAMP PRO Local by
FlyWheel
MAMP + hosts
docker
Vagrant
entorno deentorno de
desarrollo localdesarrollo local
ServerPress

6. webpack
node
gulp
npm
yarn parcel
herramientas front-endherramientas front-end

7. codekit koala
css preprocessorscss preprocessors
gulp

8. css frameworkscss frameworks
Bootstrap Foundation Bulma
UIKitMaterialize

9. mis eleccionesmis elecciones
MAMP PRO
Local by FlyWheel
node gulpnpm
elige lo que mejor te funcione a
ti, no hay una fórmula que sea la
mejor para tod@s!

10. Starter themesStarter themes
Underscores
FoundationPress
HTML Blank
Bones
Sage
Tonik
Understrap

11. Empezar Empezar
instalar:
node (desde su web)
npm (actualizar desde el terminal)
gulp (desde el terminal)
inicializar:
npm
La primera vez Siguientes proyectos
configurar (cambiar
proxy)
instalar el tema
npm install

12. Verificar e instalarVerificar e instalar
instalar npm:
npm -v ver versión instalada
npm install npm@latest -g
instalar última (si es anterior
a 6.4.1) de forma global (-g)
instalar gulp:
npm install --global gulp-cli
instalar última versión de
gulp de forma global (-g)

13. Crear temaCrear tema
Vamos a underscores.me y generamos el tema
En este ejemplo no lo "sassificamos" pero también podriáis hacerlo

14. Activar tema Activar tema

15. Inicializar proyectoInicializar proyecto
npm init crear package.json
npm i --save-dev gulp@3.9.1
instalar gulp como
dependencia (versión 3.9.1)
git init inicializar git
empieza la fiestaempieza la fiesta

16. package.jsonpackage.json

17. gulpfile.jsgulpfile.js
creamos el fichero gulpfile con estas líneas
de código

18. .gitignore.gitignore
creamos el fichero gitignore con
instrucciones básicas

19. ejecutando gulpejecutando gulp
ahora ya podemos lanzar el comando gulp
que lanzará la tarea por defecto y
ejecutará el código

20. sassificando el tema (I)sassificando el tema (I)
creamos carpeta assets y subcarpetas:
css/sass
copiamos contenido de style.css a
nuevo fichero sass/main.scss
dejamos sólo cabecera en style.css

21. sassificando el tema (II)sassificando el tema (II)
npm i --save-dev gulp-sass instalar sass compiler
npm i --save-dev gulp-autoprefixer instalar autoprefixer
inicializar source-maps npm i --save-dev gulp-sourcemaps

22. sassificando el tema (III)sassificando el tema (III)

23. sassificando el tema (IV)sassificando el tema (IV)
modificamos el fichero
gulpfile añadiendo los
nuevos módulos y
creando una tarea
llamada styles que de
momento sólo compila y
añade prefijos

24. sassificando el tema (V)sassificando el tema (V)
Ahora, si lanzamos la
tarea 'gulp styles' nos
compilará y creará el
fichero main.css
Modificar functions.php incluyendo el enqueue de main.css

25. viendo los resultadosviendo los resultados
Modificamos main.scss Obtenemos main.css

26. sigue la fiestasigue la fiesta
diferenciamos las tareas de
desarrollo de las de producción

27. gulpfile.jsgulpfile.js
inicializar browsersync:
TAREAS DESARROLLO (I)

28. gulpfile.js gulpfile.js
TAREAS DESARROLLO (II)

29. gulpfile.js gulpfile.js
TAREAS DESARROLLO (III)
tarea default en watch

30. gulpfile.js gulpfile.js
TAREAS PRODUCCION (I)

31. gulpfile.js gulpfile.js
TAREAS PRODUCCION (II)

32. gulpfile.js gulpfile.js
TAREAS PRODUCCION (III)

33. gulpfile.js gulpfile.js
TAREAS PRODUCCION (IV)

34. Organización temaOrganización tema
wp-content/themes/wcbcn2018
tras la inicialización tenemos nuevo:
carpeta node_modules
gulpfile.js
package.json

35. Oganización tema (II)Oganización tema (II)
creamos carpeta resources y ponemos
todo el contenido original del tema
dejamos en la raíz los nuevos ficheros y
la carpeta node_modules
creamos carpeta assets/images
movemos carpeta js a assets/js
modificamos functions.php con nuevas
rutas
dividimos sass en carpetas
importamos ficheros en main.scss
creamos carpeta dist en raiz, ahí irán
los ficheros compilados, concatenados
y minificados
Reorganizamos el contenido:

36. Oganización tema (III)Oganización tema (III)
tras gulp dev:styles
tras gulp prod:

37. functions.phpfunctions.phpen functions.php (after_setup) creamos constantes globales con los dirs correspondientes
según el entorno:

38. functions.php (II)functions.php (II)
en functions.php hacemos enqueue condicional segun el entorno:

39. añadir assetsañadir assets
en cualquier fichero php donde queramos insertar una imágen o
cualquier otro asset lo enlazamos con la constante ASSETSDIR
para que sepa cuál debe ir a buscar en función del entorno:

40. a tener en cuentaa tener en cuenta
gulp 4.0
webpack

41. graciasgracias
WordCamp Barcelona - 2018
@nuriarai
https://github.com/nuriarai/gulp-talkWP-boilerplate.git
Todos los ficheros en git: