Compilar archivos SASS con gulp

En el post anterior pudimos ver el proceso a seguir para realizar la instalación de la herramienta Gulp.js y configuramos nuestro primer proyecto, que nos ayudará a compilar archivos SASS.

Recuerda revisar nuestro post anterior para ver el proceso de instalación y configuración de gulp paso a paso.

Para este post damos por sentado que tienes conocimientos básicos de SASS, en caso contrario te dejamos una buena guía aquí: https://sunlightmedia.org/es/sass/

Creando la carpeta para nuestro proyecto.

Creamos una carpeta llamada compilar-sass que será utilizada para almacenar los archivos de nuestro proyecto. Dentro de esta carpeta vamos a agregar dos carpetas con los siguientes nombres:

• sass: En esta carpeta almacenaremos nuestros archivos SASS
• css: En esta carpeta guardaremos el resultado de nuestros archivos SASS ya compilados a CSS

Preparando el proyecto

Creamos un archivo llamado package.json dentro de nuestro proyecto y agregamos el siguiente contenido:

Preparando el proyecto

Creamos un archivo llamado package.json dentro de nuestro proyecto y agregamos el siguiente contenido:

{
   "name": "compilar-archivos-sass",
   "version": "1.0.0",
   "description": "Aprendiendo a compilar archivos sass con gulp",
   "main": "gulp.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "gulp": "^4.0.2"
   }
 }

Agregando gulp.js a nuestro proyecto

Abrimos una terminal en la ruta de nuestro proyecto y ejecutamos la siguiente línea de código:

npm install --save-dev gulp

Este comando descargará los módulos necesarios para utilizar gulp en tu proyecto, al finalizar el proceso deberás de tener una estructura similar a la siguiente en tu actual carpeta.

Importamos la librería gulp y el modulo gulp-sass

const gulp = require( 'gulp' ); //Cargamos nuestro modulo gulp
const sass = require( 'gulp-sass') //Cargamos el modulo gulp sass

Creamos la tarea para realizar el proceso de compilado:

gulp.task('sass', function() { 
	return gulp.src('./sass/main.scss') //agregamos la ruta de nuestro archivo sass
		.pipe(sass.sync().on('error', sass.logError)) //Llamamos a la función Sass.sync() que realiza el compilado de sass
		.pipe(gulp.dest('./css/')); //Definimos el resultado del compilado que sería dentro de nuestra carpeta css
});

Guardamos nuestro archivo, y ejecutamos nuestra tarea con el siguiente comando en consola

$ gulp sass

Deberíamos tener el siguiente output.

Ahora podemos ver dentro de nuestro directorio css el resultado del sass compilado, aquí te dejo una comparativa:

$primary-color: red;
$secondary-color: blue;
$padding-elements: 0px; 
.main-content{
    .p{
        font-size: 12px;
        color: $primary-color;
        a{
            color:black;
            text-decoration: none;
        }
    }
    h1{
        color:$secondary-color;
        font-style: bold;
        padding: $padding-elements;
    }
}

.main-content .p {
  font-size: 12px;
  color: red; }
  .main-content .p a {
    color: black;
    text-decoration: none; }

.main-content h1 {
  color: blue;
  font-style: bold;
  padding: 0px; }

De esta manera podemos utilizar una de las muchas características de automatización que nos ofrece gulp, en las próximas entradas exploraremos más a fondo distintas propiedades, para sacarle el máximo provecho a esta herramienta.

Aquí te dejo el repositorio con el código para que puedas comparar tu resultados:

https://github.com/gumonet/posts-gulp/tree/master/compilar-sass