How to create a custom Task using Aurelia-CLI

First of all you need to understand, how the Aurelia-CLI works and how it is usually structured. For our example we’re going to setup gulp-imagemin. Having an atomic structure where each class, service or task has dedicated responsibilities has many advantages like the following ones:

• You’ll always have an overview about your application,
• You can structure your application well with clear responsibilities,
• Everyone can understand your code fast and
• your application is more stable and maintainable. For everyone!

Install gulp-imagemin

To be able to setup our custom task for minifying our images, we need to install gulp-imagemin first. This can be done by the following command:

au install gulp-imagemin

On success this application is now listed in aurelia_project/aurelia.json.

Create a Task using Aurelia-CLI console

In this case my task is called “process-images”.

au generate task process-images

This command creates a file ‘process-images.ts’ in the default aurelia directory aurelia_project/tasks/.

import * as gulp from 'gulp';
import * as changed from 'gulp-changed';
import * as project from '../aurelia.json';

export default function processImages() {
  return gulp.src(project.paths.???)
    .pipe(changed(project.paths.output, {extension: '.???' }))
    .pipe(gulp.dest(project.paths.output));
}

Add custom information

As you can see, there are a couple of questionmarks spotting to the data you need to enter for your custom task. In addition to that, the first characters project.paths. are already prefilled.
Before filling the requested information, we need to prepare the aurelia_project/aurelia.json file to have all custom data and configurations centralized´.
Opening the aurelia.json you’ll find a block “Paths”. (For practice you can also have a look into other non custom task files like “process-css.ts” and see, how the path variables are used in default).
To prepare the aurelia.json for our need, we add a new json-block “imagesProcessor” directly below the “cssProcessor”. In our example the imagemin-configuration is orientated on the other default configurations (Don’t reinvvent the wheel!):

  "imagesProcessor": {
    "source": "src/**/*.img",
    "extension": ".img",
    "output": "scripts/img"
  },

Prepare Task

After saving the changes, we can fulfill our custom task as follows:

import * as gulp from 'gulp';
import * as changed from 'gulp-changed';
import * as project from '../aurelia.json';
import * as imagemin from 'gulp-imagemin';

export default function processImages() {
  return gulp.src(project.imagesProcessor.source)
    .pipe(changed(project.imagesProcessor.output, {extension: project.imagesProcessor.extension }))
    .pipe(gulp.dest(project.imagesProcessor.output));
}

As you can see we entered the following information:

Configuration	Description
project.paths.imagesProcessor.source	The "src/**/*.img" configuration defines, that the build task has to search in the total directory including the first level of subdirectory for images with mimetype of “.img”.
project.paths.imagesProcessor.extension	Of course, this configuration defines the mimetype of the processed image.

To have a consistent configuration structure, we exchanged the ‘.???’ by the central aurelia.json configuration.

Add new custom Task to Job-Sequence

Finally, to get the task triggered, it needs to be imported with import processImages from './process-images'; and added to series in aurelia_project/build.ts:

import * as gulp from 'gulp';
import {CLIOptions, build as buildCLI} from 'aurelia-cli';
import transpile from './transpile';
import processMarkup from './process-markup';
import processCSS from './process-css';
import processImages from './process-images';
import copyFiles from './copy-files';
import watch from './watch';
import * as project from '../aurelia.json';

let build = gulp.series(
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS,
    processImages,
    copyFiles
  ),
  writeBundles
);

let main;

if (CLIOptions.taskName() === 'build' && CLIOptions.hasFlag('watch')) {
  main = gulp.series(
    build,
    (done) => { watch(); done(); }
  );
} else {
  main = build;
}

function readProjectConfiguration() {
  return buildCLI.src(project);
}

function writeBundles() {
  return buildCLI.dest();
}

export { main as default };

Test created Task

Finally, after all steps have been processed, the task can be tested on starting aurelia with au run --watch. If something is wrong, errors are directly displayed in console. Mostly it’s due to wrong paths or missing information.