Como executar a função antes de executar a tarefa no gulp? - javascript, npm, gulp

caras como executar outra função na tarefa antesexecutar tarefa principal? Como você pode ver na função ter stream, e eu sei sobre sintaxe (gulp.task ("task", ["tast"], func ...) Mas eu não quero ver 999 tarefas na lista, é por isso que estou tentando usar funções para tarefas

function cssBuild() {
var dt = gulp
.src("app/html-dev/styl/framework/style.styl")
.pipe(plumber({ errorHandler: onError }))
.pipe(stylus({ use: nib(), "include css": true, import: ["nib"], compress: false }))
.pipe(gulp.dest("app/cache/css"))
.pipe(browserSync.stream());
return dt;
}


function htmlBuild() {
var dt = gulp
.src("app/html-dev/**/*.pug")
.pipe(plumber({ errorHandler: onError }))
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest("app/cache"))
.pipe(browserSync.stream());
return dt;
}

gulp.task("build", function() {
var removeDist = del.sync("app/dist");

cssBuild();
htmlBuild();
jsBuild();


return merge (

gulp
.src("app/cache/css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("app/dist/css")),

gulp
.src(["app/html-dev/img/**/*", "!app/html-dev/img/empty.jpg"])
.pipe(gulp.dest("app/dist/img")),
gulp
.src(["app/html-dev/fonts/**/*", "!app/html-dev/fonts/empty.woff"])
.pipe(gulp.dest("app/dist/fonts")),

gulp
.src("app/cache/js/**/*")
.pipe(gulp.dest("app/dist/js")),

gulp
.src("app/cache/*.html")
.pipe(gulp.dest("app/dist"))
);

});

Respostas:

O problema em que você provavelmente está se deparando é que as tarefas não são necessariamente síncronas, portanto, você deve tratá-las adequadamente (ou seja, espere que elas sejam concluídas).

Provavelmente é melhor usar gulp como pretendido e ter várias tarefas separadas (ou abandonar completamente o gole e apenas escrever algo normalmente). Tentando usar metade gulp só vai lhe causar dores de cabeça.

Se você está preocupado em ter um enorme gulp lista de tarefas, o que você pode fazer é agrupar tarefas e depois chamá-las.

Por exemplo:

gulp.task("html", () => { /* do something */ });
gulp.task("css", () => { /* do something */ });
gulp.task("js", () => { /* do something */ });

gulp.task("clean", () => { /* do something */ });

// Group the build ones into one call
gulp.task("build", ["html", "css", "js"]);

// Group the default into one
gulp.task("default", ["clean", "build"]);

Ao agrupá-los, você pode mantê-los organizados e sem precisar ter 100 coisas em uma tarefa. Isso também mostra os benefícios do gole.