Minify CSS and JS Files With Linux CLI

Published August 15, 2024

This article covers techniques for minifying JavaScript and CSS files. You'll learn how to use tools like UglifyJS and UglifyCSS to reduce file sizes, improving your website's performance. It will also introduce batch minification methods using Bash scripts, helping you process multiple files at once. It will address advanced techniques such as overwriting original files and handling already minified content.

Minifying Individual Files

Minifying JavaScript Files

To minify a JavaScript file using UglifyJS, use this command:

uglifyjs input.js -o output.min.js

This command processes input.js, minifies its content, and saves the result to output.min.js. The -o option sets the output file.

Minification Options

UglifyJS offers options to customize minification:

Option	Description
`-c, --compress`	Apply extra compression techniques
`-m, --mangle`	Shorten variable and function names
`--keep-fnames`	Keep function names during mangling
`--source-map`	Create a source map for debugging

Example with options:

uglifyjs input.js -c -m -o output.min.js --source-map

Tip: Preserve License Comments

To keep important license comments in your minified JavaScript file, use the --comments option:

uglifyjs input.js -c -m -o output.min.js --comments /^!/

This preserves comments starting with an exclamation mark (!), which are often used for licenses.

Minifying CSS Files

To minify a CSS file using UglifyCSS, use this command:

uglifycss input.css > output.min.css

This command processes input.css, minifies its content, and sends the output to output.min.css using the > operator.

CSS Minification Techniques

UglifyCSS uses these techniques to reduce file size:

Removing whitespace and comments
Shortening color values (e.g., #ffffff to #fff)
Combining duplicate selectors
Removing unneeded semicolons and zeros

Naming Conventions

For JavaScript and CSS files, the common naming convention for minified versions adds .min before the file extension:

Original Filename	Minified Filename
script.js	script.min.js
styles.css	styles.min.css

This convention helps distinguish between original and minified file versions.

Batch Minification

Creating a Bash Script for JavaScript Files

To minify multiple JavaScript files at once, you can create a Bash script. Here's a script that minifies all JS files in the current directory:

#!/bin/bash

for file in *.js
do
    if [[ $file != *.min.js ]]
    then
        uglifyjs "$file" -o "${file%.js}.min.js" -c -m
        echo "Minified $file to ${file%.js}.min.js"
    fi
done

This script:

Step	Action
1	Loops through all `.js` files in the current directory
2	Checks if the file is not already minified (doesn't end with `.min.js`)
3	Uses UglifyJS to minify the file if not already minified
4	Names the output file the same as the input file, with `.min.js` appended
5	Prints a message for each file that it minifies

To use this script:

Save it as minify_js.sh
Make it executable: chmod +x minify_js.sh
Run it: ./minify_js.sh

Tip: Exclude Specific Files

You can modify the script to exclude specific files from minification. Add this line before the 'for' loop:

exclude_list="file1.js file2.js"

Then, add this condition inside the loop:

if [[ ! " ${exclude_list[@]} " =~ " ${file} " ]]; then
    # Minification code here
fi

This prevents the script from minifying files listed in exclude_list.

Creating a Bash Script for CSS Files

For CSS minification, you can use a similar Bash script:

#!/bin/bash

for file in *.css
do
    if [[ $file != *.min.css ]]
    then
        uglifycss "$file" > "${file%.css}.min.css"
        echo "Minified $file to ${file%.css}.min.css"
    fi
done

This script works like the JavaScript minification script:

Step	Action
1	Loops through all `.css` files in the current directory
2	Checks if the file is not already minified (doesn't end with `.min.css`)
3	Uses UglifyCSS to minify the file if not already minified
4	Names the output file the same as the input file, with `.min.css` appended
5	Prints a message for each file that it minifies

To use this script:

Save it as minify_css.sh
Make it executable: chmod +x minify_css.sh
Run it: ./minify_css.sh

Advanced Minification Techniques

Overwriting Original Files

For JavaScript and CSS files, you can change the script to overwrite the original files instead of creating new ones. This method saves disk space and simplifies file management.

JavaScript Minification Script

#!/bin/bash

for file in *.js
do
    if [[ $file != *.min.js ]]
    then
        uglifyjs "$file" -o "$file" -c -m
        echo "Minified and overwrote $file"
    else
        echo "Skipping already minified file: $file"
    fi
done

CSS Minification Script

#!/bin/bash

for file in *.css
do
    if [[ $file != *.min.css ]]
    then
        uglifycss "$file" > "$file.tmp" && mv "$file.tmp" "$file"
        echo "Minified and overwrote $file"
    else
        echo "Skipping already minified file: $file"
    fi
done

Tip: Preserve original files

Before running these scripts, create a backup of your original files. This allows you to revert changes if needed:

#!/bin/bash

# Create a backup directory
mkdir -p backup

# Copy all JS and CSS files to the backup directory
cp *.js *.css backup/

echo "Backup created in the 'backup' directory"

Comparison of Minification Approaches

Approach	Advantages	Disadvantages
Creating new files	Original files preserved	Requires more disk space
Overwriting original files	Saves disk space, simpler file management	Original files are lost

Handling Already Minified Files

The scripts include a check to skip files that are already minified. This is done using a condition that checks if the filename doesn't end with '.min.js' (or '.min.css' for CSS files).

if [[ $file != *.min.js ]]

Benefits of skipping already minified files:

Saves processing time
Avoids issues from re-minifying files
Maintains the integrity of previously minified files

Other Considerations

Backup: Before running these scripts, create backups of your original files.
Version Control: If using version control, commit your changes before minification to easily revert if needed.
Automation: Add these scripts into your build process or use task runners like Gulp or Grunt for automated minification.
Multiple File Types: You can combine both JavaScript and CSS minification into a single script for more efficient processing.
Error Handling: Add error handling to your scripts to manage issues during the minification process.

	English
	Deutsch
	Français