gulp-load-all-tasks

One folder, all tasks.
Inspired by gulp-task-loader.

Getting Started

Prerequisites

Please make sure you're using gulp version 4.0 or follow this guildline to upgrade.

Use NPM.

npm install -g gulp-cli
npm install --save-dev gulpjs/gulp#4.0

Use Yarn. (Installation)

yarn global add gulp-cli
yarn add --dev gulpjs/gulp#4.0

Check your gulp version.

gulp -v

You might get result like this:

CLI version 1.4.0
Local version 4.0.0-alpha.2

Install

By NPM:

npm install --save-dev gulp-load-all-tasks

By Yarn:

yarn add --dev gulp-load-all-tasks

Usage

1. Create a folder named 'gulp-tasks' or whatever you like.
2. Create a task definition file.
3. Require this module and invoke it.
4. All tasks are loaded.

You can also create subfolders to organize your tasks as sub-tasks. All sub-tasks will named with prefix by folder name.

For example, if the structure of your gulp-tasks are:

.
├── build
│   ├── pug.js
│   └── sass.js
├── build.js
├── watch.js
└── deploy.js

And you'll see your tasks list:

gulp --tasks

Tasks for guipfile.js
├── build:pug
├── build:sass
├── build
├── deploy
└── watch

Examples

Task definition file

// gulp-tasks/copy.js
module.exports = function() {
  return gulp.src('src/**/*')
    pipe(gulp.dest('dist/**/*'))
};

// Load all tasks from default folder 'gulp-tasks'
require('gulp-load-all-tasks')();
 
// Run the task
gulp.task('default', gulp.series('copy', (done) => {
  console.log('Task done');
  done();
}))

Task with dependencies

// gulp-tasks/copy.js
const del = require('del');
 
module.exports = function() {
  return gulp.src('src/**/*')
    pipe(gulp.dest('dist/**/*'))
};
module.exports.dependencies = gulp.series('clean');

Load tasks by default folder

require('gulp-load-all-tasks')();

Load module by gulp-load-plugins

const $ = require('gulp-load-plugins')();
$.loadAllTasks();

Load tasks by Different folder name

require('gulp-load-all-tasks')('my-tasks');

Load tasks in other extensions

require('gulp-load-all-tasks')({
  exts: ['.coffee'],
});

Task context

Each task will binding a context object with reference to gulp and context.

// gulpfile.js
const browserSync = require('browser-sync').create();
require('gulp-load-all-tasks')({
  browserSync,
});
 
// gulp-tasks/pug.js
const $ = require('gulp-load-plugins')();
 
module.exports = function() {
  const gulp = this.gulp;
  const browserSync = this.context.browserSync;
 
  return gulp.src('src/pug/**/*')
    .pipe($.pug())
    .pipe(gulp.dest('dist')
    .pipe(browserSync.stream());
};

Forward Reference Support

If you got the error:

AssertionError: Task never defined: <task>

All the tasks are loaded by gulp alphabetically, it'll cause some of your task dependencies are loaded before it defined.

You can add undertaker-forward-reference as your gulp task registry.

const ForwardReference = require('undertaker-forward-reference');
const loadAllTasks = require('gulp-load-all-tasks');
 
gulp.registry(new ForwardReference());
 
loadAllTasks({
  // Context...
});

Options

dir

Type: String

Default: gulp-tasks

Folder path with all task files.

extensions

Type: Array

Default: ['.js']

Task file extensions.

License

MIT © ethancfchen