1. Introduction
Minification is the process of reducing the size of code files by removing unnecessary new lines, spaces, etc. We usually do this when serving websites, on our CSS and JS source files. While this process reduces the size of the files, it affects the readability of the code. Hence, we usually minify the source files just for deployment and retain a copy of the human-readable source code in our working repository.
Most modern web development tools offer in-built minification. However, it’s good for us to know how to accomplish this manually when the need arises. In this tutorial, let’s look at various tools we can use on the Linux CLI to minify our CSS and JS files.
2. UglifyJS
UglifyJS is one of the most popular CLI tools that we can use to minify our JavaScript source files. It’s available as a NodeJS package, which we can install using npm. Assuming we have NodeJS and npm installed on our system, let’s see how to install UglifyJS:
$ npm i uglify-js -g
The above command installs UglifyJS for us. We used the -g flag to install it as a global package. This enables us to use it from any directory on our system using the uglifyjs command. We may also need to run the above command with root privileges to install it as a global package.
Once we’ve installed it, let’s look at how to use the package. Let’s start with one JS file, script.js, in our current working directory:
$ uglifyjs script.js -o script.min.js
In the above command, we run uglifyjs and pass the filename as an argument. We also specified the output file script.min.js using the -o flag. Now let’s look at the size difference between the original and the minified files using the ls command:
$ ls -lh
total 12K
-rw-rw-r-- 1 kd kd 4.5K Jul 19 09:53 script.js
-rw-rw-r-- 1 kd kd 3.4K Jul 19 10:28 script.min.js
From the output of the command, we see that uglifyjs has reduced the size of our JS file from 4.5K to 3.5K.
3. UglifyCSS
UglifyCSS is another node module that helps us minify CSS files. It’s not related to UglifyJS but only the name was inspired by it. Let’s look at how to install it:
$ npm i uglifycss -g
As we did with UglifyJS, we installed this module too globally using the -g flag, and we may have to use root privileges if necessary. Once this step is done, we can use the uglifycss command from any directory to minify CSS files. Let’s see how to use the command on a CSS file, style.css:
$ uglifycss style.css --output style.min.css
In the above command, we ran uglifycss with style.css as the input file and specified style.min.css as the output file. Let’s use the ls command to see the size reduction:
$ ls -lh
total 16K
-rw-rw-r-- 1 kd kd 5.6K Jul 19 09:52 style.css
-rw-rw-r-- 1 kd kd 4.5K Jul 19 11:01 style.min.css
We see that the size of the file has reduced from 5.6K to 4.5K after minification.
4. YUI Compressor
YUI Compressor is a minification tool by the Yahoo! team, written in Java. While we can use this tool on both CSS and JS files, it needs a Java Runtime Environment (JRE) to run. We can install YUI Compressor on an Ubuntu machine using the package manager:
$ sudo apt install yui-compressor
The above command will also install a JRE if we don’t have one. After we’ve installed it, we can run the yui-compressor command on our CSS and JS files:
$ yui-compressor css/style.css -o css/style.min.css
$ yui-compressor js/script.js -o js/script.min.js
In the above commands, we first specified the path to the input file and then used the -o to specify the output file. We also see that the command automatically determines if the file is JavaScript or CSS and uses the appropriate minifier. We can also explicitly specify the file type as css or js using the –type flag. Now, let’s see the size reductions after running the above commands:
$ ls -lhR css/ js/
css/:
total 16K
-rw-rw-r-- 1 kd kd 5.6K Jul 19 09:52 style.css
-rw-rw-r-- 1 kd kd 4.5K Jul 19 12:36 style.min.css
js/:
total 8.0K
-rw-rw-r-- 1 kd kd 2.6K Jul 19 12:06 script.js
-rw-rw-r-- 1 kd kd 2.3K Jul 19 12:36 script.min.js
We see that the file size has reduced from 5.6K to 4.6K for the CSS file and from 2.6K to 2.3K for the JS file.
5. Minifying Multiple Files
For most practical use cases of minifcation, we would ideally need a command or two that finds and minifies all the files in our codebase directory. We can accomplish this using the commands we looked at earlier, with some additional bash commands.
5.1. With UglifyJS and UglifyCSS
First, let’s see how we can run uglifycss and uglifyjs on our codebase.
Let’s start by running the command on CSS files:
$ find css/ -type f -name "*.css" ! -name "*.min.* -exec uglifycss {} --output {}.min
Next, we’ll minify all of our JS files:
$ find js/ -type f -name "*.js" ! -name "*.min.* -exec uglifyjs {} -o {}.min
Running the above two commands will minify all the JS files in the js directory and all the CSS files in the css directory. Essentially, we use the find command, specifying the directory to look in (css/ or js/), followed by the -type flag ‘f’, for finding only regular files. Then we use the -name flag to select files ending with .js or .css, and the “*! -name*” flag to exclude files with “.min.” in them – these are the minified files. We then run uglifycss or uglifyjs on all the selected files.
Let’s see the directory structure before and after we run these commands, using the ls command:
$ ls -lhR css/ js/
css/:
total 32K
-rw-rw-r-- 1 kd kd 5.6K Jul 19 11:50 style2.css
-rw-rw-r-- 1 kd kd 4.5K Jul 19 12:26 style2.css.min
-rw-rw-r-- 1 kd kd 5.6K Jul 19 09:52 style.css
-rw-rw-r-- 1 kd kd 4.5K Jul 19 12:26 style.css.min
js/:
total 16K
-rw-rw-r-- 1 kd kd 2.6K Jul 19 12:06 script2.js
-rw-rw-r-- 1 kd kd 2.3K Jul 19 12:12 script2.js.min
-rw-rw-r-- 1 kd kd 2.6K Jul 19 12:06 script.js
-rw-rw-r-- 1 kd kd 2.3K Jul 19 12:12 script.js.min
In the above snippet, we observe the .min files after we run the commands with reduced sizes.
5.2. With YUI Compressor
YUI Compressor gives us a built-in option to process multiple files. Hence, our commands are much simpler compared to the previous method.
We can minify all our CSS files as follows:
$ yui-compressor -o '.css$:.min.css' css/*.css
Next, we can run it on all our JS files with the following command:
$ yui-compressor -o '.js$:.min.js' js/*.js
The above two commands minify the CSS and JS files in the css/ and js/ directories, respectively. Let’s see the directory listings before and after we run these commands using ls:
$ ls -lhR css/ js/
css/:
total 32K
-rw-rw-r-- 1 kd kd 5.6K Jul 19 11:50 style2.css
-rw-rw-r-- 1 kd kd 4.5K Jul 19 12:36 style2.min.css
-rw-rw-r-- 1 kd kd 5.6K Jul 19 09:52 style.css
-rw-rw-r-- 1 kd kd 4.5K Jul 19 12:36 style.min.css
js/:
total 16K
-rw-rw-r-- 1 kd kd 2.6K Jul 19 12:06 script2.js
-rw-rw-r-- 1 kd kd 2.3K Jul 19 12:36 script2.min.js
-rw-rw-r-- 1 kd kd 2.6K Jul 19 12:06 script.js
-rw-rw-r-- 1 kd kd 2.3K Jul 19 12:36 script.min.js
Similar to the previous method, we see that there are new minified files after we run the commands, with reduced sizes.
6. Conclusion
In this article, we looked at tools to minify CSS and JS source files using the Linux CLI. We first used the UglifyJS and UglifyCSS modules to minify JS and CSS files. We also looked at YUI Compressor, which is a single tool that can minify both CSS and JS files.
YUI Compressor was very convenient to use, given that it bundles both CSS and JS minifiers, and offers in-built capability for processing multiple files. But, the downside is that it’s not currently maintained. Hence, it may not work with the latest JS syntax features. UglifyJS, on the other hand, is actively maintained. Therefore, this could be a better bet despite the lack of some minor conveniences.