How to Use Prepros for Purging CSS

Are you looking to use PurgeCSS? When developing custom websites, especially when modifying purchased templates, it’s crucial to clean up unused CSS using the PurgeCSS technique.

Prepros Purge CSS

In this article, I will show you step-by-step instructions on how to use Prepros for purging unused CSS.

Why We Need to Clean Up Unused CSS

If you have a site built using a CSS framework like Bootstrap or a purchased premium template, there are likely many unused CSS rules. These unused rules contribute to a larger CSS file, which can negatively impact load times and overall optimization.

Unused CSS can slow down your website because browsers must download, parse, and render all the CSS in the file, even the parts that aren’t being used. This extra load can lead to longer page load times, affecting user experience and search engine rankings.

Moreover, a bloated CSS file can make maintaining your site more difficult. With a lot of unused code, finding and fixing issues becomes more complex and time-consuming. By cleaning up unused CSS, you streamline the codebase, making it easier to manage and maintain.

Additionally, removing unused CSS can enhance your site’s performance, leading to faster load times. Having said that, let’s see how easily we can use Prepros for purging CSS.

What is Prepros

Before diving into the tutorial, it’s essential to introduce you to Prepros. Prepros is a GUI-based build tool and automation software that I frequently use and is one of my favorites, especially when developing websites solo.

Prepros simplifies various tasks such as compiling CSS preprocessors like Sass and LESS, optimizing images, and minifying JavaScript. It also includes features like live browser reloading, which enhances productivity by automatically refreshing your browser whenever changes are made to your code. This real-time feedback loop is invaluable for developers seeking efficient and streamlined development processes.

Prepros offers an intuitive and user-friendly interface, making it accessible even for those who are new to build tools and automation software. The clear layout and straightforward navigation allow developers to focus more on writing code and less on configuring their tools.

Step-by-Step Use Prepros for PurgeCSS

Install PurgeCSS in Prepros

Navigate to the package section, search for the PurgeCSS package, and install it. This step is crucial to access the PurgeCSS functionality within Prepros.

Install PurgeCSS in Prepros

Set Up Custom Command

Access the project settings in Prepros and go to the CSS Tools section. Add a custom command within the task settings:

Set Up Custom Command
purgecss --css {{input}} --content "{{rawRootDir}}/*.html" --output {{outputDir}} {{output}}

Choose CSS File to Remove Unused CSS

Locate the CSS files you want to purge within Prepros. Check the checkbox for the custom command you set up in the previous step. Click the button to initiate the purging process. Once completed, Prepros will generate and compile the CSS after performing PurgeCSS.

Remove Unused CSS

main.css is the file after removing unused CSS, and main-tanpa-purge.css is the file before using PurgeCSS. Note that the file size after PurgeCSS depends on the number of CSS classes used in your HTML files!

I hope this article helped you learn how to use Prepros for purging CSS and removing unused CSS.

If you have any questions, you can comment below. You can also find me on Twitter, LinkedIn, and Upwork.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment