Updated «Split tasks across multiple files» recipe

[slavafomin]

Hello!

I've created the gulp-require-tasks module to ease the process of splitting gulpfile.js into separate tasks.

I've updated the corresponding recipe in this PR.

We are going to use this module in all of our projects, so I'm willing to actively maintain it. If you have any suggestions, please let me know!

Thank you! Cheers!

[phated]

This pattern is going to stop being recommended with gulp 4. I'm not sure we should add more suggestions now.

[phated]

Closing this for now.

[slavafomin]

Hello @phated, sorry for a late reply.

If we have a recipe for splitting tasks already, why don't we update it in order to provide the best possible solution? We could add a warning/deprecation notice as well to the top of this recipe.

Also, why are you not recommending such approach? Are you planning an alternative solution in gulp 4? In my experience, a dozen of small files is much more usable than a single very large file.

[phated]

@slavafomin I agree that it should be marked as deprecated, but while digging into this stuff for gulp 4, there is so much wrong with the pattern and the stuff Orchestrator does to deal with it. It is going to cause a lot of people a lot of headaches when they upgrade to 4.0 and I don't really want to do anything to make it look like it is an actively supported use case. If you want to send a PR marking this as a deprecated use case, I'll merge it.

[fetis]

@phated can you share some problem with this approach in Gulp4? Because for me it's also not looking good to have one big gulpfile.

[phated]

@fetis Short answer, use named functions and do all the series/parallel calls in the top-level gulpfile. More detailed examples coming in the docs update.

[reecefowell]

If this is being deprecated then what is the official way of splitting ones gulpfiles into smaller files?

Personally, I find most gulpfiles to be too large and unwieldy, breaking them up makes them much more readable.

[callumacrae]

@reecefowell Put the functions in other files, and just require them and add them as tasks in the gulpfile.

Alternatively, use gulp-hub. Here's the 4.0 branch: https://github.com/frankwallis/gulp-hub/tree/4.0

[duartealexf]

Look for "Approach two" in http://macr.ae/article/splitting-gulpfile-multiple-files.html.
Is this approach the better way to do it?

[radum]

Here is how I use it and I think this would be the proper way to do it once Gulp 4 is here.

tasks/taskA.js

module.exports = (gulp, plugins) => {
    return gulp.src('src/*.ext')
        .pipe(plugins.pluginA())
        .pipe(gulp.dest('build'));
};

./gulpfile.js

const gulp = require('gulp');

// Load all of the Gulp plugins.
const plugins = require('gulp-load-plugins')();

function getTask(name) {
    return require(`./tasks/${name}`)(gulp, plugins);
}

// Gulp predefined tasks
gulp.task('taskA', getTask('taskA'));

// Gulp tasks
gulp.task('start', ['taskA']);

And now when you call gulp start it will run task taskA from that particular task file.

Please let me know if my judgement is wrong.

[yocontra]

@radum

Here's how I do it:

import dir from 'require-dir'
import gulp from 'gulp'

const tasks = dir('./tasks')

Object.keys(tasks).forEach((taskName) => {
  gulp.task(taskName, tasks[taskName])
})

And your task files can look like this:

import { series } from 'gulp'
import somePlugin from 'some-plugin'
import someTask from './someTask'

export default series(someTask, () =>
  gulp.src('some stuff')
    .pipe(somePlugin())
    .pipe(gulp.dest('other stuff'))
)

Very flexible.

[chrisjansky]

@contra Looks great. Are you using this setup somewhere in a larger context? I am struggling to get it working with actual plugins and would be grateful for more examples. Thanks!

[matthewmcclatchie]

@chrisjansky I've not tried this myself yet, but after stumbling across this thread I'm definitely going to give it a go the next chance I get.

I did a quick search and came across this: http://macr.ae/article/gulp-and-babel.html

Seems to go over the basics of writing your gulpfile in ES6, which I believe is what @contra has done. Once in ES6, you can take advantage of imports, arrow functions and stuff.

Hope that helps!

[chrisjansky]

@matthewmcclatchie Thanks! In the end I've stuck with the classic JS syntax (still new to ES6) and split it into modules. Real use-case can be seen here https://github.com/chrisjansky/zdw-2017/blob/master/gulpfile.js, in case anyone finds it useful.

[dixhuit]

@chrisjansky That looks nice & simple compared to some of the other options being discussed here. Can you confirm that this would be compatible with Gulp 4?

[chrisjansky]

@danbohea I am no Gulp 4 guru, can't vouch for that, sorry. If you end up changing the syntax for Gulp 4 somewhere down the road, please let me know!

[phated]

@danbohea if order is not guaranteed (which I don't believe it is) you will have problems. Use gulp-hub with their registry (?) branch for gulp4