Question

是否可以在Wordpress中使用gulp-uncss？如果是，那么这项工作的程序是什么？

Answer 1

嘿好吧我终于弄明白了，看起来很容易。我跟随了MandsatWork建议的多篇文章。

基本上我结合了一个关于使用gulp-uncss（在一个简单的非Wordpress网站上）和一个咕噜咕噜的Uncss教程的简单教程。

我在这里一步一步写了一整篇教程：http://uplifted.net/programming/remove-unused-css-wordpress-using-gulp/

基础知识：

1）你的项目目录中应该已经gulp和gulp-uncss了（如果没有去做的话）。

2）在你的gulp.js文件中写下gulp任务给unss - 看起来应该是这样的：

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

这就是你最基本的做法。如果您有很多页面，我建议在https://gist.github.com/lgladdy/10586308

中使用Grunt Sitemap Generator插件进行Wordpress

使用它的说明安装它，然后转到yourwordpresdomain.com?show_sitemap

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

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

然后运行gulp uncss：）

在Wordpress网站上使用gulp-uncss

1 个答案: