preprocesadores css y js laravel

Cómo administrar tu CSS y JS en Laravel 5

Ya hemos visto como construir plantillas y extender las vistas para que hereden de ellas todo el contenido por medio de los campos o secciones. Pero, ¿qué pasa con los archivos CSS y JS? ¿Dónde los debemos situar?

Cómo administrar tu CSS y JS

Muy sencillo. Vamos a suponer que tenemos que trabajar con pequeños proyectos donde a lo mejor solamente tendremos un archivo para estilos y otro de scripts. Estos archivos estarán almacenados en el directorio public/. Dentro de este directorio, lo aconsejable siempre es crear una carpeta para CSS y otra para JS. Entonces tendríamos los directorios siguientes: /public/css/style.css para los estilos y /public/js/main.js para los scripts de JavaScript (todo esto como ejemplo).

Hasta aquí no hay ningún problema. Planteémonos la siguiente situación: ¿Y si ahora quiero usar preprocesadores como Less o SASS? Vamos a ver de que manera podemos solucionar este inconveniente, ya que los preprocesadores necesitan compilarse para poder ejecutarse y fabricar los archivos de estilo.

Vamos a hablar ahora del archivo gulpfile.js. Este archivo se va a encargar de ejecutar la API de Elixir. Elixir nos ofrece un fluido y limpio gestor de tareas Gulp en nuestra aplicación. Soporta varios preprocesadores CSS y JS (si queremos usar por ejemplo Sass, tenemos que cambiar el mix a sass)

y para instalar Gulp tan solo debemos instalar vía Node con el siguiente comando en la terminal:

npm install –global gulp

Ahora vamos a instalar Elixir y todas las dependencias que tengamos agregadas a nuestro fichero package.json lanzando este comando:

npm install

Para crear nuestros archivos para Sass debemos alojarlos en el directorio /resources/assets/sass/[nuestro_archivo.scss]. En este archivo haremos todas las modificaciones para nuestra hoja de estilo bajo las premisas de Sass. Ahora solo nos falta compilarlo…

…Es hora de poner a trabajar a Gulp, tan solo ejecutamos gulp. Si añadimos —production le mandaremos a Elixir que minimice los archivos CSS y JS.

gulp --production

Como resultado, se ve claramente que ha sido compilado nuestro archivo app.scss y ha sido guardado en /public/css/app.css junto con otro archivo map que por defecto genera Sass. De esta manera es muy fácil el manejo de preprocesadores en Laravel, como ya he dicho, siempre y cuando nuestros proyectos estén muy crecidos y no tiremos del método simple comentado al principio.

Deja un comentario