Namespacing/prefixing for sub-build-tasks? Best practice?

[mattpr]

Hi,

Migrating all my gulp3 stuff to gulp4 (finally, I know).

I understand that using the task() api is no longer recommended and the preferred approach is named exports.

For simple builds using gulp this is not a big deal. However when using gulp to build an entire website, there are a bunch of parallel/unrelated builds that happen...for instance:

• favicons
• images (e.g. resizing original images down to website formats)
• html generation (e.g. via pug)
• javascript build (rollup, babel, terser, sourcemaps, etc)
• styles (sass, autoprefixer, sourcemaps, minimization, etc)

most of these individual builds will have multiple sub-steps that need to be run in some parallel/series combination depending on requirements.

Each of these builds will export clean, build, and watch.
For cleanliness, I have separated each build into their own gulpfile (e.g. gulp/javascript.js for the javascript build).

I also include a gulp/index.js that just requires/exports each build into a chosen namespace...

module.exports = {
    javascript: require('./javascript'),
    // ...
};

Then from the main gulpfile.js I can include the sub-builds and nicely reference each. Something like the following...

const {favicons, files, fonts, html, images, javascript:js, styles} = require('./gulp/tasks');

module.exports.clean = gulp.parallel(favicons.clean, files.clean, ...);
module.exports.build = gulp.parallel(gulp.series(favicons.build, html.build), files.build, ...);
module.exports.watch = gulp.parallel(favicons.watch, files.watch, ...);

module.exports.dev = function () {
    // setup live reload server, etc
};

The problem

is that all the individual build files may internally use function names like build, concat, clean.

In the old days with named task() I had a fair bit of flexibility in task naming (arbitrary strings)...although you had to rely on the developer to follow some convention or dynamically register tasks to force some naming convention (e.g. namespacing/prefixing... like javascript:build vs styles:build).

Now it seems like gulp4 always displays the underlying function name?
This makes it quite difficult to differentiate where it is the styles.build or js.build task that is failing.

As an example you can see the following is quite useless. During the actual build process it is the same (watch failed, watch didn't complete, etc...but which one?).

$ gulp --tasks
...
[15:10:08] ├─┬ watch
[15:10:08] │ └─┬ <parallel>
[15:10:08] │   ├── watch
[15:10:08] │   ├── watch
[15:10:08] │   ├── watch
[15:10:08] │   ├── watch
[15:10:08] │   ├── watch
[15:10:08] │   ├── watch
[15:10:08] │   ├── watch
[15:10:08] │   └── watch
...

So I am hoping there is some convention or support within gulp4 to override task names (without using task() api) or somehow namespace sub tasks so it is more readily obvious what task we are looking at. Given using task() is no longer recommended I don't want to go down that path...so I guess either no one has this particular problem (I'm doing something wrong) or there is an elegant way to address this issue.

Of course I could just follow some convention in function naming (within more limited restrictions of valid function names)...for instance every function in the javascript gulpfile could be named with prefix javascript_. However that feels pretty clunky.

Gulp also apparently ignores the export names and uses the underlying function names...

module.exports.clean = clean;
module.exports.build = gulp.series(vendor, lib, site, concatJs, pages, rollup);
module.exports.watch_js = watch;  // this will report as "watch" not "watch_js" when referenced as javascript.watch_js of course 

...so prefixing export naming doesn't help. Even if it did that would only work for stuff that is exported. Gulp also reports on internal sub-tasks that aren't exported and these display the internal function names (e.g. concat function within the javascript.js file without any context).

Very possible that what I am doing is all a big nasty antipattern...but as the docs, google and other discussions/issues don't seem to offer any advice on this particular scenario...I'm hoping it is obvious and I've just completely missed it.

Appreciate any insight or advice you can offer. Thanks!

[rootwork]

Although task() is depreciated as an API, the displayName property documented there is still useful. I actually discovered this when I ran across gulpjs/gulp-cli#53 which led me to gulpjs/gulp-cli#189.

So for instance in your example of watch_js, you could use it like this in gulpfile.js:

watch_js.displayName = 'watch_js'

I'm doing exactly this for two build tasks (build.styles, build.html) that would otherwise have identical names (build):

build.styles.displayName = 'build.styles'
build.html.displayName = 'build.html'

It seems a little redundant, but it works...

[yocontra]

@rootwork Just to clarify a bit more: displayName is an attribute of JS functions, not something gulp specific - gulp uses this standard attribute to get the function name.

[rootwork]

Ah, good to know. Thanks!