Jump to content

Video2Brain: Curso WordPress con Sass y Gulp


Recommended Posts

V2B-Curso-WordPress-con-Sass-y-Gulp.jpg

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.

Temario del curso
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

Ficha técnica:

Peso: 276 Mb

Duración: 01:48 Horas
Idioma: Español
Instructor: Jorge Villanueva



Compreso con WinRAR | Abrir con cualquier programa que soporte .RAR

Download01.gif

Up-4ever

https://www.up-4ever.com/gan9wrmfg9wo

Europeup

https://www.europeup.com/6430x3qqjlpn

Uplod.ws

https://uplod.ws/2wke2llnda62

Userscloud

https://userscloud.com/oy8rsrirfhnq

Pass / Contraseña: compartiresserlibres

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...