Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

WordPress práctico: Creación básica de temas

Descripción del gulpfile.js

¡Prueba gratis durante 10 días

nuestros 1291 cursos !

Prueba gratis Mostrar modalidades de suscripción
Es importante entender un poco cómo funciona nuestro automatizador de tareas, así que en este vídeo explicaremos básicamente el contenido del gupfile.js, que es el archivo que le va a ir diciendo a Gulp lo que tiene que hacer mientras desarrollamos el tema.

Transcripción

Dentro de NetBeans he creado un nuevo proyecto basado en PHP con archivos ya existentes. Eso me ha creado este proyecto wp_temas, que es el nombre de la carpeta del proyecto de WordPress que he creado. Dentro de él, voy a trabajar siempre en la carpeta wp-content themes, donde tengo los temas y luego mitema que es el tema que he creado previamente. En él tengo muchos archivos. Tengo un archivo que se llama gulpfile.js, Este archivo es el que se va a ocupar de esa automatización. En él tengo, por un lado, la importación de todas la librerías que voy a necesitar usar. Por otro lado, tengo una tarea que se llama sass y que se va a ocupar, precisamente, de generar el archivo style.css-final, este de aquí, y lo va a hacer utilizando como punto de entrada el archivo style.scss, que es el archivo que tengo en la base de la carpeta sass. Este archivo tiene toda una serie de importaciones que se van a ocupar de cargar otros archivos distintos, al final, se van a acabar mezclando en uno solo y lo que le pido es que cuando termine me guarde ese archivo dentro de la raíz. Aquí lo tendría. Esto haría que me guarde el archivo style.css. Por otro lado, tengo también, trabajo con JavaScript. Una tarea javascript y una tarea lint. Esta tarea lint va a servir para verificar la calidad del código de JavaScript que estoy utilizando y la carpeta de javascritp me va a buscar dentro de la carpeta js, voy a irme a ella, dentro de la carpeta custom, todos los archivos de JavaScript que haya dentro de ella y, también, lo que va a hacer va a ser combinármelos, me los va a guardar dentro de la carpeta javascript y los va a guardar, por cierto, con el nombre all.min.js Eso servirá para que luego yo cargue este archivo all.min.js y solo ese y entonces limite la carga de diferentes archivos y limite el peso necesario para cargar nuestro sitio. Y, por último, hay una tarea también, imagemin que se ocupa de la optimización de las imágenes. Las busca dentro de la carpeta raw, aquí lo vemos, y me va a coger todos los archivo que haya en ella y me los va a optimizar y guardar en la carpeta bin dentro de esa misma carpeta image. Así que, todas las imágenes que utilice dentro de "mitema" las meteré dentro de la carpeta bin en la carpeta image. Aparte de eso, también estoy ejecutando livereload constantemente. Este va a servirme para que el navegador sepa que ha habido cambios y recargue automáticamente la página donde estoy. Por último, tengo una serie de watch o sea, gulp se va a molestar en buscar cualquier cambio que haya en estas carpetas de las que he estado hablando, en custom, en image/raw y en sass y va a ejecutar las tareas necesarias. Esto es lo que va a hacer, vamos a ver ahora, si realmente, lo hace. Tendré que irme al símbolo del sistema en la carpeta donde estábamos, o sea, en la carpeta del tema y escribiré la orden gulp. Si todo está correctamente instalado va a leerme el archivo gulpfile y va a ejecutar todas las tareas que he comentado. De hecho, efectivamente, me dice todo lo que va a hacer, incluso, me va avisando el sistema de que se van generando todas esas tareas. Entonces, me está diciendo que se ha terminado la tarea sass, Aquí vemos que ha ido terminando cualquiera de ellas, incluso, si yo ahora abro de nuevo NetBeans, voy a abrirlo un poco más pequeño, y hago cualquier modificación en cualquier archivo, por ejemplo, en este style.scss si ahora lo guardo, inmediatamente, vemos que también me ejecuta esa tarea. Así que, ya tenemos instalado correctamente el sistema para tener un flujo de trabajo potente para poder trabajar en nuestro Tema utilizando sass.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.