How to do some assets modification?

[lifeart]

For example:

• How to create 2-4 copy of .jpg with differend quality and rename it from sun.jpg -> sun_low.jpg, sun_mid.jpg, sun_hi.jpg, sun_retina.jpg
• convert all .png into .webp?
• create list of chanks for audiofile and put each chung in dist subfolder? {1.mp3, 2.mp3 -> /1/file.mp3, /2/file.mp3}

How it may looks like in broccoli tree paradigm? for example, I have external js plugins, and they accept binary data and return binary.

1.)

import imgScaler from 'some-repo';
let scaledResult =  await imgScaler(rawInput, { sceleQuality: 25 });

2.)

import imgConverter from 'some-repo';
let convertedImg =  await imgConverter(rawJPGInput, { output: 'webp' });

3.)

import musicSlicer from  'some-repo';
let slices =  await musicSlicer(rawMp3FileInput, { slices: 42 });

How to extract binary from tree? How to "replace" one binary to another? How to dynamically add binary into tree? How to rename tree item?

[oligriffiths]

@lifeart Sorry it's taken so long to get to this, summer was crazy, but let me try and summarize.

Let's take a very simple plugin:

import Plugin from  'broccoli-plugin';

class MyPlugin extends Plugin
{
  build() {
    console.log('inputsPaths: ');
    for (const path of this.inputPaths) {
        console.log(path);
    }
    console.log('outputPath: ' + this.outputPath);
  }
}

module.exports = function myPlugin() {
   return new MyPlugin(...arguments);
}

And a simple Brocfile.js

import myPlugin from 'my-plugin';

module.exports = myPlugin(['inputPathA', 'inputPathB']);

The build() function can either return nothing or return a promise, if a promise is returned then broccoli will wait until the promise resolves before continuing.

Some plugins accept multiple inputNodes (like broccoli-merge-trees) and some only accept a single one (like broccoli-funnel). broccoli-plugin however MUST be passed an array.

Broccoli will configure this.inputPaths with paths that represent the output paths of any previous nodes/plugins.

In your case, you would want to iterate the input paths, and find the files you wish to transform (it's up to you how to do this), then run them through your imported packages, and write their contents to this.outputPath, it's really as simple as that.

There are some other base plugins that you can use that might mean you have to write less code, e.g. https://github.com/broccolijs/broccoli-filter which is good for processing the contents of certain files (matched by type or regex).

Does that help?

I will do a tutorial on writing broccoli plugins soon.

[lifeart]

@oligriffiths thank you for clarification! :) I'm also trying to setup broccoli + typescript pipeline, but faced concatination issues, looks like I need something like rollup or browserify to get single output file. It will be nice if you can clarify this theme in eat your greens tutorial (example with typesctipt).