如何用CSS和Javascript来缩小HTML？

Question

我在文档中有一个带有CSS和Javascript的.html文档（没有外部文件）。是否有一些在线工具，将minify文件和JavaScript的一些非常小的足迹？我看到很多脚本是不可读的，其中所有变量和函数名称都用单字母名称替换，等等。请指教。

Answer 1

编辑2（2017年2月22日）：现在来缩小你的资产的最佳工具（和更多，通过添加装载机和插件）绝对是Webpack。配置的

例将您的所有.css在一个文件中，然后再缩小它：

{ 
    test: /\.css$/, 
    use: [ 
    { 
     loader: 'css-loader', 
     options: { 
     minimize: true 
     } 
    } 
    ] 
} 

---

编辑1（2014年9月16日）：更妙的是，现在你有任务亚军如Gulp或Grunt。

任务亚军是用于自动化许多 费时，乏味（但很重要），而开发一个项目，你必须 任务做一次小的应用程序。其中包括运行 测试，连接文件，缩小和CSS预处理等任务。通过 只需创建一个任务文件，您可以指示任务运行者自动处理 任何开发任务，您可以在您对文件进行更改时想到 。这是一个非常简单的想法 ，这将节省您大量的时间，并让您保持专注于 发展。

必读：使用JavaScript级联和缩小（和JSHint）任务的Getting started with Gulp.js

例子：

gulp.task('scripts', function() { 
    return gulp.src('src/scripts/**/*.js') 
    .pipe(jshint('.jshintrc')) 
    .pipe(jshint.reporter('default')) 
    .pipe(concat('main.js')) 
    .pipe(gulp.dest('dist/assets/js')) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(uglify()) 
    .pipe(gulp.dest('dist/assets/js')) 
    .pipe(notify({ message: 'Scripts task complete' })); 
}); 

---

原来的答复（2012年7月19日）：我劝可以缩小你的JS和CSS的HTML5 Boilerplate Build Script。

Answer 2

通过使用manyavailableminifiers之一。

有evensome minify CSS。

Answer 3

好的javascript压缩器也是Google's Closure Compiler，反之亦然，为了使压缩代码更好看一些，你可以使用Javascript Beautifier。你也可以看看phpEasyMin项目。

Answer 4

从来没有尝试过，但听说过真正的谷歌的封闭compiler..You评语好可能想尝试一下

Answer 5

尽管JavaScript代码可以在JavaScript中压缩和解压缩（请参阅其他答案），但实际上很难在CSS中实现相同的结果。目前没有任何工具可以去除不必要的空白（参见Are there any agressive CSS Minification tools?），因为在不破坏HTML和CSS之间的链接的情况下，标识符和类名不能更改。

此外，除了空格之外，您不能从HTML标记中删除任何内容。那么，你可以缩小类名和标识符，但是目前没有工具可以更新CSS/JS文件中的缩小值，所以这会使你的网站变得丑陋和破碎。甚至为了获得一些CSS效果，通常需要空元素（是的，我在看你，IE6）。这也适用于JavaScript函数名称。

TL; DR：不幸的是，这里没有all-in-one-minify-everything工具。最接近的是htmlcompressor。

Answer 6

恐怕你就必须做的两个步骤：

1. 手动搜索，并在文本编辑器全局对象的替代
2. minifiers完成对CSS的工作和js

前段时间我有一个类似的问题（关于全局对象和对象键）。我得到的答案是没有工具会对全球背景做出假设。在你的例子中，他们不会缩小“pageLoad”，因为它可能被另一个你没有提供的html或js片段使用。

在你的榜样一种解决方法是使页面加载函数的局部和动态脚本添加onload事件：

elt.onload=function(){pageLoad();}; 

Answer 7

Closure compiler已正确推荐JS;但很少有人知道谷歌的Closure stylesheets。其中一个封闭样式表功能被重命名，其中

<style> 
    .descriptive-parent-class-name .descriptive-element-class-name {color:red;} 
</style> 
<div class="descriptive-parent-class-name"> 
    <p class="descriptive-element-class-name">Lorem ipsum</p> 
    <p class="descriptive-element-class-name">Lorem ipsum</p> 
</div> 

将成为

<style> 
    .a-b .a-c {color:red;} 
</style> 
<div class="a-b"> 
    <p class="a-c">Lorem ipsum</p> 
    <p class="a-c">Lorem ipsum</p> 
</div> 

将会有进一步缩小太多;并且考虑到OP表示所有资源都包含在html中的事实，这可能最终节省流量开销。

注意：如果你检查任何谷歌搜索结果页面中，你会看到他们的阶级和ID名是几乎超过4个随机字符

Answer 8

尝试http://prettydiff.com/永远不再。它提供了自动语言检测功能，可以缩小html，css和javascript。这个工具假定没有MIME类型或与JavaScript相关的MIME类型的脚本标记必须包含javascript或不包含任何内容。同样，没有MIME类型或“text/css”MIME类型的样式标签被假定为包含CSS。 CSS和JavaScript被相应地缩小。该工具本身是用JavaScript编写的。没有理由你应该使用多个工具。

Answer 9

我建议你试试WebMarkupMin Online。

WebMarkupMin Online是一个免费的在线工具，用于缩小您的HTML，XHTML和XML代码。 HTML和XHTML缩小器支持从style标记和属性缩小CSS代码，并从script标记，事件属性和带有javascript:伪协议的超链接缩小JavaScript代码。这些缩小器支持多种CSS缩小算法（Mads Kristensen的Efficient stylesheet minifier,Microsoft Ajax CSS Minifier和YUI CSS Compressor）和JavaScript缩小（Douglas Crockford的JSMin,Microsoft Ajax JS Minifier和YUI JS Compressor）。

这些工具基于WebMarkupMin库。