Usage
Test-run
Fantastic! Let's try it and see what happens!
- 🌍 Global
- 📦 Project
$ ipp
$ npm run <script_name> # where <script_name> is the name of the npm script
If everything is set up right, you should get a bunch of text come up on screen in red, complaining about a configuration error. Well, you haven't told IPP what to do yet!
Breaking it down
If no pipeline is specified, the CLI provides a sane config by default, creating 8 formats for every image, at 4 different sizes and two codecs (original + WebP). It will also export a very simple manifest file (more on this later). You still have to specify and input and output directory, however.
- 🌍 Global
- 📦 Project
$ ipp --input images_folder --output assets_folder
"scripts": {
"build-images": "ipp --input images_folder --output assets_folder"
}
If everything went well (and you provided some images), IPP should report completion and the output folder should contain your newly generated formats, along with a manifest file! For many use cases, the default configuration should be sufficient. Let's take a look on how to go a step further.
Configuration
Image Processing Pipeline supports a few different configuration file formats and location, anything supported by the cosmiconfig library. We recommend using the YAML format, as it makes it a lot easier to read and write your image pipeline. Lets make a quick configuration file now:
input: images
output: build
pipeline:
- pipe: convert
options:
format: webp
save: "[source.name].webp"
Once you have created that file inside of your project folder, add some images to a folder called images, create a build folder, and try running IPP again.
- 🌍 Global
- 📦 Project
$ ipp
$ npm run <script_name> # where <script_name> is the name of the npm script
That was easier! No need to specify the directory each time. If you look in your build folder, each image should have been converted into the WebP codec, a superior, if somewhat less supported image format. It is good practice to also create a JPEG variant for older browsers (and Safari, for some reason...).
We'll touch more on this in the pipeline section.
Flags
There are a few basic CLI flags that allow you to quickly confiure the CLI, namely setting the input/output directory, a path to a configuration file and the ability to use a simple text renderer.
See the CLI reference to learn more.
$ ipp -i images -o build/images -c ipp-config.json --text