gulpjs / gulp

A toolkit to automate & enhance your workflow
https://gulpjs.com
MIT License
32.99k stars 4.22k forks source link

unclear documentation on composition and reusing of functions #2377

Closed nachtfunke closed 5 years ago

nachtfunke commented 5 years ago

Unfortunately with the declining popularity of gulp, finding answers anywhere has become a real challenge. Sorry if you think this does not belong here, but I have run out of places to ask.

I have difficulties understanding how composing and reusing functions is supposed to work in gulp nowadays.

For example, I have separate functions for minifying and compiling Less and Sass, so 4 functions in total.

function cleanCompiledLess() {
    return del(`${local.less.dist}/**/*`);
}

function compileLess() {
    return src(`${local.less.src}/*.less`
        .pipe(less())
        .pipe(dest(local.less.dist));
}

function cleanCompiledSass() {
    return del(`${local.sass.dist}/**/*`);
}

function compileSass() {
    return src(`${local.sass.src}/*.scss`)
        .pipe(sass({ importer: magicImporter() }).on('error', sass.logError))
        .pipe(dest(local.sass.dist));
}

When I export any of those functions manually, with exports.compileSass = compileSass;, everything works as intended.

What also works, is exports.buildSass = series(cleanCompiledSass, compileSass);. But now if I want to export a single function to do all of this, what do I do? I don't wanna copy and paste everything all the time. So I tried this:

function buildLess(done) {
    series(cleanCompiledLess, compileLess);
    done();
}

function buildSass(done) {
    series(cleanCompiledSass, compileSass);
    done();
}

exports.buildCass = series(buildLess, buildSass);

All of this is running through without any mistakes, but the tasks are not doing what they are supposed to be doing.

So how is this meant to be done?

doowb commented 5 years ago

Take a look at what the API documentation says that series returns.

It's a composed function to be exported as a task. The returned function needs to be executed and passed a callback (your done function above):

function buildLess(done) {
  series(cleanCompiledLess, compileLess)(done);
}

However, none of the examples in the docs show that method because the convention is to export the composed functions as tasks or use them in another series. You can do something like this to make it cleaner:

const buildLess = series(cleanCompiledLess, compileLess);
const buildSass = series(cleanCompiledSass, compileSass);

export.buildCass = series(buildLess, buildSass);

You can export those individual build* functions if you want to use them as tasks directly too.

yocontra commented 5 years ago

"Unfortunately with the declining popularity of gulp" this is a really weird passive aggressive way to ask for help, please don't post like this here anymore. We get 1.2M installs a week, you don't need to worry about the popularity of our project.

nachtfunke commented 5 years ago

"Unfortunately with the declining popularity of gulp" this is a really weird passive aggressive way to ask for help, please don't post like this here anymore. We get 1.2M installs a week, you don't need to worry about the popularity of our project.

I'm very sorry, it was not my intend to make it sound like that! I was trying to justify why I was actually posting here, as I know that this project is well groomed, when it comes to issues here.


@doowb that makes a lot of sense - thank you!