First of all, I'm new on using Gulp.
I'm trying to create two tasks for CSS/SASS processing. First task needs to compile SASS into CSS (using gulp-sass and node-sass), and output the resulting files into assets/dist/css folder. This task is working like a charm.
The second task needs to use gulp-purgecss to traverse the resulting CSS files (from task 1) and remove unused CSS rules, outputting the clean CSS files into assets/dist/css/min folder. But, unfortunatelly, this task isn't working as expected.
I've created a "css" task that triggers, with gulp.series, my two tasks in the expected order, but looks like the second task - purgecss - is started before the files are finished by the first task - SASS compiling -, so the clean CSS files doesn't appear on assets/dist/css/min folder.
For testing, I've ran the "css" task twice, and, on the second time, the assets/dist/css/min folder appears containing my clean CSS, but those are based on old CSS files (generated on first run of "css" task), not the "fresh" ones generated on the second time.
Here is the tasks I mentioned:
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"));
My guess is that gulp.series isn't working as expected, waiting the css:build to complete before starting css:purge.
Can someone help me with this? Thanks!
After a few hours of search, I've reached the solution.
I only needed to remove the callback call done() from my tasks and added a return statement before the gulp.src. First of all, I used done() instead of return because, in the css:build task, I need to process two CSS files. But, now, I figured out that gulp.src accepts an array of strings instead only a string.
So, here's how my code looks now:
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"));
The trick is: Gulp tasks are asynchronous, so the css:purge task was finishing before css:build, and, because it's asynchronous, the done() was fired before the tasks was really ended. So, returning the task itself (return gulp.src()) is like returning a promise, and gulp.series now waits for this promise to be completed before starting the next task.