Show Topics

Custom Tools

Custom tools allow you to run shell commands to process files with tools not built into Prepros. Custom tools can be set to run after a file is compiled, this allows you to further process a file output by a built-in compiler. Custom tools can also be used with a custom File Type to compile files not supported by Prepros.

Run a custom tool after compiling a file.

This allows you to run a custom tool after a file is compiled.

For instance, if you want to run PurgeCSS after you compile a Sass file. Install PurgeCSS with NPM then go to Project Settings -> CSS Tools -> Sass then add the following custom command.

purgecss --css {{input}} --content "{{rawRootDir}}/**/*.html" --output {{outputDir}} {{output}}

Placeholders wrapped with double curly braces are replaced by Prepros with the actual path of the file when a file is compiled. When running custom command after compiling a file the {{input}} placeholder refers to the file output by the built-in compiler which is passed as an input to the command, not the initial source file.

PurgeCSS Output
PurgeCSS doesn't support setting explicit output path but you still have to provide the `{{output}}` placeholder to use it with Prepros. The placeholder will just be ignored.

Custom File Types

This allows you to compile files not supported by Prepros. You can add a custom file type from Project Settings -> Custom Tools.

Available Placeholders

  • {{input}} — Quoted path of the input file.

  • {{rawInput}} — Unquoted path of the input file.

  • {{output}} — Quoted path of the output file.

  • {{rawOutput}} — Unquoted path of the output file.

  • {{inputDir}} — Quoted folder of the input file.

  • {{rawInputDir}} — Unquoted folder of the input file.

  • {{outputDir}} — Quoted folder of the output file.

  • {{rawOutputDir}} — Unquoted folder of the output file.

  • {{rootDir}} — Quoted path of the project folder.

  • {{rawRootDir}} — Unquoted path of the project folder.

  • {{inputName}} — Name of the input file.

  • {{rawInputName}} — Unquoted name of the input file.

  • {{outputName}} — Name of the output file.

  • {{rawOutputName}} — Unquoted name of the output file.