I've had to upgrade an old project from gulp version 3.9.1 to gulp version 4 which required me to rewrite my tasks. I've followed the documentation for moving to gulp.series and moving to name functions but I am now still getting errors on run. Below is my code which I use for watching 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 I run "gulp watch_all" I get Task never defined. Is there something wrong with the functions or my code order?