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

WordPress práctico: Creación avanzada de temas

Gulp y la automatización de tareas

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
En el tema que estamos utilizando vamos a usar SASS para crear los estilos CSS, y usaremos Gulp para combinar archivos de JavaScript y optimizar imágenes. Para poder hacer esto tendremos que poner en marcha Gulp, y este vídeo lo dedicamos a este tema.

Transcripción

Estamos creando un tema utilizando tecnología moderna. Eso supone que necesitamos un automatizador de tareas para que el resultado del tema sea óptimo. Estoy hablando de que nuestro JavaScript, por ejemplo, se combine todo en un solo archivo, este all.min.js, que sea el que utilice. Aparte de unos pocos archivos más que también podríamos haber metido, pero que he preferido mantener fuera. Por otro lado, tenemos sass. Entonces tendremos que generar archivos .css basándonos en nuestros archivos .scss, de nuestro tema. Además, esos archivos deberían de aparecer completamente optimizados. Y, por último, también vamos a trabajar con optimización de imágenes. Vamos a optimizar las imágenes que metamos dentro de la carpeta raw, y van a aparecer en la carpeta bin. Para que todo esto se pueda realizar fácilmente, necesitaré instalar toda una serie de cosas. Bueno, en principio, vamos a utilizar un automatizador de tareas que es el que se utiliza más hoy en día que es el gulp. La ventaja que tiene gulp sobre ningún otro es que nos permite programar las tareas que se tienen que ejecutar mediante JavaScript. Pero para instalar gulp vamos a necesitar el instalador de paquetes de Node.js. Así que lo primero que tendremos que hacer es entrar en nodejs.org y descargarnos la versión —en este caso es la 6 la recomendadada para la mayoría— que tiene un ejecutable muy simple. Básicamente es arrancarlo, mantener las opciones que tiene por defecto, y solo cuando haya terminado, entonces podré abrir el terminal. Y desde el terminal podré ejecutar npm install gulp-cli -g. Eso me va a instalar gulp en todo el ordenador, de manera global. Gracias a eso, ya tendremos instalado gulp. El siguiente paso es instalar Sass. Para instalar Sass, también tendremos que hacerlo desde la línea de comandos, pero necesitamos otra cosa: necesitamos tener instalado Ruby en nuestro ordenador. No hay que asustarse. En caso de Mac, Ruby ya lo tenemos instalado por defecto. Y, en caso de PC, tenemos la página rubyinstaller.org, que en el botón Download podemos seleccionar la versión que nos interese. Cualquiera de las dos podría valer; depende de nuestro ordenador. Que también va a tener un instalador muy simple que se va a ocupar, pues, efectivamente de la instalación de Ruby en nuestro sistema. Una vez hecho eso, tendremos que volver a abrir el terminal de nuevo. Y para instalar Sass, puedo pulsar en el botón Install. Y vemos que, en el caso de Windows, lo podremos hacer desde el terminal con gem install sass. Es tan fácil como eso. Se ocupará de hacer toda la descarga, y ya estaría listo. En el caso de Mac, en cambio, es posible que, dependiendo de los permisos que tengamos al abrir el terminal, tengamos que añadir sudo, espacio, en la parte de delante. O sea, al principio de toda la orden. Para estar seguros de que tenemos todo correctamente instalado, pues en el terminal podemos escribir. Voy a abrir un terminal. Y, dentro del terminal, pues tendré que escribir node -v. Me devolverá la versión de Node.js. ruby -v me devuelve la versión de Ruby. sass -v me devolverá la versión de Sass. Si me devuelve todas estas versiones, es que está instalado todo correctamente. Si fallase alguno de ellos, es que no estaría correcta esa instalación. Una vez que he hecho esto, me quedan todavía un par de detalles. No va a ser necesario crear un archivo gulpfile para trabajar con todo este sitio. No va a ser necesario porque dentro de los archivos base del curso nos encontramos con un archivo gulpfile y con un archivo package.json. Voy a copiar ambos archivos y voy a pegarlos dentro de mi tema. El archivo gulpfile es el que tiene toda la configuración de gulp para hacer todas las tareas que he comentado. El archivo package.json se va a ocupar de la instalación de todas las librerías necesarias para que gulp funcione. Pero esa instalación, después de haberlo copiado, tiene que ejecutarse. Así que tengo que volver a la línea de comandos. Y desde la línea de comandos, en la carpeta —aquí la podemos ver—, en la carpeta de mitema, tengo que añadir npm install. npm es el instalador de paquetes de Node.js. Va a leer el archivo package.json, va a buscar todas las dependencias que tienen todas las librerías, y se va a ocupar de efectuar toda la descarga. Esto va a tardar un ratillo, porque son muchas dependencias las que necesita para que nuestro gulpfile funcione correctamente. Bien, pues ya ha terminado; ha instalado todo esto. Podemos comprobar que la instalación ha sido correcta, bueno, en principio, porque no hay ningún error en el símbolo de sistema y, por otro lado, porque ahora me ha creado una carpeta node_modules en la que tengo todas las librerías que se han creado. Y, ya, para acabar de probar si todo funciona correctamente, escribiré gulp, pulsaré Intro y si todo está correctamente instalado, como se ve que está, aquí podemos observar que me avisa de que ha realizado todas las tareas que lleva montadas. Para acabar el vídeo, voy a abrir este gulpfile, y vamos a ver qué es lo que está haciendo. Bueno, pues, por un lado, tengo una tarea Sass que, como digo, lo que hace es combinar todos los Sass, añadirles un sourcemaps al CSS y, por último, limpiarle y añadirle también prefijos para que funcione siempre en todos los navegadores. Por otro lado, una tarea JavaScript, que se ocupa primero de verificar la calidad del código JavaScript que estoy usando. Y, por último, encadenar en este all.min.js. Y, para terminar, también una optimización de imágenes que, básicamente, va a hacer que sean progresivas y que, en caso de las que lo admitan, también estén entrelazadas. Va a comprobar, además, que haya cambios en cualquier archivo .scss, JavaScript o en los archivos de imagen y, en caso de que encuentre cualquiera de esos cambios, automáticamente recargará toda la página porque también tiene el livereload. Voy a buscarlo... Como este, por ejemplo. Eso va a servir para que me recargue la página automáticamente. Para que recargue esta página, no obstante, tendré que tener instalado, ya para terminar, es la última cosa que hace falta, tendré que tener instalado el LiveReload dentro del navegador. Hay diferentes extensiones que sirven para ello. Entonces, cuando yo esté en nuestra página, tendré que pulsar en ese Enable LiveReload. Y aquí vemos que está conectado y, entonces, cualquier cambio que pueda hacer, automáticamente se reflejará sobre el navegador, cosa que es muy cómoda. Bueno, pues, con todo esto, ya tengo configurado el automatizador de tareas, el task runner, para empezar a desarrollar.

WordPress práctico: Creación avanzada de temas

Aprende a crear temas para WordPress, el CMS más utilizado a nivel mundial, para que tus temas, además de tener un diseño original, se comporten de forma inteligente.

2:51 horas (30 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:3/08/2017
Duración:2:51 horas (30 Videos)

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.