Como compilar archivos .scss (sass) con Gulp.js
1 respuesta
veo que hay mucha informacion en español en la web sobre como hacer compilar un archivo SCSS a CSS usando Gulp y sass, aqui dejo un ejemplo de como hacerlo!
const { src, dest, watch} = require('gulp'); //Llamamos las funcionabilidades de gulp "src" para source que es de donde vamos a leer la informacion, "dest" para destination o destino (de donde vamos a mandar el archivo que creemos) y "watch" para observar un archivo o funcion
const sass = require('gulp-sass')(require('sass'));//Llamamos en la constante a la variable de gulp-sass, y le definimos el motor sass en el segundo require, ya que gulp-sass actualmente no tiene, podriamos elegir dart-sass, etc.
//creamos la funcion que va a compilar nuestro scss a css
function css( done ) {
src('src/scss/**/*.scss') //aqui estamos diciendole a src, donde tiene que ver el archivo scss, la sintaxis de **/*.scss indica que busque tanto en la raiz de scss como en los archivos que se encuentren dentro las carpetas que tengamos dentro y nos compile los archivos que finalicen en .scss
.pipe(sass())//compilar con la funcion sass el archivo
.pipe(dest('css/')) //almacenarlo en el dest o destino que elijamos, recordemos que el nombre que lleve el scss principal que compilemos, es el mismo nombre que recibiar en la carpeta css nuestro archivo, osea que si lo llamamos estilos.scss, en la carpeta css tendremos estilos.css.
done();//callback
};
function compilacion( done) {
watch( 'src/scss/**/*.scss', css);//ahora usamos el watch que habiamos llamado en gulp, que lo que hace es "observar" los cambios sobre los archivos en raiz y carpetas dentro del directorio scss, siempre y cuando los archivos que modifiquemos finalicen con la extension scss.
done();
};
exports.css = css;
exports.compilacion = compilacion;
//exportamos las dos funciones, pero a la hora de "llamarlas" con la terminal de VSC, la cual abrimos con ctrl + ñ, y escribimos gulp compilacion, y listo nos dara un msj como este la consola
//nota: recordemos que como sintaxis de scss, demos tener un archivo principal ej "mainStyles.scss" el cual anidara todos los demas archivos que tendran la sintaxis "_variables.scss", "_home.scss", y asi sucesivamente usando @import o @use/forward. Espero poder ayudar y sumar algo!
Saludos!