Falta la sentencia return
en la función asociada a tu tarea sass
Dentro de la función asociada a la tarea sass
, le hace falta la sentencia return
, para regresar el stream de Gulp.
Con ello te aseguras de que:
- La tarea
sass
se ejecute cada vez que modifiques tu(s) archivo(s) SCSS
- Gulp avise que tu tarea
sass
gatillada, terminó.
- Si, hipotéticamente, tienes otras tareas que dependen del resultado de esta tarea, puedes hacer que ellas esperen su resultado (por ejemplo, en tu código, una tarea de minificación de CSS, ya que no has definido como comprimir el código CSS)
El código de tu tarea sass
quedaría así:
gulp.task('sass', function () {
return gulp.src('./dev/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'));
});
Dejando tu archivo gulpfile.js
como:
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./dev/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'));
});
gulp.task('default', function () {
return gulp.watch('./dev/scss/*.scss', gulp.series('sass'));
});
Término de tu tarea
¿Señalabas que no se te avisa que la tarea sass
terminaba?
También observo en la terminal que se quedan en estado 'starting' siempre y nunca en estado 'fisnish'.
Supongamos que tu estructura de carpetas del proyecto se compone solo de un archivo SCSS, main.scss
(esto es meramente para simplificar la situación lo más posible).
/tu-carpeta-de-proyecto
/dev
/scss
main.scss
/public
/css
main.css (archivo generado)
Ejecutando la tarea default
en la línea de comandos...
PS C:\ruta\de\tu-carpeta-de-proyecto> gulp default
[19:45:25] Using gulpfile ~\ruta\de\tu-carpeta-de-proyecto\gulpfile.js
[19:45:25] Starting 'default'...
...y modificando el archivo main.scss
, además de reflejarse los cambios en el archivo main.css
, me va a aparecer esto en la terminal:
[19:45:45] Starting 'sass'...
[19:45:45] Finished 'sass' after 30 ms
En efecto, avisa que tu tarea sass
, terminó.
Ver también
En el repositorio de gulp-sass (en inglés), hay un ejemplo básico de uso con el que puedes probar. Eso si, lo vas a tener que adaptar un poco, para que funcione con tu versión de Gulp (4).