WordPress主题-删除未使用的CSS

Question

I have a wordpress theme and I want to remove unused css. So I try to use Gulp+uncss

Theme Folder structure

CSS/main.css
-gulpfile.js

Wordpress site url localhot/wpsite

And I have gulpfile.js

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

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

    //Uncss task
    gulp.task('uncss', function() {

        gulp.src('css/main.css')  
            .pipe(uncss({        
                html: [  'http://localhot/wpsite/','http://localhot/wpsite/about' ]  
            }))      

        .pipe(rename({suffix: '.clean'}))
        .pipe(gulp.dest('css'));

    });

But I can`t get new clean css file

Answer 1

After you see the above(your code) gulpfile.js

If you have just a few pages, like 20 or less, you can just go ahead and copy and paste the URL's if not then you will need a plugin for this. There's a plugin that is designed for Grunt but also works fine with Gulp. You can find it here with easy-to-follow instructions on how to use it.

After you activate it, go to:

http://yourdomain.com?show_sitemap

You'll see some code, just Select all and copy then paste it in the gulpfile.js inside the uncss function after “html:”

After you copy the array, save the file. Then, in the command-line, type:

gulp uncss

So now, if you look at your CSS folder or wherever you chose for your destination path, you will see a new lean CSS with the suffix '.clean' that should look something like this:

Check once the below link. It will clearly describes, How to Remove Unused CSS in WordPress Using Gulp from the gulp installation

Remove Unused CSS