I recently had to update an older project from gulp version 3.9.1 to gulp version 4, which meant rewriting my tasks. Following the documentation on transitioning to gulp.series and using named functions, I thought I had everything in place but I'm still encountering errors during execution. Below is the code snippet I use for monitoring styles in two different languages.
var fontName = "project-icons",
gulp = require("gulp"),
sass = require("gulp-sass"),
sourcemaps = require("gulp-sourcemaps"),
iconfont = require("gulp-iconfont"),
iconfontCss = require("gulp-iconfont-css");
var sassOptions = {
errLogToConsole: true,
outputStyle: "expanded"
};
function iconfont(done) {
gulp.src(["./icons/*.svg"])
.pipe(
iconfontCss({
fontName: fontName,
path: "sass",
targetPath: "../sass/static/icons/_icons.sass",
fontPath: "./fonts/",
cssClass: "icon"
})
)
.pipe(
iconfont({
formats: ["ttf", "eot", "woff", "woff2", "svg"],
fontName: fontName,
normalize: true,
fixedWidth: true,
centerHorizontally: true
})
)
.on("glyphs", function(glyphs, options) {})
.pipe(gulp.dest("./fonts/"));
done();
}
function desktop_styles() {
return gulp
.src("./sass/_en/style.sass")
.pipe(
sourcemaps.init({
loadMaps: true,
identityMap: true,
sourceRoot: "../css/"
})
)
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest("./css/"));
}
function desktop_styles_rtl() {
return gulp
.src("./sass/_ar/style.sass")
.pipe(
sourcemaps.init({
loadMaps: true,
identityMap: true,
sourceRoot: "../css/"
})
)
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest("./css/lang/rtl"));
}
function mobile_styles() {
return gulp
.src("./sass/en/mobile/style.sass")
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(gulp.dest("./css/m"));
}
function mobile_styles_rtl() {
return gulp
.src("./sass/rtl/m/style.sass")
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(gulp.dest("./css/lang/rtl/m"));
}
function watch_all(){
gulp.series(
mobile_styles,
mobile_styles_rtl,
desktop_styles,
desktop_styles_rtl,
function(done) {
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
done();
}
)
};
function watch_AllDesktop(done){
gulp.series(desktop_styles, desktop_styles_rtl, function() {
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
done();
});
function watch_desk_desktop_styles_rtl(done){
gulp.series(desktop_styles_rtl, function() {
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles_rtl));
done();
});
function watch_desktop_en(done){
gulp.series(desktop_styles, function() {
gulp.watch("./sass/**/*.sass", gulp.series(desktop_styles));
});
function watch_mobile_rtl(done){
gulp.series(mobile_styles_rtl, function() {
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
done();
});
function watch_mobile_en(done){
gulp.series(mobile_styles, function() {
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
done();
});
function watch_AllMobile(done){
gulp.series(mobile_styles, mobile_styles_rtl, function() {
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles));
gulp.watch("./sass/**/*.sass", gulp.series(mobile_styles_rtl));
done();
});
When attempting to run "gulp watch_all," I receive an error message stating "Task never defined." Could this issue be related to the functions or the order of my code?