使用 Grunt, Gulp, Broccoli 或 Brunch 移除页面内无用的 CSS 样式

 

英文原文：Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch

 

想要提高web的相应速度，一般都是通过降低响应时间，标准化 CSS/JS/HTML 以及图片的内容. 此外还能通过优化css removing unused CSS 来提高加载度. 下面看一下如何实现. 首先分享一些可用的工具. Added grunt-uncss at lunch time to my sites GruntFile, CSS file went from 115kb to 3kb! That’s -97.4% smaller! — Ville Hellman (FxN) (@efexen) February 26, 2014 Weekend dev – tried grunt-uncss on a bootstrap.css rails landing page. All in ~15 minutes for ~100K savings. Diff:https://t.co/MaJTiXrtUd — Tom Fuertes (@thisbetom) February 9, 2014 在常见的UI框架比如 Twitter Bootstrap, Zurb Foundation或者 Adobe TopCoat上未使用的CSS是影响性能的主要因素.  在下面的 Bootstrap测试里, 通过测试 Chrome DevTools Audits panel发现 ~ 大约90%的CSS规则都是无效的.

petert 翻译于 1年前 0人顶   顶 翻译的不错哦!

这是 PageSpeed 团队之前提到的一个问题, 并在  speed recommendations做了移除无用的CSS操作: “在浏览器解析页面前，都得下载布局的 stylesheets .就算之前在缓存里保存了stylesheets ，还是得等到浏览器从磁盘下载完stylesheets 后才能开始解析.通常，很多网站的布局页面使用相同的外部CSS文件，这其中就有很多并不适用于当前页面的布局.” 那么在测试后, 可以大胆的删除那些无用的CSS规则以提高响应速度. Apache  PageSpeed通过 mod_pagespeed来提高速度, 但要添加到制定项目里可能还得花点功夫.

petert 翻译于 1年前 0人顶   顶 翻译的不错哦!

UnCSS

Giacomo Martino 的 UnCSS 是移除无用CSS的另一个方案. 原理如下:

1. HTML通过 PhantomJS 加载然后运行JavaScript.

2. 需要使用的 stylesheets 从 HTML查找.

3. 形成指定的 stylesheets然后通过 css-parse解析.

4. document.querySelector 过滤掉 HTML文件中没有的查询.

5. 未使用的 CSS不被调用.

Using grunt-uncss

 我用Grunt写过一个叫 grunt-uncss的任务, 在 UnCSS基础上可以方便的放到你的编译过程里 .

如果你之前没用过 Grunt , 最好先看看教程 Getting Started , 里面讲了如何创建 Gruntfile以及安装和使用查件的方法. 等熟悉了之后，可以直接通过命令调用:

?

1	npm install grunt-uncss --save-dev

插件装好了以后, 可以通过这行JavaScript代码在 Gruntfile里调用 :

?

1	grunt.loadNpmTasks('grunt-uncss');

通过使用grunt-uncss指定相应的CSS文件来保证没有无效的CSS. 下面是示例dist/css/tidy.css.

?

1 2 3 4 5 6 7 8 9

uncss: {   dist: {     src: ['app/about.html', 'app/index.html'],     dest: 'dist/css/tidy.css'     options: {       report: 'min' // optional: include to report savings     }   } }

petert
翻译于 1年前

0人顶

 

顶 翻译的不错哦!

下面，指定作为输入将要为所用选择器进行扫描的HTML文件。在本例中，我们使用一个数组，含有我们想要检查的两个文件  app/index.html 和 app/about.html 。

然后你就可以使用这个任务，通过一个处理器，如 processhtml，用一个注释块指示把你的样式表重写为 tidy.css：

?

1 2 3 4 5 6 7 8 9 10

<!-- Stylesheets we would like cleaned --> <!-- build:css css/tidy.css --> <!-- just here to make sure we reference css/tidy.css --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- /build --> <!-- Stylesheets we want to minify as usual --> <!-- build:css css/other.css --> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/normalize.css"> <!-- /build -->

下面的一些配置让 Grunt 知道你想把你最终生成的文件存到哪里：

?

1 2 3 4 5 6 7 8

processhtml: {   dist: {     files: {       'dist/index.html': ['app/index.html'],       'dist/about.html': ['app/about.html']     }   } }

其它支持的配置选项也很多，包括 CSS 压缩，你可以在项目的 说明文件 中查阅。

赵亮-碧海情天
翻译于 1年前

0人顶

 

顶 翻译的不错哦!

测试 通过在代码库里的‘grunt’命令来运行demo project : 效果如下: 去掉无效的 Bootstrap CSS 后效果如下: 可以看到，前后页面没什么两样. 我们只是使用必要的CSS样式，别无他处. 但最终需要的 Bootstrap CSS 文件大小从 120KB (压缩过的)降到了 11KB – 将近91% 的缩小率.

petert 翻译于 1年前 0人顶   顶 翻译的不错哦!

Using gulp-uncss

Ben Briggs 也用 Gulp 做了一个类似的任务 gulp-uncss 。其步骤如下:

?

1 2 3 4 5 6 7 8 9

var gulp = require('gulp'); var uncss = require('gulp-uncss'); gulp.task('default', function() {     gulp.src('site.css')         .pipe(uncss({             html: ['index.html', 'about.html']         }))         .pipe(gulp.dest('./out')); });

Using broccoli-uncss

Sindre Sorhus 用Broccoli 也写了个类似的任务 broccoli-uncss :

?

1 2	var uncss = require('broccoli-uncss'); tree = uncss(tree, {html: ['./index.html', './about.html']});

Using brunch-uncss

Jakub Burkiewicz的 Brunch任务UnCSS插件 plugin 也很类似. 通过Brunch中的配置文件config.plugins.uncss来配置之前的示例操作如下:

?

1 2 3 4 5 6

plugins:     uncss:         options:             csspath: '../styles'             htmlroot: 'build'         files: ['index.html', 'about.html']

What about CSS pre-processors?

我这里有个简单的示例 example 是通过 UnCSS (grunt-uncss)和一个类似Sass的 CSS  pre-processor.可以想象成一系列的任务链. 这样确保 Sass加载正确的 stylesheets并清除无效的应用. 这能解耦 UnCSS和业务层的关系.

petert
翻译于 1年前

1人顶

 

顶 翻译的不错哦!

结论

记得: 如果你觉得自己有CSS使用效率问题，别只是想当然，最好是测试一下.  使用 DevTools Audits panel测一下到底有多少无效的CSS,并多试一下.

My stylesheet file size was around 120K, after grunt-uncss it was around 25K. That’s pretty neat, thanks@addyosmani https://t.co/e8Btu0seFO

— Matija Marohnić (@silvenon)

March 21, 2014

 UnCSS 当然还有很多需要改进的, 像是动态产生的模板 . 如果你有特殊的需求，请在 upstream告诉我们.

如果你的项目里有很多无效的 CSS, 使用UnCSS能在编译时就去掉无效的CSS并大大提高网页响应速度.

延伸于都

• Automating the removal of unused CSS – VelocityConf

• Use Grunt and UnCSS to speed up the load time of your site

• Automating Front-end Workflow (slides)

• Automatically removing unused CSS – Windows

Prior art

除此之外，还有很多开发人员在移除无效CSS方面做了很多工作，相关的工程如下:

• Opera’s ucss

• Deadweight

• Brian Le Roux’ CSS Slap Chop

• Helium-CSS

• GTMetrix

• CSSESS

• Python mincss