Skip to content

Build tasks

Greg Bowler edited this page Oct 18, 2023 · 5 revisions

The outer keys of the build.json define the file-matching patterns that will trigger the individual tasks. For one off builds, each pattern that has matching files will execute in turn. For builds that are watching, a file watcher will trigger whenever a file changes that is matched by the pattern.

For example, to trigger a build whenever a Jpeg image changes in the images directory, a match pattern of images/*.jpg can be used. Extended wildcard patterns can be used, which can recursively match file paths. For example, a build can be triggered whenever any ES6 source file is changed within the script directory, by using script/**/*.es6.

With the two patterns explained above, a build.json with two empty task blocks would look like this:

{
	"images/*.jpg": {
	},

	"script/**/*.es6": {
	}
}

Task blocks

Task blocks are JSON objects with the following required keys:

  • name (string) - An explanatory name of the task, for example Compile & minify ES6
  • require (object) - List of required commands and versions for the task to execute
  • execute (object) - Description of the command/script to execute

The execute block

  • command (string) - The command/script to execute, e.g. "webpack"
  • arguments (array<string>) - A list of all arguments the command requires, e.g. ["--entry", "./script/script.es6", "--output-filename", "script.js"]

The require block

The require object is optional, but recommended. The keys of the object are commands/scripts that are required to be present in the environment, and the values of the objects are the semver version constraints that are required.

Example require:

{
	"node": ">=16.3",
	"webpack": "^4.9"
}

This will ensure that node is at least version 16.3, including any subsequent major releases, and that webpack is version 4, at least 4.9.

Putting it all together

Here's a build.json file that defines a single task block that compiles ES6 files within the script directory, to the www directory, using Webpack:

{
	"script/**/*.es6": {
		"name": "Compile ES6 with source map",
		"require": {
			"node": "*",
			"babel": "*",
			"webpack": "*"
		},
		"execute": {
			"command": "webpack",
			"arguments": ["--entry","./script/script.es6", "--output-path", "./www", "--output-filename", "script.js", "--devtool", "source-map", "--mode", "development"]
		}
	}
}

Next, learn about running modified builds in different environments.