¿Cómo compilar Sass con Gulp?

Como empezar a usar Gulp: • ¿Qué es Gulp y cómo us...
Accede al curso completo Sass Desde Cero: escuela.digital/sass
Visítanos en nuestra página web escuela.digital
Síguenos en Facebook: / escueladigitalperu
Síguenos en Twitter: / edigitalperu
Únete a la comunidad Escuela Digital en Facebook:
escuela.digital/comunidad

[@andrearamirez-oh4uh]

Es increible la manera en que explica,no todos tienen la misma capacidad de poder explicar bien y que sea entendido para el publico :)

[@gasYotube]

excelente tutorial, da una explicación sencilla y clara para que cualquiera pueda usar gulp con sass. Este tipo de contenido valen oro, gracias por compartir sus conocimientos.

[@JennyRojas3103]

Excelente video tutorial muchas gracias por sus conocimientos. Desde Venezuela

[@valentinico]

genio... vi otros 5 videos... ESTE ES EL MEJOR LEJOS... me suscribo... abrazos

[@ProceseroMexicali]

Genial, definitivamente. Felicitaciones Alvaro. Ya entrados en gastos podrías presentar el plugin para Jade. Saludos desde Mexicali, Baja California, México

[@JoseDanielPossoGarcia]

Dar Like antes de ver el vídeo... porque ya sabes que es un excelente material! #LoMejorEscuelaDigital

[@johannesberrocal8474]

Excelente video en 15 minutos aprox, aprendi a compilar sass y gulp.

[@gersondanielcayo4410]

Nadie me había explicado lo importante que es el orden de las importaciones. ¡Gracias Alvaro! me estaba volviendo loco al no entender porque no compilaba mis variables y mixins, simplemente era el orden

[@ramonposadas]

increíble gracias por esos vídeos... saludos desde Honduras

[@jeisongiraldo2233]

Muy buen video. Me funcionó a la perfección. Muchas gracias. :)

[@andyj9273]

felicidades Alvaro entendí todo muy bien en todo lo q explicaste bien =)

[@PumaDev]

sos un genio te veo desde el trabajo. buen video. (Y)

[@rosmary5712]

Gracias, sos muy didáctico, me estaba dando la cabeza contra la pared, pero este código me funcionó de una

[@wilberthloria8464]

me gustoa mucho el video anterior y no pude comentarlo. muy bien explicado

[@jorgeblanco1221]

Hola Alvaro gracias por compartir tus conocimientos y aportes a la web ( ED-GRID) solo tengo una duda como construyo las rutas (path) para el método gulp.src(ruta) que no me quede muy claro. No se si se toma como referencia el archivo gulpfile.js o no un millón de gracias

[@msmrlebron]

Hola alvaro tengo una pregunta como haria para comprimir el html resultante de jade en una sola linea

[@DottoGC]

Buen video gracias. Alguna herramienta de este tipo pero para python?

[@IranPadillayoiran]

hola como usar la sintaxis de > en sublime

[@msmrlebron]

habra video para compilar jade

[@rami5040]

Estimado es un placer saludarlo, principalmente gracias por el excelente tutorial, le escribo por lo siguinte, presento un error a la hora de realizar la tarea de compilar .scss mediante gulp. El error es: Error: Cannot find module 'gulp-sass' at Function.Module._resolveFilename (module.js:538:15) at Function.Module._load (module.js:468:25) at Module.require (module.js:587:17) at require (internal/module.js:11:18) at Object. (C:\Users\elpar\OneDrive\Documentos\React.js\gasoil\gulpfile.js:5:12) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) dicho modulo lo instale y en el package.jason sale de esta manera : "devDependencies": { "gulp": "^3.9.1", "gulp-sass": "^3.1.0", "gulp-autoprefixer": "^4.1.0" } Espero que me puedas ayudar o alguno de la comunidad sin mas que decir me despido esperando una pronta y satisfactoria respuesta.

[@sebastianaraque5469]

Hola, para solucionar ese error, debes intalar gulp de manera global. NOTA debes instalar el CLI de gulp. es decir, ejecuta lo siguiente en la terminal npm install gulp-cli -g el flag -g es igual a --global, adicional a esto, debes intalar gulp (como Álvaro lo explica en el vídeo) y ya, eso es todo.

[@ronaldcgi8891]

Hola tengo uno pregunta para todos mis proyectos tengo que escribir todo este código individual o que llegue a ser más robusto o hay alguna manera de guardarlo y solo llamarlo?

[@jhoedramplus]

