Información de: WordPress con Sass y Gulp
Aprende a crear trabajo automatizado y efectivo en WordPress con Sass y Gulp
Trabaja de manera efectiva con WordPress usando el preprocesador Sass para compilar tu código, y Gulp, la herramienta de automatizado de tareas. Descubre en este curso cómo diseñar un flujo de trabajo ideal para cualquier desarrollo frontend y, en concreto, para la creación de temas para WordPress. Aprende cómo instalar Sass y Gulp y cómo programar este último para automatizar la compilación de tus archivos javascript. Aplica otras tareas automáticamente, como la actualización en el navegador o la optimización de imágenes y, en definitiva, aprende a desarrollar un flujo de trabajo efectivo para construir o modificar tus temas para WordPress.
Introducción al curso WordPress con Gulp y Sass
En este primer capítulo vamos a describir para quien está dirigido el curso, qué conocimientos mínimos ha de tener, cómo usar los archivos base del curso y por qué utilizar tanto Sass como Gulp cuando desarrollamos temas para WordPress.
Destinatarios del curso WordPress con Gulp y Sass 02:12
WordPress con Gulp y Sass: archivos base 01:08
Objetivos finales de WordPress con Gulp y Sass 01:42
Por qué utilizar Sass 02:01
Por qué utilizar Gulp 02:48
Configuración del entorno de desarrollo
Antes de empezar a utilizar Gulp y Sass dentro de WordPress, necesitamos empezar por configurar nuestro entorno local de trabajo. En este capítulo no vamos a explicar cómo configurar el entorno, pero si vamos a repasar los elementos de entorno que tendremos que tener listos para empezar a trabajar.
Instalación del servidor local e instalación de WordPress 01:42
IDE de desarrollo 01:21
El tema underscores. Instalación de mi nuevo tema 04:02
Plugins y entorno de desarrollo en WordPress 04:50
Instalación de Gulp, Sass y todas sus dependencias
La instalación de lo necesario es un proceso que, aunque no es complejo, sí que exige seguir ciertos pasos imprescindibles, así que dedicaremos este capítulo a instalar Gulp paso a paso, y haremos lo mismo con Sass.
Instalación de Node.js 02:17
Instalación de Ruby 02:25
Instalación de Sass 01:22
Instalación de Gulp 01:47
Instalación del package.json y de Gulp en el proyecto 06:58
Instalación y configuración de Git 06:27
Configuración inicial de Gulp
A partir de este momento del curso vamos a utilizar realmente Gulp. Iremos creando las tareas necesarias para el desarrollo del tema, y en este capítulo empezaremos con la principal, que es la configuración para compilar Sass.
Instalación de las dependencias básicas: gulp y watch 02:42
Creación de gulpfile.js Dependencias dentro de Gulp 03:40
Creación de tareas en Gulp: tarea watch y tareas iniciales 05:13
Control de errores: instalación de plumber y notify 09:00
Poniendo en marcha nuestro primer Gulp 03:18
Gulp y Sass
Ya tenemos Gulp funcionando y también las primeras tareas preparadas, así que dedicaremos este capítulo a configurar la compilación automática de Sass y haremos varias mejoras sobre el código CSS y los archivos que se generen.
Instalación de dependencias: sass, clean-css, autoprefixer 02:32
Creación de la tarea Sass 03:42
Preparación de los archivos CSS finales. Aplicando prefijos 04:58
Creación de sourcemaps para los archivos Sass 04:28
Gulp y javascript
El siguiente paso en la automatización a través de Gulp va a ser gestionar el procesamiento de los archivos javascript del tema. En el tema base hay muy pocos, pero si hacemos un tema un poco sofisticado es muy probable que tengamos necesidad de estas tareas.
Preparación del tema para añadir javascript personalizado 04:06
Instalación de dependencias: jshint, concat, uglify 02:31
Creación de la tarea javascript 08:13
Otras tareas: procesamiento de imágenes. Livereload
Hay muchas tareas que se pueden automatizar desde Gulp, y en este curso nos hemos decidido por añadir unas pocas más que son ampliamente utilizadas: la optimización de imágenes y el livereload para ver los cambios en el código reflejados en el navegador en tiempo real
Instalación de dependencias: imagemin y livereload 02:59
Creación de la tarea que se ocupe de gestionar las imágenes 04:03
Aplicación de livereload al tema. Plugin livereload 02:53
A partir de este punto... 00:52
Captuas:
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 comentarios:
Publicar un comentario