Automatically Minify Laravel Blade Templates with Laravel Mix

This article explains how to automatically compress Laravel Blade template files using Laravel Mix and the html‑minifier plugin.

Installation : In the project root run the following command to add required packages.

cd /var/www/html/laravel-project
npm i -D laravel-mix@^5.x laravel-mix-template-minifier watch shelljs

Configuration : Edit webpack.mix.js and add the minTemplate plugin with desired options.

mix.minTemplate = require("laravel-mix-template-minifier");
mix.minTemplate("storage/framework/views/*.php", "storage/framework/views/", {
  collapseInlineTagWhitespace: true,
  collapseWhitespace: true,
  minifyCSS: true,
  minifyJS: true,
  processConditionalComments: true,
  removeAttributeQuotes: false,
  removeComments: true,
  removeTagWhitespace: false,
  trimCustomFragments: false,
});

File watching : Create compress.js that uses shelljs and watch to run the build when template files change, with a debounce to avoid repeated executions.

let shell = require("shelljs");
let watch = require("watch");
let precessing = false;
watch.watchTree("./storage/framework/views", function(f, curr, prev) {
  if (!precessing) {
    precessing = true;
    shell.exec("npm run prod");
    setTimeout(() => {
      precessing = false;
    }, 5000);
  }
});

Auto‑start on boot : Add a command to /etc/rc.d/rc.local so the watcher runs automatically in the background after system startup.

nano /etc/rc.d/rc.local
# Add the following lines
cd /var/www/html/ysmj-laravel
nohup node compress.js > /var/www/html/laravel-project/compress.out 2>&1 &
chmod +x /etc/rc.d/rc.local

Optimization : Replace the default npm run prod script with a custom compress script that omits the --progress flag to prevent the log file from growing excessively, and modify compress.js to invoke this new script.

"scripts": {
  "dev": "npm run development",
  "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch-poll": "npm run watch -- --watch-poll",
  "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
  "compress": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "prod": "npm run production",
  "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

After updating the script, modify compress.js to call npm run compress instead of npm run prod.

let shell = require("shelljs");
let watch = require("watch");
let precessing = false;
watch.watchTree("./storage/framework/views", function(f, curr, prev) {
  if (!precessing) {
    precessing = true;
    shell.exec("npm run compress");
    setTimeout(() => {
      precessing = false;
    }, 5000);
  }
});

Running node compress.js now watches the Blade view directory, automatically minifies HTML, CSS, and JavaScript in the compiled templates, and writes the compressed output as a single line while leaving PHP code formatting untouched.