Using gulp-uncss on Wordpress site

Hey, I finally figured it out and it looks pretty easy. I followed several articles like MandsatWork.

Basically I combined a simple gulp-uncss tutorial (on a simple website without Wordpress) with an Uncss tutorial.

I wrote a complete tutorial for this step here: http://uplifted.net/programming/remove-unused-css-wordpress-using-gulp/

So the basics:

1) You must have gulp and gulp-uncss in your project directory (unless you need to do this!)

2) In your gulp.js file, write a gulp task for uncss - it should look something like this:

 //Include Gulp
   var gulp = require('gulp');

//Include plugins
  var uncss = require('gulp-uncss');

//Rename is included to rename the uncssed file
  var rename = require('gulp-rename');

//Uncss task
 gulp.task('uncss', function() {
//Where the bloated CSS lives
 gulp.src('lib/bootstrap/css/bootstrap.min.css')       
   .pipe(uncss({ 
         html: [ 
                'http://wordpress[dot]dev/','http://wordpress-gulp[dot]dev/page-1/' 
                ]
               }))  
   //Add a suffix to avoid confusion      
   .pipe(rename({suffix: '.clean'}))
   //The destination of new uncssed file
   .pipe(gulp.dest('lib/bootstrap/css/'));

      

        
        
        
      

    

The way you do it is the most basic for him. If you have many pages, I recommend using the Grunt Sitemap Generator for Wordpress at https://gist.github.com/lgladdy/10586308

Install it using the instructions and then go to yourwordpresdomain.com?show_sitemap

Copy the array and paste it here:

 .pipe(uncss({ 
         html: [ 
 REPLACE THIS URLS ====> 'URL-1/','URL-2/page-1/' 
                ]
               }))  

      

        
        
        
      

    

Then just run gulp uncss :)