使用 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并大大提高网页响应速度.

延伸于都

Prior art

除此之外，还有很多开发人员在移除无效CSS方面做了很多工作，相关的工程如下:
时间： 2024-08-10 21:28:02

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

前端工作流程自动化——Grunt/Gulp 自动化

前端工作流程自动化--Grunt/Gulp 自动化 Grunt/Gulp 都是node.js下的模块,简单来说是自动化任务运行器,两者都有社区及大量的插件支撑,在所有的自动化工具领域里,这两者是最好的前端自动化构建工具. 那么问题来了,Grunt和Gulp到底哪家强?在回答这个问题前,先给大家看一组下面的数据: 再看看实现同样功能的配置代码: 作者本人之前一直使用Grunt来做自动化构建的,在Gulp出来后,经过一段时间的试用感觉配置比Grunt方便多了,如果你两者还没接触过,本人推荐直接使用G

yeoman+grunt/gulp+bower构建angular项目

1 安装nodejs(最新版的 会包括npm)我的是6.2.0,安装好后 --- cmd ---   node -v打印版本号 2 安装git(省略) 3 cmd ----npm install -g yo grunt-cli bower(yo:用于安装项目框架生成,类似于maven的骨架:grunt:编译运行测试等:bwoer:插件管理,相当于jar包管理)总之分担了maven的各个功能,都下载成全局的 4 cmd  -----yo-----上下键选择 install a generator

动态加载、移除、替换JS和CSS

//动态加载一个js/css文件function loadjscssfile(filename, filetype) { if (filetype == "js") { var fileref = document.createElement('script') fileref.setAttribute("type", "text/javascript") fileref.setAttribute("src", filenam

jQuery中添加/改变/移除改变CSS样式例子

在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码:  代码如下 复制代码 $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")’表

Swift - 移除页面视图上的所有元素

下面代码可以遍历移除页面视图上的所有元件 1 2 3 4 5 6 //清空所有子视图 func clearViews() {     for v in self.view.subviews as [UIView] {         v.removeFromSuperview()     } }

Nuget Grunt Gulp

Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基于.NET Framework的应用时,Nuget能把在项目中添加.移除和更新引用的工作变得更加快捷方便. 实质:.NET平台下的开源的项目 优点:添加.移除和更新引用的工作 Nuget是 ASP .NET Gallery 的一员.NuGet 是免费.开源的包管理开发工具,专注于在 .NET 应用开发过程中,简单地合并第三方的组件库. 当需要分享开发的工具或是库,需要建立一个N

centos7 docker容器（二）运行和移除容器内应用详解

安装.运行和移除docker中的应用 运行和保存Docker容器 1.运行并保存基于Ubuntu Docker容器的nginx服务器.安装Nginx守护进程到Ubuntu启动容器: # docker run ubuntu bash -c "apt-get -y install nginx" 2.其次,在安装完Nginx包后,发出命令 docker ps -l 得到运行容器的ID或名称.运行以下命令: # docker ps -l 运行以下命令获得更改 # docker commit 5

移除页面蓝色层

双击页面某个图标的时候,有时候页面会出现一层蓝色的层,可以通过样式移除它 body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ user-select: none; }

利用gulp 插件gulp.spritesmith 完成小图合成精灵图，并自动输出样式文件

yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gulp.spritesmith": "^6.5.1" gulpfile.js的配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38