Gulp: Recipe (gulp 4): using gulp-hub as a custom registry for loading multiple gulpfiles

[phated]

gulp-hub has been great at working with me to implement itself as a custom registry in support of gulp4. I really would like a recipe showing how to load multiple gulpfiles with gulp-hub as the registry.

Docs: https://github.com/frankwallis/gulp-hub/tree/4.0

[phated]

@frankwallis @contra can you review https://github.com/gulpjs/gulp/blob/4.0/docs/recipes/split-tasks-across-multiple-files.md ?

[frankwallis]

it looks fine to me - I've added it to the repo as another example: https://github.com/frankwallis/gulp-hub/tree/4.0/examples/recipe

[phated]

@frankwallis awesome. I will link to it in the recipe and close this. Thanks

[bradcerasani]

This recipe doesn't appear to work with nested tasks - e.g. calling html, images, and styles tasks in parallel from a build task (all tasks in separate files). This usage pattern is fairly popular and worked fine with the old require-dir recipe.

[phated]

@bradcerasani please note that tasks must be registered before trying to call gulp.parallel in 4.0 so you may need to address the loading order of your files. If that's not something gulp-hub does, I would suggest opening a ticket over there.

[bradcerasani]

@phated Just tried a stripped down example explicitly ordering the tasks passed to gulp-hub, but build still doesn't recognize the clean task as ever being defined (despite loading before it):

Even if it did work, manually declaring each filename and their order in the array passed to gulp-hub is a bit meticulous. I don't see this as a problem with gulp-hub specifically (it does what it claims to), but rather gulp-hub as a replacement to the previous require-dir recipe for splitting tasks across multiple files.

Let me know if I should open a separate issue here - not sure if I'm doing something wrong but I'm happy to help update this recipe once sorted.

[phated]

@bradcerasani Can you open this over on gulp-hub with a repro case? I think you are the main person testing it out. We want to promote gulp-hub as the way to do this, with the API specified in the recipe, so I think this is just a bug on their end. /cc @frankwallis

I am updating the recipe to link to gulp-hub and will be closing this, so it would be good to have an issue open on gulp-hub

[mryellow]

We want to promote gulp-hub as the way to do this

It's not meeting the functional requirements. Should only have to specify the task directory and have those tasks accessible from that point forward. Current implementation breaks down when it comes to nesting, at which point you'd be once again specifying each set of task dependencies for each file. Issue being that these dependencies are already clearly defined in the tasks themselves and using gulp-hub as it stands would result in double-handling with these being defined multiple times.

[carlos-reynosa]

@mryellow or anyone,

Do you know if that issue ever got addressed? Thanks!

[carlos-reynosa]

I ended up defining tasks dependent on other tasks, right after loading all the tasks files.

// Load plugins
var gulp = require('gulp');
var hubRegistry = require('gulp-hub');

hubRegistry(['./gulp-tasks/*.js']);

gulp.task('default', gulp.series('rimraf', gulp.parallel('css', 'js', 'images', 'fonts')));

[leandrocrs]

@phated Just tried a stripped down example explicitly ordering the tasks passed to gulp-hub, but build still doesn't recognize the clean task as ever being defined (despite loading before it):

Even if it did work, manually declaring each filename and their order in the array passed to gulp-hub is a bit meticulous. I don't see this as a problem with gulp-hub specifically (it does what it claims to), but rather gulp-hub as a replacement to the previous require-dir recipe for splitting tasks across multiple files.

Let me know if I should open a separate issue here - not sure if I'm doing something wrong but I'm happy to help update this recipe once sorted.

You don't need take care about the include order.
Just include the dependant tasks with gulp-hub like you do in gulpfile.js:

// ./gulp-tasks/js.js
const { task, src, series, dest, registry } = require('gulp');
const uglify = require('gulp-uglify');
const { files, paths } = require('../config/gulp.config');
const HubRegistry = require('gulp-hub');

const hub = new HubRegistry([
  './gulp-tasks/browserify.js',
]);

registry(hub);

task('js:prod', series(['browserify:prod', () =>
  src(files.buildMainJs)
  .pipe(uglify())
  .pipe(dest(paths.build.js))
]));

task('js', series(['browserify:dev']));

[phated]

Hey @leandrw, I'm pretty sure gulp-hub is now unmaintained.

I'd suggest you stop using strings to register your tasks - you may want to read over our new Getting Started Guide to understand differences between gulp 3 and 4 - a huge one being that you can just use functions instead of strings for function composition!