{"id":757,"date":"2021-05-02T11:56:40","date_gmt":"2021-05-02T16:56:40","guid":{"rendered":"http:\/\/gumonet.com\/?p=757"},"modified":"2021-05-08T13:38:15","modified_gmt":"2021-05-08T18:38:15","slug":"compilar-archivos-sass-con-gulp","status":"publish","type":"post","link":"https:\/\/gumonet.com\/compilar-archivos-sass-con-gulp\/","title":{"rendered":"Compilar archivos SASS con gulp"},"content":{"rendered":"\n
En el post anterior<\/a> pudimos ver el proceso a seguir para realizar la instalaci\u00f3n de la herramienta Gulp.js y configuramos nuestro primer proyecto, que nos ayudar\u00e1 a compilar archivos SASS<\/a>.<\/p>\n\n\n\n Recuerda revisar nuestro post anterior<\/a> para ver el proceso de instalaci\u00f3n y configuraci\u00f3n de gulp paso a paso<\/a>.<\/p>\n\n\n\n Para este post damos por sentado que tienes conocimientos b\u00e1sicos de SASS<\/a>, en caso contrario te dejamos una buena gu\u00eda aqu\u00ed: https:\/\/sunlightmedia.org\/es\/sass\/<\/a><\/p>\n\n\n\n Creamos una carpeta llamada Creamos un archivo llamado Creamos un archivo llamado Abrimos una terminal en la ruta de nuestro proyecto y ejecutamos la siguiente l\u00ednea de c\u00f3digo:<\/p>\n\n\n\n Este comando descargar\u00e1 los m\u00f3dulos necesarios para utilizar gulp en tu proyecto, al finalizar el proceso deber\u00e1s de tener una estructura similar a la siguiente en tu actual carpeta.<\/p>\n\n\n\n Importamos la librer\u00eda gulp y el modulo gulp-sass<\/p>\n\n\n\n Creamos la tarea para realizar el proceso de compilado:<\/p>\n\n\n\n Guardamos nuestro archivo, y ejecutamos nuestra tarea con el siguiente comando en consola<\/p>\n\n\n\n Deber\u00edamos tener el siguiente output.<\/p>\n\n\n\nCreando la carpeta para nuestro proyecto.<\/h2>\n\n\n\n
compilar-sass<\/code> que ser\u00e1 utilizada para almacenar los archivos de nuestro proyecto. Dentro de esta carpeta vamos a agregar dos carpetas con los siguientes nombres:<\/p>\n\n\n\n
Preparando el proyecto<\/h2>\n\n\n\n
package.json<\/code> dentro de nuestro proyecto y agregamos el siguiente contenido:<\/p>\n\n\n\n
Preparando el proyecto<\/h2>\n\n\n\n
package.json<\/code> dentro de nuestro proyecto y agregamos el siguiente contenido:<\/p>\n\n\n\n
{\n \"name\": \"compilar-archivos-sass\",\n \"version\": \"1.0.0\",\n \"description\": \"Aprendiendo a compilar archivos sass con gulp\",\n \"main\": \"gulp.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"gulp\": \"^4.0.2\"\n }\n }<\/code><\/pre>\n\n\n\n
Agregando gulp.js a nuestro proyecto<\/h2>\n\n\n\n
npm install --save-dev gulp<\/code><\/pre>\n\n\n\n
const gulp = require( 'gulp' ); \/\/Cargamos nuestro modulo gulp\nconst sass = require( 'gulp-sass') \/\/Cargamos el modulo gulp sass<\/code><\/pre>\n\n\n\n
gulp.task('sass', function() { \n\treturn gulp.src('.\/sass\/main.scss') \/\/agregamos la ruta de nuestro archivo sass\n\t\t.pipe(sass.sync().on('error', sass.logError)) \/\/Llamamos a la funci\u00f3n Sass.sync() que realiza el compilado de sass\n\t\t.pipe(gulp.dest('.\/css\/')); \/\/Definimos el resultado del compilado que ser\u00eda dentro de nuestra carpeta css\n});<\/code><\/pre>\n\n\n\n
$ gulp sass<\/code><\/pre>\n\n\n\n