How to Minify CSS and JS Files Using UglifyJS and UglifyCSS

On RHEL-based distributions, you can use:

sudo dnf update
sudo dnf install nodejs npm -y

Step 2: Installing UglifyJS and UglifyCSS

Once Node.js and npm are installed, you can use them to install UglifyJS and UglifyCSS, which are npm packages used for minifying JavaScript and CSS files, respectively.

sudo npm install -g uglify-js
sudo npm install -g uglifycss

After installation, check if UglifyJS and UglifyCSS are installed correctly by running:

uglifyjs -V
uglifycss -V

Step 3: Minifying JavaScript and CSS Files

To minify a JavaScript or CSS file, navigate to the directory containing the file you want to minify by running:

uglifyjs yourfile.js -o yourfile.min.js
uglifycss yourfile.css > yourfile.min.css

To minify multiple CSS and JS files in a directory, you can use a simple bash script that can significantly improve your website’s performance by reducing the file sizes.

Minifying Multiple JavaScript Files

Create a Bash script to minify all JS files.

nano minify_js.sh

Add the following script to the minify_js.sh file.

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Skipping minified file: $file"
    continue
  fi
  uglifyjs "$file" -o "${file%.js}.min.js" --compress --mangle
  echo "Minified $file to ${file%.js}.min.js"
done

Make the script executable and run it.

chmod +x minify_js.sh
./minify_js.sh

This script will loop through all .js files in the directory, minify them using UglifyJS, and create new files with the .min.js extension.

If you don’t want to create new files, you can use the -o option in the bash script to overwrite the original files.

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Skipping already minified file: $file"
    continue
  fi
  uglifyjs "$file" --compress --mangle -o "$file"
  echo "Minified $file"
done

Minifying Multiple CSS Files

Similarly, to minify all CSS files in a directory, create a Bash script.

nano minify_css.sh

Add the following script to the minify_css.sh file:

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Skipping minified file: $file"
    continue
  fi
  uglifycss "$file" > "${file%.css}.min.css"
  echo "Minified $file to ${file%.css}.min.css"
done

Make the script executable and run it.

chmod +x minify_css.sh
./minify_css.sh

This script will loop through all .css files in the directory, minify them using UglifyCSS, and create new files with the .min.css extension.

If you don’t want to create new files, you can use the following bash script to overwrite the original files.

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Skipping already minified file: $file"
    continue
  fi
  uglifycss "$file" > temp.css
  mv temp.css "$file"
  echo "Minified $file"
done

Conclusion

Minifying your CSS and JS files is a straightforward process using UglifyJS and UglifyCSS on the Linux CLI. This not only reduces the file sizes but also helps in improving the load times of your web pages.