Tag Archives: webpack

Use uncss, rid of unnecessary css and tips

Javascript

Hi, other thing to share about my experience. This time, I talk about a plugin uncss to delete all css unused in own project.

For use that, you have a extension plugin for the commons task runners like gulp (gulp-uncss) and grunt (grunt-uncss). To write examples, I will use gulp!.

The code is simple, only are some lines into a task:

You can see that before to use uncss, if you use sass, you should to compile sass before to apply uncss. This plugin only find css tags into html files, but, there are a good practice (learned thanks to my friend Frank Parejo) that is add a naming “js-…) to all css that is executed or created into any javascript files, and into param “ignore” add all css with “js-…” to avoid to remove it. Get a look to uncss to learn more about.

This practice is very recommended. Always I use bootstrap to build my web projects, because is opensource, has a big support by twitter team and is very simple to learn, and you can down about 75% the weight of your css files when you are using a css framework like bootstrap/fundation.

For webpack, there are a famous solution called PurifyCss that also you can use with gulp and grunt

tags: , , , , , ,