Skip to main content

bud.assets

Include static assets in your compilation even if they aren't referenced in scripts or stylesheets.

You may specify a path to a specific file or use glob syntax to match many files at once.

Usage

Copying a file

Use a single string to specify a single file to copy. Relative to source dir.

bud.config.js
bud.assets('images/image.png')

Copying a directory

Use a single string to copy the entire images directory. Relative to source dir.

bud.config.js
bud.assets('images')

Copying using source/destination tuples

You can also specify the source and destination using a tuple.

The first item in each tuple is the source and the second is the destination:

bud.config.js
bud.assets([
[bud.path('@src/assets/asset.png'), bud.path('@dist/asset.png')],
[bud.path('@src/fonts'), bud.path('@dist/fonts')],
])

For the destination, you may wish to utilize the @name handle to automatically reference the hashed filename in production.

bud.config.js
bud.assets([[bud.path('@src/fonts'), bud.path('@dist/fonts/@name')]])

You can include the output path along with the name using @file. For example, this is the same as above:

bud.config.js
bud.assets([bud.path('@src/fonts'), bud.path('@dist/@file')])

Both @name and @file work whether you are copying a directory or a single file.

Copying using an object

You can specify CopyPlugin.ObjectPattern object(s) directly:

bud.config.js
bud.assets({
from: bud.path('assets/some-file.svg'),
to: bud.path('dist/some-file.svg'),
noErrorOnMissing: false,
})

Copying from multiple sources

To specify additional copy sources you can add additional parameters.

bud.config.mjs
bud.assets(['images', 'fonts'])
bud.config.mjs
bud.assets([
{
from: bud.path('@src/images'),
to: bud.path('@dist/images'),
},
{
from: bud.path('@src/fonts'),
to: bud.path('@dist/fonts'),
},
])

Merging existing assets

bud.assets can be called multiple times and the results will be merged onto the existing jobs.

bud.config.mjs
bud
.assets('fonts')
.assets({
from: bud.path('@src/svg'),
to: bud.path('@dist/svg'),
})
.assets([[bud.path('@src/images'), bud.path('@dest/images')]])

Additional information

You don't need to import assets which are utilized by your bundled code. For instance, if you are referencing a font file from your stylesheet, the font will already be included in your distribution. You don't need to manually require it with bud.assets, although there is probably no real harm in doing so.

bud.assets is specifically for compiling files which are not already included elsewhere.

Passing options directly

bud.assets is just a simple interface wrapper for the copy-webpack-plugin extension. You can utilize the extension directly:

bud.config.js
bud.extensions
.get('copy-webpack-plugin')
.setOption('patterns', [{from: bud.path('@src/images')}])

It accepts any options that copy-webpack-plugin does.