Compressing

Add the following line to our script:

"compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed"

And our package.json now looks like so:

"scripts": {
  "watch-sass": "node-sass sass/main.scss css/style.css --watch",
  "compile-sass": "node-sass sass/main.scss css/style.comp.css",
  "concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css",
  “prefix-css”: “postcss --use autoprefixer -b 'last 5 versions' css/style.concat.css -o css/style.prefix.css”,
  "compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed"
},

This is a nice easy one! Here all we do is tell our css/style.prefix.css input file to output to css/style.css. The --output-style compressed option will compress the code!

Let’s test it out…

npm run compress-css

Now, take a look at your style.css file.

You’ll see that all of your styles have compressed into a single line of code! All white-space and comments have been removed.

You can compare the file size of your style.prefix.css input file with the newly generated style.css file, to contrast with the compressed file size.

With this simple step, we have just significantly reduced our page load!

Next up we’ll bring the entire process together with one final script.