删除未使用的CSS的工具

#1 楼

我不得不说，我认为这个选择比我最初的建议要好。我最初的建议非常适合快速浏览，这更适合制作发行包。

UnCSS，特别是我基于该建议的是UnCSS的Grunt包装器；当然，它可以集成到Grunt构建系统中以实现高度自动化。

有很多自定义选项（也详细列出了），并且它支持本地和远程css文件作为源。 br />
如果在Grunt中使用，建议与grunt-processhtml一起使用，以自动使您的页面引用新的串联并清理的CSS文件。

如何我用它：（是我的gruntfile.js的片段）

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uncss: {
        main: {
            options: {
                report: 'gzip'
            },
            files: {
                '<%= grunt.option("outpath") %>/css/cleaned.css' : '<%= src_files_html %>',
            }
        }
    },
    processhtml: {
        main : {
            options: {
                strip: false
            },
            files: [{
                expand: true,
                cwd: '',
                src: '<%= src_files_html %>',
                dest: '<%= grunt.option("outpath") %>'
            }]
        }
    }

，然后在我的html文件中有这个：

    <!-- build:css ./css/cleaned.min.css -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link href="./css/style.css" rel="stylesheet">
    <!-- /build -->

转换为：

<link rel="stylesheet" href="./css/cleaned.min.css">

CSS的体积要小得多，并且在性能和移动带宽方面要好得多。

#2 楼

我有一个不错的选择-至少我完全喜欢它-尽管它既不是Web应用程序也不是Linux应用程序。

我建议使用Firefox附加组件CSS用法-它确实需要Firefox和Firefox附加组件Firebug。



用法：


仅加载页面（通过Web，本地主机（如我的图片）），甚至只是文件系统，
打开firebug控制台，然后单击css用法选项卡
单击SCAN

查看，如果要导出已清理的css（仅从文件系统可靠地工作-尽管这应该是一个较小的修复程序）

不幸的是，导出的已清理CSS有一些烦恼；删除了一些规则（很好），但有些前缀为UNUSED.。应该有一个IMO选项可以删除这些也一样，但是目前我不相信（至少，如果我从未发现过）。

作为一种变通办法，我一直做的就是将其复制并粘贴到Notepad ++并使用搜索替换为是正则表达式作为搜索字符串：UNUSED\..*?\}（并选择. matches newlines）和一个空白替换来摆脱它们。 -要在Sublime中执行相同的操作，请使用(?s)UNUSED\..*?\}作为正则表达式。其他大多数优秀的文本编辑器也应具有类似的功能。

#3 楼

我已经制作了基于此浏览器的在线未使用CSS移除工具。
功能：

基于浏览器。无需安装。
针对多个URL检查CSS。
提供用于手动选择/取消选择CSS
文件中项目的选项。
可以下载并在本地主机上运行，​​不受限制
URLs
开源代码

免责声明：我是代码的作者。

#4 楼

IntelliJ IDEA具有一些强大的Web开发功能：


与Windows / Mac / Linux一起使用
发现未使用的CSS类定义

，您需要Ultimate Edition可以访问Web开发功能（如果您是项目负责人或开放源代码项目的常规提交者，则免费）。

#5 楼

我们为此编写了一个免费的在线工具：UnusedCSS

它递归地爬网您的网站（遵循内部链接）并找到未使用的选择器（许多其他工具仅处理一页）。

#6 楼

我之前在几个项目上使用过firebug插件CSS用法-唯一的缺点是您必须手动浏览整个网站才能获得使用中样式的准确映射。

它但是，将为您提供css文件的简化版本，可用于替换当前的样式表。