TECHNIG
Gateway for IT Experts and Tech Geeks

How to Use Uncss With Gulp to Remove Unused CSS?

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.

nodejs version
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.

  1. Give the original file directory to gulp.src.
  2. Spacify the  html files.
  3. 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. 🙂

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

where to buy viagra buy generic 100mg viagra online
buy amoxicillin online can you buy amoxicillin over the counter
buy ivermectin online buy ivermectin for humans
viagra before and after photos how long does viagra last
buy viagra online where can i buy viagra