Tengo un problema con Phpstorm, cuando compila tengo que darle a sincronizar al archivo .css para que me actualice, me gustaría ver los cambios en vivo como en el video ¿Cómo corregir esto? Imagino que debe ser una opción Gracias

[@kid_goth]

Buenas noches, disculpa no tengo PC en mano solo estoy viendo videos para irme afianzando. Me surge una duda, al usar gulp (por ejemplo el caso que tengo pensado, sass y typescript) y no me es necesario instalar esos paquetes? o sea, no necesito de npm install sass typescript,etc,etc,etc., sino más bien instalar solo gulp y usar esas dependencias (gulp install gulp-sass gulp-type-script)?... y una más si tengo los subdirectorios en ./scss cuando convierta me respeta esa estructura de directorios sobre el destino? o genera todos los archivos sueltos en el ./destino?. Gracias :D

[@anibalperdomo7338]

estaria bueno un curso de Web Storm que si bien no es gratuito, te permite usarlo sin licencia en lapsos de 30 min y lo encuentro muy comodo para javascript css y html

[@gilbertosolis640]

gulp no me acepta las variables de sass ni las variables de css ¿que puedo hacer?

[@juanro_dev]

Excelente vídeo, en mi caso hay una cosa y es que la tarea cuando se ejecuta no queda refrescándose, ella inicia, termina y hay que volver a ejecutar el comando para actualizar los cambios. Alguien que me puede ayudar con esto?

[@damnation8969]

saludos, sigo todos los pasos pero no me crea el archivo html en la carpeta destino que elijo, alguien podría ayudarme con eso?

[@jorgemendieta2022]

Hola Alvaro....genial material como siempre, tengo una duda, en el curso de css usamos var en lugar de const, y no usábamos el "=>" luego del task, esto me confunde un poco, quizá podrías explicar algo sobre esto en tu siguiente vídeo...saludos...

[@EDteam]

Const y => son parte de la sintaxis de ES6 (la nueva versión de JavaScript). Sin embargo con la versión 5 con var y function igual va a funcionar

[@jorgemendieta2022]

gracias...tocará investigar un poco al respecto...por cierto, la respuesta fue a la velocidad de la luz...jeje

[@jonatantorrico6397]

