如何用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庫。