Cuando trabajamos con desarrollo web debemos tener en cuenta muchos aspectos para optimizar el tiempo de carga de nuestras aplicaciones. Laravel Elixir es una herramienta que nos ayuda en este sentido, dándonos la oportunidad de compilar y minificar assets, de tal modo que podamos usar en producción archivos mucho mas livianos, por supuesto, todo esto es posible al gestor de tareas programadas Gulp.
Laravel Elixir es un paquete de Node.js que ha sido diseñado pensando específicamente en Laravel, pero a su vez, puede ser usado en otros tipos de proyectos como lo hicimos en el post Configuración de Elixir en proyectos fuera de Laravel. Hoy hablaremos de otro paquete de Node.js que nos permite comprimir todos los archivos de imagen de nuestra aplicación con Elixir y Gulp. Ver post
Hoy en la lección 4, aprendemos la sintaxis para definir y utilizar variables en Sass. Las variables, como en cualquier otro lenguaje de programación, son pequeñas piezas de información almacenadas con un identificador, que podemos reutilizar a lo largo de nuestros proyectos, lo cual nos da mucha flexibilidad y facilidad para trabajar con colores, medidas, fuentes y otros detalles de manera consistente.
Regístrate para ver ésta y cientos de lecciones exclusivas.
Elixir es la herramienta oficial de Laravel para el manejo de assets dentro del framework.
Elixir provee una clara y fluida API para definir tareas básicas de Gulp en tus aplicaciones de Laravel. Elixir soporta muchas de los comunes pre-procesadores para CSS y JavaScript, incluyendo herramientas para pruebas.
Cuando ejecutamos «npm install» por primera vez en un proyecto de Laravel, se instalan las dependencias definidas en el archivo package.json ubicado en la raíz del proyecto. Hoy aprenderemos a crear un nuevo proyecto desde cero utilizando npm y a cómo configurar Elixir para compilar fácilmente los assets de tu aplicación. Ésta es una solución muy útil a la hora de trabajar con maquetado de proyectos o sitios estáticos (solo front-end). Ver post
Hoy aprendemos a trabajar con las diferentes formas de anidar elementos en Sass. Haciendo uso de esta característica en diferentes atributos del lenguaje, nos permite escribir menos, y crear código más conciso y mejor estructurado que ademas es más fácil de entender y queda mejor organizado. También nos ahorra muchísimo tiempo al trabajar con proyectos grandes donde debemos escribir estilos para muchos componentes distintos.
Una vez que te acostumbres a anidar en Sass, te preguntarás cómo habías trabajado tanto tiempo antes sin usarlo.
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección aprenderemos cómo trabajar con archivos en Sass a través de los distintos modos de compilación para modificar el tipo de archivo que obtenemos, y también veremos cómo controlar la generación de sourcemaps usando el compilador, para así tener control total del archivo CSS final y a la vez tener flexibilidad para encontrar errores o inspeccionar el código en el navegador.
Por otro lado, aprendemos cómo Sass extiende la regla @import para darnos la ventaja de usar archivos parciales y a través de algunos ejemplos veremos cómo los parciales nos ayudan a organizar mejor el código.
Regístrate para ver ésta y cientos de lecciones exclusivas.
Sass ha estado disponible ya por más de diez años y muchos grandes proyectos se han hecho basados en Sass, incluyendo otros proyectos similares como lo son Less y Stylus, y también una cantidad de frameworks y herramientas que son posibles gracias a estos. Con este curso vas a aprender Sass a fondo, desde lo más básico hasta las características más avanzadas.
Hoy en día es muy fácil empezar a usar Sass, pero una de las características más importantes de este lenguaje, es que todas las cosas que veremos en este curso, son opcionales. Tú puedes decidir cuando usar cada cosa, ya que en Sass, a diferencia de otros pre-procesadores, podemos escribir CSS tradicional y funciona perfectamente. Además, ten en cuenta que Sass te ayuda a ti a desarrollar pero como siempre se compila a CSS tradicional, no es necesario que instales nada extra en tu servidor. Ver post
En esta lección vamos a ver cómo usando Gulp y BrowserSync te puede ayudar a acelerar aún más tu flujo de trabajo, corriendo un servidor local para archivos estáticos, refrescando automáticamente el navegador o inyectando los estilos directamente al navegador cada vez que modificas tus archivos.
Regístrate para ver ésta y cientos de lecciones exclusivas.
A través de Browserify, podemos usar el método require para instalar paquetes de npm, o incluso archivos locales en nuestra aplicación de la misma forma como requerimos paquetes en el archivo gulp, incluyendo librerías como jQuery y plugins de jQuery, pero además Browserify se encargará de concatenar estas dependencias en un solo archivo que va a contener todo lo requerido por la aplicación. También hablamos sobre Webpack y como se compara a Browserify y Gulp.
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección del Curso de Gulp aprenderemos un poco sobre Globbing, esto hace uso de algunos patrones de expresiones regulares para identificar nombres y extensiones de archivos, y nombres de directorios. Estos patrones los llamamos globs y aquí vamos a aprender cómo usarlos. Además, lo usaremos para crear una tarea con la cual eliminaremos archivos y directorios.
Regístrate para ver ésta y cientos de lecciones exclusivas.
La lección del Curso: Gulp y herramientas de automatización de hoy está dedicada a la optimización de imágenes. Usando el paquete gulp-imagemin aprendemos como procesar distintos tipos de imágenes para reducir su peso, sin disminuir su calidad. También aprendimos como usar arrays para filtrar los tipos de archivos que queremos procesar.
Regístrate para ver ésta y cientos de lecciones exclusivas.
Styde usa cookies para guardar tus preferencias y para seguimiento anónimo AceptarLeer más
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