Buenas, me salta un error que no puedo solucionar: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series) help :(

[@jcrm12345]

stackoverflow.com/questions/39665773/gulp-error-watch-task-has-to-be-a-function

[@sergiolopez-iy1tg]

gulp.task( 'sass' ,()=>{ return gulp.src( ' dev / scss / ** / *.scss ' ) .pipe( ' sass () .on ( ' error ' , sass.logErorr ) .pipe( gulp.dest ( ' dist / css ' ) )} gulp.task( ' default ' , ()=>{ gulp.watch ( ' dev / scss / ** / *.scss ') )}

[@enriqueramirezgonzalez8410]

Buenas noches, tengo un problema con gulp-sass sobre todo al hacer watch, ojala pudieras ayudarme con eso, el error se presenta cuando hago el @import en mi archivo principal, tengo los modulos en carpetas, a veces me compila bien unas 5 veces seguidas, pero al final aparece el error: file to import not found or unreadable, no encuentro la solución por ningún lado y no lo estoy haciendo mal porque compila y despues de unas veces haciendo el watch es que salta el error, si ejecuto la tarea gulp sass sin el watch no salta, pero es muy incomodo estar compilando a cada rato, muchas gracias de antemano alvaro felipe, he aprendido mucho de tus cursos

[@eduardofuentes9728]

Que tal amigo, tengo el mismo problema, encontraste como resolverlo?, la verdad es una molestia tener que estar compilando a cada rato.

[@ceciliaalvinoquispe9061]

al hacer gulp sass, no me crea el style.css que veo en tu video, he revisado cada código y no se a que se debe

[@sc-nc6bb]

npm install gulp -g y vuele a ejecutar gulp-sass

[@sc-nc6bb]

señor es nesesario tener instalado ruby en windows para usar gulp-sass , y otra pregunta no puedo usar media querys en archivos .sass realmente me gusta mas sass que scss =D

[@EDteam]

No es necesario ruby. Puedes instalar Gulp con Node.js y ejecutar los comandos necesarios.En el vídeo se usa NPM (propio de Node.js) para ejecutar los comandos que se ejecutan.

[@ragdesaud597]

Hola Alvaro, una cuestión... es que quiero compilar con la sintaxis de "sass" y no con la sintaxis de "scss", he hecho las pruebas pero no funciona, la pregunta es... ¿El plugin de gulp-sass realmente puede compilar con sintaxis de "sass" y no de "scss"? gracias

[@EDteam]

+eutiximo systems no deberías usar Sass sino scss. Sobre tu pregunta no sabría responder porque la sintaxis sass ni es la recomendada por lo que no la uso.

[@richardcastellanosb]

yo igual busco lo mismo, lo pudiste solucionar?

[@paulbrander]

Se puede hacer live preview del navegador con gulp?

[@EDteam]

por supuesto, en el proximo video lo veremos

[@julixx_btc]

Con browser sync

[@jhonathancolan8887]

Me sale un error, el primer paso lo hace normal npm init -y El paso siguiente, cuando escribo npm install --save-dev gulp me sale esto $ npm install --save-dev gulp npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail o n node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible . Use 'npm ls graceful-fs' to find it in the tree.

[@GamesPCAnthonyGames]

Deja que siga v: eso me pasa con git bash pero en la consola de Visual estudio code me sale igual que en el video n aunque en el video usa web storm

[@CarlosJOrozco]

Please update to minimatch 3.0.2 or higher / Please update to graceful-fs@^4.0.0 as soon as possible

[@2008martinmago]

en la documentación de gulp-autoprefixer sale de esta manera: browsers: ['last 2 versions'] hay diferencias con aplicarla como en tu video, lo probé y solo me salen los ms- el web-kit no me sale

[@EDteam]

Hazle caso a la documentación, por lo visto yo me chispotee en el video y lo hice al revés. Lo sorprendente es que funcionó 😁

[@2008martinmago]

Jajajaja okey saludos master

[@hernanjenkins]

gracias ,a mi no me estaba funcionando, luego cambie como tu mencionas por browsers: ['last 2 versions'] y funciono a la perfeción

[@mark-if6sf]

con todos los cursos que tienen ya podrian vender supscripciones mensuales como de 15dlls c:

[@EDteam]

Todo a su tiempo

[@Mordidaporlasviboras]

Me parece que "gulp-sass" cayó en desuso, no se me instala, voy a probar con "dart-sass".

[@Chris-ub2nv]

Aun funciona, yo lo estoy usando justo ahora, tomando como referencia las lineas de Alvaro, en la linea numero 5 antes de la funcion anonima debes porner lo siguiente async () =>{ } y antes del gulp.src debe poner la palabra await osea seria await gulp.src() Perdon por las tildes, no suelo usar espanol en mi pc, saludos Ah y olvide lo mas importante ya no usas lo de la linea 19 eso te va a dar error si o si, en las nuevas versiones de gulp debes usar un mentodo llamado series, de nuevo tomando como ejemplo el codigo de Alvaro seria gulp.watch('./scss/*.scss', gulp.series('sass')); Y si tuvieras que enviar mas archivos ya NO usas una lista, haces lo mismo pero cambiando la ruta y el metodo, una vez por metodo. Suerte.

[@Mordidaporlasviboras]

@@Chris-ub2nv Gracias! por la explicación la voy a aplicar. igual yo me refería a la instalación mediante npm en la consola/terminal "gulp-sass" me da error, de todas formas pude instalar "node-sass": "^5.0.0", y "sass": "^1.29.0".

[@MarcialHeredia]

Hola! He intentado todo paso a paso y cuando intento ejecutar el task "gulp" en el terminal, me sale esto "-bash: gulp: command not found". He intentado buscar una solucion pero no consigo solucinarlo. Si alguien podria ayudarme, Gracias!

[@juanro_dev]

Es importante ver el video de la descripción, ahí explica que es importante tener instalado gulp de forma global, utilizando: npm install -g gulp Luego lo verificas utilizando gulp --version Luego de eso, ya sigues con todo lo que hay en esta clase

[@kid_goth]

Buenas noches, disculpa no tengo PC en mano solo estoy viendo videos para irme afianzando. Me surge una duda, al usar gulp (por ejemplo el caso que tengo pensado, sass y typescript) y no me es necesario instalar esos paquetes? o sea, no necesito de npm install sass typescript,etc,etc,etc., sino más bien instalar solo gulp y usar esas dependencias (gulp install gulp-sass gulp-type-script)?... y una más si tengo los subdirectorios en ./scss cuando convierta me respeta esa estructura de directorios sobre el destino? o genera todos los archivos sueltos en el ./destino?. Gracias :D

[@AldeanoGeek]

Gulp por si solo no hará nada. Debes instalar los plug in