How to Use Cache-clean.js Watcher Utility in Magento 2?

In this article, you will be learning about how can use the cache-clean.js watcher utility in Magento 2.

The file watcher automatically cleans affected cache types in the Magento 2 cache during development. For example, if you make a change to a template, it only cleans the block_html and full_page caches, not the config or layout caches.

Whole cache flush decreases developers’ performance, so we can use mage2tv/magento-cache-clean

Before starting the installation, we need Node.js version 8.x or above as a dependency.

Install For Specific Project

Step 1

Install the node.js, using the below command sudo apt-get install nodejs

Confirm Node.js installation using the command node -v

Step 2

Now install mage2tv/magento-cache-clean. For a specific project, go to the root directory of your project and run below command
composer require --dev mage2tv/magento-cache-clean

Step 3

Confirm cache-clean installation using the command vendor/bin/cache-clean.js

If you get the error Error NOSPC On Linux, run the command:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

After successful installation, you get output like:

Release 0.0.42 sponsored by https://www.mage2.tv

Flushing all caches

Usage

In your Magento directory, run vendor/bin/cache-clean.js --watch or -w
Now the watch starts. Press Ctrl+C to exit the watcher process.
The file watcher automatically cleans affected cache types, will show a notification in the terminal about the specific cache clean, and recompiles the changes simultaneously.

Hotkeys

When the watcher is running, segments of the cache can be cleaned with individual key press:

There are also hotkeys to clean the static assets in the Adminhtml or the Frontend area or clean the Generated code directory

Install Globally

Step 1

Now install mage2tv/magento-cache-clean globally run the command below
composer global require --dev mage2tv/magento-cache-clean

Step 2

Verify where it is in your pc or system, in my case, at => home/.config/composer/vendor/bin/cache-clean.js

Step 3

Set the system path using this command
export PATH="$PATH:$HOME/.config/composer/vendor/bin"

Now that the installation process is completed, the next step is to run the cache command.

Step 4

From any project’s root directory, you can access it using  cache-clean.js

From outside the Magento root directory can access using the full directory path cache-clean.js -d ./magento230
Here -d or –directory for Magento Base Directory, magento230 is the project name

Note: For global installation can start watching using  cache-clean.js -w or cache-clean.js -d ./magentodirectory -w, For specific installation using vendor/bin/cache-clean.js -w

I hope this comprehensive blog has been helpful. Please leave your comments below, and don’t hesitate to reach out if you require assistance with Magneto store development.

Reference From:

Git Hub: https://github.com/mage2tv/magento-cache-clean/blob/master/readme.md
Mage2tv:https://www.mage2.tv/content/fundamentals/magento-cli-tool/the-magento-cache-clean-js-file-watcher-utility/