En primer lugar, soy nuevo en el uso de Gulp.
Estoy tratando de crear dos tareas para el procesamiento de CSS/SASS. La primera tarea debe compilar SASS en CSS (usando gulp-sass y node-sass ) y enviar los archivos resultantes a la carpeta assets/dist/css . Esta tarea está funcionando a las mil maravillas.
La segunda tarea necesita usar gulp-purgecss para recorrer los archivos CSS resultantes (de la tarea 1) y eliminar las reglas CSS no utilizadas, generando los archivos CSS limpios en la carpeta assets/dist/css/min . Pero, desafortunadamente, esta tarea no está funcionando como se esperaba.
Creé una tarea "css" que activa, con gulp.series , mis dos tareas en el orden esperado, pero parece que la segunda tarea, purgecss, se inicia antes de que los archivos terminen con la primera tarea, compilación SASS, por lo que los archivos CSS limpios no aparecen en la carpeta assets/dist/css/min .
Para la prueba, ejecuté la tarea "css" dos veces y, en la segunda vez, aparece la carpeta assets/dist/css/min que contiene mi CSS limpio, pero se basan en archivos CSS antiguos (generados en la primera ejecución de tarea "css"), no las "frescas" generadas la segunda vez.
Aquí están las tareas que mencioné:
gulp.task("css:build", (done) => { gulp.src("./assets/src/scss/admin/admin.scss") .pipe(sass.sync({ outputStyle: "compressed" }).on("error", sass.logError)) .pipe(gulp.dest("./assets/dist/css")); gulp.src("./assets/src/scss/theme/theme.scss") .pipe(sass.sync({ outputStyle: "compressed" }).on("error", sass.logError)) .pipe(gulp.dest("./assets/dist/css")); done(); }); gulp.task("css:purge", (done) => { gulp.src("./assets/dist/css/theme.css") .pipe(purgecss({ content: ['./**/*.php'] })) .pipe(gulp.dest("./assets/dist/css/min")); done(); }); gulp.task("css:watch", (done) => { gulp.watch("./assets/src/scss/**/*.scss", gulp.series("css:build", "css:purge")); done(); }); gulp.task("css", gulp.series("css:build", "css:purge")); Supongo que gulp.series no funciona como se esperaba, esperando que css:build se complete antes de iniciar css:purge .
¿Puede alguien ayudarme con esto? ¡Gracias!
Después de unas horas de búsqueda, he llegado a la solución.
Solo necesitaba eliminar la devolución de llamada done() de mis tareas y agregar una declaración de return antes de gulp.src . En primer lugar, utilicé done() en lugar de return porque, en la tarea css:build, necesito procesar dos archivos CSS. Pero, ahora, descubrí que gulp.src acepta una matriz de cadenas en lugar de solo una cadena.
Entonces, así es como se ve mi código ahora:
gulp.task("css:build", () => { return gulp.src(["./assets/src/scss/admin/admin.scss", "./assets/src/scss/theme/theme.scss"]) .pipe(sass.sync({ outputStyle: "compressed" }).on("error", sass.logError)) .pipe(gulp.dest("./assets/dist/css")); }); gulp.task("css:purge", () => { return gulp.src("./assets/dist/css/*.css") .pipe(purgecss({ content: [ "./*.php", "./templates/**/*.php" ] })) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest("./assets/dist/css")); }); gulp.task("css:watch", () => { return gulp.watch("./assets/src/scss/**/*.scss", gulp.series("css:build", "css:purge")); }); gulp.task("css", gulp.series("css:build", "css:purge")); El truco es: las tareas de Gulp son asíncronas, por lo que la tarea css:purge finalizaba antes que css:build y, debido a que es asíncrona, done() se activaba antes de que las tareas realmente terminaran. Por lo tanto, devolver la tarea en sí misma ( return gulp.src() ) es como devolver una promesa, y gulp.series ahora espera a que se complete esta promesa antes de comenzar la siguiente tarea.