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
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:
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