在WordPress网站上使用gulp-uncss

Question

能否在WordPress中使用gulp-uncss? 如果可以，那么使其工作的步骤是什么？

- Jonathan Perez

Answer 1

嗨，我终于弄明白了，这看起来很容易。 我按照MandsatWork建议的多篇文章进行了跟随。

基本上，我结合了一个使用gulp-uncss的简单教程（在一个简单的非Wordpress网站上），以及一个grunt Uncss教程。

我在这里逐步撰写了整个教程：http://uplifted.net/programming/remove-unused-css-wordpress-using-gulp/ 所以基础知识：

1）您应该已经在项目目录中安装了gulp和gulp-uncss（如果没有，请安装！）

2）在您的gulp.js文件中编写gulp任务以取消未使用的CSS - 它应该类似于以下内容：

 //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/'));

这就是最基本的做法。如果你有很多页面，我建议使用WordPress的Grunt Sitemap Generator插件，链接在https://gist.github.com/lgladdy/10586308。

按照说明安装它，然后访问yourwordpresdomain.com?show_sitemap。

复制数组并将其内容粘贴在此处：

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

然后只需运行 gulp uncss :)

- Jonathan Perez

---

gulp-uncss破坏了我的Bootstrap导航栏下拉菜单。你遇到过类似的问题吗？ - LoveAndHappiness

嗨，我是Node和grunt的新手，我正在努力理解如何做到这一点。我正在使用Filezilla移动文件。我只需在我的子主题中添加gulp和gulp-uncss吗？ - Steve Kim

@LoveAndHappiness 从 Uncss 文档中得知... "UnCSS 只运行在页面加载时运行的 Javascript。它无法处理用户交互（如按钮点击）时运行的 Javascript。您必须使用 ignore 选项来保留由 Javascript 在用户交互中添加的类。" - Jay