Gulp y css

Ivan Martil

En artículos anteriores hemos iniciado un proyecto con gulp y aprendido a configurar plugins como sass y browserSync. Continuando con la creación de un entorno de desarrollo basado en gulp nos centraremos en el desarrollo  y optimización de css.

Hasta el momento si ejecutamos gulp en nuestro proyecto logramos compilar sass y ver automáticamente los cambios en el navegador. Pero hay un pequeño inconveniente. Cuando trabajamos en sass no tenemos un único archivo .scss y en ese caso nuestro entorno no acaba de funcionar bien. Hagamos la prueba. En nuestra carpeta scss creamos un par de archivos. Si hemos seguido la estructura establecida en el primer artículo deberíamos tener algo como esto (excepto los archivos en fondo naranja) :


migulp
  dist
    css
      style.css
  node_modules
  src
    img
    js
    scss
      nav.scss
      blog.scss
      style.scss
  gulpfile.js
  package.json


Hemos creado ahora los archivos blog.scss y nav.scss. Si ejecutamos gulp y realizamos algún cambio en cualquiera de los tres archivos .scss automáticamente se compilan los tres de manera individual dentro de nuestra carpeta css. Este modo de compilar sass solo es efectivo si tenemos incluidos en nuestro index todos los archivos css y eso no es nada aconsejable. El objetivo es poder tener múltiples archivos scss pero que al compilar den como resultado un solo archivo css. Para ello cambiaremos la estructura de nuestra carpetas scss.

  • scss
    • components
      • blog.scss
      • nav.scss
    • style.scss

Modificaremos la ruta de la variable input para que solo incluya style.scss:


//vieja ruta variable input
var input ='./src/scss/*.scss
//nueva ruta variable input
var input ='./src/scss/style.scss

Y añadiremos una nueva ruta en gulp.watch con la intención de ejecutar la tarea sass al modificar cualquier archivo en components:


//ruta antigua watch
 gulp.watch(input , ['sass']);
//nueva ruta watch
 gulp.watch( 'src/scss/**/*.scss' , ['sass']);

De este modo solo compilamos style.scss donde incluiremos el resto de archivos empleando @import.

 
@import "components/nav.scss";
@import "components/blog.scss"; 

Con estas modificaciones logramos crear un único archivo con todo nuestro css.

Ahora que nuestra estructura funciona sin problemas veamos cómo interpreta el navegador nuestros archivos. Para ver un ejemplo de lo que pretendo explicar abrimos el archivo index.html y escribimos el siguiente código:

<p class="blog">Soy clase blog</p>
<p class="nav">Soy clase nav</p>

Cada <p> tiene una clase asignada. La idea es crear cada clase en un archivo scss diferente:


/*En el archivo blog.scss creamos la clase .blog*/
.blog{
background-color:green;
}
/*En el archivo nav.scss creamos la clase .nav*/
.nav{
background-color:purple;
}

Abrimos el inspector de nuestro navegador y nos encontraremos que no tenemos manera de localizar el origen de nuestras clases. Ambas están ahora en el archivo styles.css. A medida que los archivos css crecen resultaría imposible conocer donde debemos modificar o que archivo es el causante. Para solucionar este problema vamos a instalar un plugin de gulp.

Gulp-sourcemaps

El plugin sourcemaps nos permite ubicar nuestro css en el inspector. Como su nombre indica establece un mapa de nuestro código. Crea una comunicación entre sass y css guardando un registro de la procedencia de cada regla.

Lo primero instalar el plugin npm install gulp-sourcemaps --save-dev y añadir la dependencia a nuestro gulpfile.js var sourcemaps = require('gulp-sourcemaps');

Debemos modificar la tarea sass para incluir sourcemaps. Es tan sencillo como añadir sourcemaps.init justo después de indicar el origen y sourcemaps.write antes de indicar el destino.

gulp.task('sass', function(){
 return gulp
 .src(input)
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write('./maps'))
 .pipe(gulp.dest(output))
 .pipe(browserSync.stream());
 });

Añadiendo dos líneas de código ya tendríamos funcionando el plugin. En mi caso añado una ruta en .write(‘./maps’) para mantener el css más limpio y aglutinar allí todos nuestros mapas.

inspector-maps
Imagen 1

Si abrimos el inspector de elementos  ahora no tenemos ningún problema en ubicar el archivo origen de nuestras clases (imagen 1). Al seleccionar la clase blog nos muestra su archivo de origen blog.scss y la línea donde se inicia la regla. En el caso de que no aparezca el archivo .scss como origen debemos asegurarnos de que el navegador tiene habilitada la opción de source maps. En el caso de Chrome con el inspector abierto presionamos F1 para acceder a settings. En el apartado General>Source tenemos la opción Enable CSS source maps. La seleccionamos y ya tendremos nuestros mapas activos.

 

Comentarios 0

Nadie ha comentado nada aún. Te animas ha ser el primero!! ;)

Opina libremente

Tu dirección de correo electrónico no será publicada.Todos los campos son obligatorios.