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

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

Instalación de las dependencias para trabajar con Gulp

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Vamos ahora a instalar Gulp en nuestro sitio. Veremos que, usando el archivo de configuración de Gulp de los archivos base del curso, se pueden instalar automáticamente todas las dependencias para automatizar las tareas.

Transcripción

Con este tema, según lo hemos descomprimido, ya podríamos trabajar. Pero se trata de trabajar bien, se trata de aprovechar al máximo todo lo que nos ofrece Sass. Dentro de este tema tenemos una carpeta sass, y en ella tenemos un montón de archivos con la extensión .scss. A esos archivos, en realidad, es a dónde vamos a ir cuando queramos hacer modificaciones sobre el estilo, pero luego todos esos archivos van a generar un archivo final, que es el archivo style.css. Y este archivo es el que realmente se va a ver en el navegador. Hay diferentes formas de que se conviertan estos archivos sass en este archivo style.css, pero la mejor manera es automatizarlo, y para eso precisamente es para lo que hemos instalado Gulp Lo que pasa es que la configuración de Gulp tiene truco, exige programar un archivo que se llama gulpfile.js, y que es en el que se define todo lo que va a hacerse. Pero no hay problema, no hay que asustarse, porque en los archivos base del curso hemos añadido el archivo gulpfile.js que utilizaremos y un archivo que se llama package.json. Este segundo archivo también va a ser muy importante y nos va a venir muy bien. Voy a copiarlo y voy a pegarlo. Este segundo archivo va a definir qué plugins utilizará gulpfile, o sea, qué librerías de JavaScript son las que va a utilizar Gulp para automatizar las tareas de las que estaba hablando. Tareas que, por cierto, son más que solamente generar este sass. Por ejemplo, también quiero que me coja los archivos .js y que me los convierta todos ellos en uno solo. Voy a crear una carpeta custom, y veremos que todo lo que hay dentro de esta carpeta custom, absolutamente todo, automáticamente genere un único archivo final que sea el que se importe dentro de mi sitio. También he programado dentro de gulpfile que se busque una carpeta images, que dentro de ella haya una carpeta raw, y que en esa carpeta raw busque las imágenes que vaya añadir para utilizar dentro del sitio. No las imágenes de WordPress, las imágenes que utilice para dar aspecto al sitio. Podrían ser fondos o aspectos de botones, cosas así. Bien, pues lo que hará la tarea de Gulp será generar una segunda carpeta bin dentro de la cual meterá las imágenes que haya creado dentro de la carpeta raw, pero optimizadas al máximo. Ya tengo todo montado. Como decía, este package.json tiene toda la información de lo que voy a necesitar dentro de este Gulp. Seleccionando con el botón derecho con la tecla Mayúscula apretada, abro una ventana de comandos aquí. Y le voy a pedir a node, al npm, que me instale todo lo que voy a necesitar. Y gracias a que he copiado ese archivo package.json, él va a saber qué tiene que instalar. Me va a leer ese archivo. Y aquí vemos cómo me está buscando ya todo lo que necesita. Gracias a este archivo que es el que tiene toda la información para que npm sepa qué es lo que tiene que descargar cuando se ha ejecutado esta orden install. Esto va a tardar un buen rato, porque son muchas librerías las que se van a ir descargando y las que se van a ir creando. Una vez que haya acabado, me creará una carpeta node_modules que es donde se van a ver almacenadas todas esas librerías. Bien, pues, acaba de terminar. Me indica todo lo que ha instalado. Podemos ver la cantidad enorme de cosas que son. Y, de hecho, si me voy a mitema, aquí tengo una carpeta node_modules nueva dónde están todas esas librerías. Si yo hubiera tenido que incluir todas estas librerías en los archivos base, toda esta carpeta node_modules hubiera pesado un montón. Pero esta es la idea buenísima de utilizar el package.json. Y es que copiando este archivo y pegándolo aquí, ejecutando npm install, él automáticamente ya me descarga todo lo que necesitaba y no hace falta copiar tantos archivos. El siguiente paso, ahora que tengo ya gulpfile preparado, es ver un poco este archivo y ejecutarlo para ver que efectivamente todas las tareas de Gulp se ejecuten automáticamente.

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.