0

tengo que siguiente problema, este es mi código en gulpfile.js:


    const gulp = require('gulp');
    const sass = require('gulp-sass');


    gulp.task('sass', function () {


        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'));
    });

cuando ejecuto en la terminal, la tarea gulp se ejecuta 'default' y realizo un cambio en mi archivo .scss, la tarea SASS se realiza correctamente pero si vuelvo hacer un cambio en el .scss, ya no se vuelve a ejecutar ninguna tarea.

También observo en la terminal que se quedan en estado 'starting' siempre y nunca en estado 'fisnish'.

1 respuesta 1

1

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).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.