Most of times we want to remove the ugly and unnecessary CSS styles. Of course you can go, search and find each those CSS class and remove them individually. May be you are like most other developers who use CSS Frameworks like bootstrap and semantic ui, where their are a lot of CSS class that you might not use in your small project. Wouldn’t be cool if there was a way to automatically remove all those unused CSS styles with in minute? Today’s tutorial is about how to remove unused CSS. You will learn how to use grunt and uncss.
What is Gulp?
Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow. You can compile sass/scss files, uglify and compress js files and there are a lot more that Grunt will do for you.
Requirements
Before we start, make sure you have the base requirement and tools installed in your system. This tools include:
We assume you have installed nodejs in your system. If you don’t know how to do that, just go to nodejs.org and install it like other software.
Once you install it, you must be able to write node -v in command line and see the nodejs version.
the current version of my nodejs is 4.4.6. Your’s might differ.
Installing Gulp
After installing nodejs, you can install Gulp now. To install nodejs, just run the following command.
$ npm install --global gulp-cli
This will install gulp globally, means you can write gulp in your command-line and it will work just fine.
Creating a Gulp Project
In your project root, create a package.json file and write an empty array in it.
{
}
Once the package.json file is created, we can install Gulp into the project by using the following command:
npm install --save-dev gulp
This time, we’re installing Gulp into project instead of installing it globally, which is why there are some differences in the command.
Note: They way gulp works is to install plugins for your project. Their are many different plugins for different purposes. We want to remove unused CSS, so we install uncss plugin.
Install uncss to remove unused CSS
npm install -g uncss
Once you install it, you can remove unused CSS.
How to Remove Unused CSS
Create a gulpfile.js file in your project root. Past the following codes.
var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('uncss', function() {
return gulp.src([
'css/bootstrap.css',
'css/style.css'
])
.pipe(uncss({
html: [
'index.html',
]
}))
.pipe(gulp.dest('css/uncss'));
});
The first two line will include the gulp and the gulp-uncss which we installed.
Secondly, we created a task with gulp and gave it a name call uncss. Of course you can name it anything you want.
The steps for tasks.
- Give the original file directory to gulp.src.
- Spacify the html files.
- pip it to the directory you want to save the file.
Now run the gulp command in your project directory and the the task name.
gulp uncss
It will remove unused CSS styles from bootstrap.css and style.css than saved it to css/uncss directory.
Conclusion
Most of times, we have speed loading problem for our site. By removing unused CSS styles, we can make our site load faster than ever. If you have any problem while using uncss, feel free to comment it bellow. 🙂
