如何在gulp中运行任务之前运行函数？

Question

guys how to run another function in task before run main task? AS u can see in function have stream, and i know about syntax (gulp.task('task', ['tast'], func... ) But i dont want to see 999 tasks in list, thats why im trying to use functions for tasks

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'))
        );

    });

Answer 1

The problem you are probably running into is that the tasks aren't necessarily synchronous, so you need to treat them appropriately (ie, wait for them to complete).

It's probably better to use gulp as it is intended and to have several separate tasks (or ditch gulp entirely and just script something normally). Trying to half use gulp is only going to cause you headaches.

If you are worried about having one massive gulp task list, what you can do instead is group tasks together and then call them.

For example:

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']);

By grouping them together, you can keep them nice and organized without having to have 100 things in one task. This also lets the benefits of gulp show.