to-bitmap-file
This parser helps you generate PNG and JPG files from your bitmap assets.
Interface
interface parser {
name: 'to-bitmap-file';
options: {
filenameTemplate: string;
};
output: {
type: 'directory';
directoryPath: string;
};
};Options
filenameTemplate
false
string
"{{parents}}/{{name}}[-{{mode}}]{{extension}}"
The mustache template used to generate the file path to write to the file system.
Available variables:
parents: group and collection names of the token's parents
name: the name of the asset token
mode: the name of the current mode
extension: the file extension extracted from the token
Basic usage - single mode
{
"assets": {
"image": {
"$type": "bitmap",
"$value": {
"1x": {
"url": "<url-of-your-bitmap-file>",
"format": "png",
"width": 623,
"height": 415,
"variationLabel": null
}
}
}
}
}{
"version": "2",
"repository": "@organization/repository",
// Only use the personalAccessToken when working with the CLI
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Generate images",
"parsers": [
{
"name": "to-bitmap-file",
"output": {
"type": "directory",
"directoryPath": "public"
}
}
]
}
]
}This will generate a single bitmap file like so:
public/assets/image.png
Advanced usage - Several modes by definition (@1x, @2x...)
Our bitmap is named "image", is in a group named "assets", and has 2 modes for each definition parameter: 1x and 2x.
By default, this parser will generate the following output: {directoryPath}/{groups}/{bitmapName}.{png|jpg}
{
"assets": {
"image": {
"$type": "bitmap",
"$value": {
"1x": {
"url": "<url-of-your-bitmap-file>",
"format": "png",
"width": 623,
"height": 415,
"variationLabel": null
},
"2x": {
"url": "<url-of-your-bitmap-file>",
"format": "png",
"width": 1246,
"height": 830,
"variationLabel": null
}
}
}
}
}{
"version": "2",
"repository": "@organization/repository",
// Only use the personalAccessToken when working with the CLI
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Generate images",
"parsers": [
{
"name": "to-bitmap-file",
"output": {
"type": "directory",
"directoryPath": "public"
}
}
]
}
]
}This will generate the following bitmap files:
public/assets/image-1x.png
public/assets/image-2x.png
Last updated
Was this helpful?