Creating tasks and plugins

Only different between tasks and plugins is that tasks are enabled by default, but plugins needs to be manually enabled in the projects config/config.js

Each plugin has an entry file which is loaded, which loads all other necessary code. For tasks entry file is pre-defined config.js

Main plugin file

Main plugin file plugins/example.js is used to set default configuration / paths / preprocess and task scripts.

Plugin doesn't have to have a configuration / paths / preprocess or task scripts, all of these are optional. Plugin may just change the configuration of another task or run a gulp task based on configuration of another task.

Configuration pre-process

plugins/example/preprocess-config.js is an optional script used to validate and change the configuration before gulp task is run.

For example in the default configuration it's not possible to set paths relative to 'src' or 'dest' folders because that configuration is not defined yet. That can be done during preprocess, eg:

const getPaths = require('@videinfra/example-website-builder/lib/get-path');

module.exports = function preprocessHTMLConfig (config = {}, fullConfig) {
  config.additionalPath = getPaths.getSourcePath('example', 'lorem-ipsum.txt');
}

Task

plugins/example/task.js is an optional gulp task.

Each task can register to run at specific time during build or watch process:

• beforeBuild - runs once before all other tasks
• build - runs during production build and during development build before watch
• beforeWatch - runs before watch, only during development build
• watch - only during development build
• afterBuild - only during production build, runs after all other tasks

Gulp pipe helper functions

There are additional helper functions for tasks to minimize boilerplate code:

const taskStart = require('@videinfra/example-website-builder/lib/gulp/task-start');

taskStart handles unexpected errors in the gulp pipeline and logs errors to the terminal

const taskEnd = require('@videinfra/example-website-builder/lib/gulp/task-end');

taskEnd reloads file or whole browser page using browserSync when a file changes

Helper functions

See Helper functions wiki page for list of path and config helper functions.

Running only a plugin task

For testing you can run a specific gulp task associated with a plugin using one of these commands:

npx builder PLUGIN_NAME-beforeBuild
npx builder PLUGIN_NAME-build
npx builder PLUGIN_NAME-beforeWatch
npx builder PLUGIN_NAME-watch
npx builder PLUGIN_NAME-afterBuild