Home

Minify Our CSS

In the first week of our teamproject, I chose a topic to investigate and get to know so I can reduce the file size of our css files and javascript files.
The main reason for this topic is that the computer can still understand the code even if we remove whitespaces and little notes explaining and deviding our code in sections so the developer can understand the code but also so when other developers wanna read your code (readability) it is still clear and easy to understand. If you wanna read about minifying you can read this wiki page I wrote Minify Minification

So first I ran this code in my terminal:

npm install cssnano --save-dev

By running this we are installing cssnano and saving it as one a devDependencies in our package.json

Than I ran this code in my terminal:

npm install postcss-cli --global

We are installing postcss cause we need it together with cssNano to make the minifying possible. Since we are installing this globally, this should mean that the postccs cli will we available for all our projects that will be made on this computer.

After that I manually created a file called postcss.config.js through my visual studio code. and inserted this code

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

And lastly I ran this in the terminal:

postcss style.css > output.css

This will automatically create a new file called output.css with our minified css code.

BUT, this gave me an error cause cssnano works with plugins that you can easily install with npm. In many articles I found the autoprefixer being mentioned and other plugins like cssnano-preset-default but there are even way more!

so I decided to install the cssnano-preset-default and did that with:

npm install cssnano-preset-default

Another reason why I downloaded this preset was because it needs minimal configuration and uses safe defaults for cssnano, which is ultra-amazing for someone like me doesnt know much about these topics. And I changed the post.css.config.js file to:

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
        require('cssnano-preset-default')({
            preset: 'default',
        }),

]};

When I ran postcss style.css > output.css I finally got a win!
The terminal gave me no errors and I saw the output.css was successfully created. When I looked at the files in my explorer we can see that we file had been reduced with 2kb, which is amazing cause this is the same css code. reducefile.png

Minify Our Javascript

First we wanna install the Uglify-js package with NPM

npm install uglify-js

Now we have uglify-js as a dependency in our package-json file.
I opened my code editor and made a new javascript file and named it 'uglifyjs.js' and inserted this code:

//get a reference to the file system module
var fs = require('fs');

//get a reference to the uglify-js module
var UglifyJS = require('uglify-js');

//get a reference to the minified version of file-1.js
var result = UglifyJS.minify('script.js')

fs.writeFile("output.min.js", result.code, function(err) {
    if(err) {
        console.log(err);
    } else {
        console.log("File was successfully saved.");
    }
});

Nothing happens if you keep it like that, so we will run this in our terminal

node uglify.js

The terminal returns the following

script.js;
File was successfully saved.

A new file has appeared in our code editor, with the name output.min.js, when I opened this file I saw that it only contained one line that said script.js;.
This was not what I wanted to see, so I knew that something was wrong.
I did some research and unraveled the solution. I went back to the uglify,js file and changed the code to the following:

//get a reference to the file system module
var fs = require('fs');

//get a reference to the uglify-js module
var UglifyJS = require('uglify-js');

//get a reference to the minified version of file-1.js
var result = UglifyJS.minify(fs.readFileSync('script.js', 'utf8'))

fs.writeFile("output.min.js", result.code, function(err) {
    if(err) {
        console.log(err);
    } else {
        console.log("File was successfully saved.");
    }
});

var result = UglifyJS.minify(fs.readFileSync('script.js', 'utf8'))
The fs.readFileSync makes it refer to the actual code inside and not the path,
which fixes the problem. We run node uglify.js again and get the following in return:

File was successfully saved.

When we open the output.min.js file we have a minified javascript file of the script.js file! 🥳

Sources
UglifyJs with node
UglifyJS
cssnano