如何從一個項目的web生成一個優化的html文件？

我有一個單一 html文件的典型網頁。此頁面使用css，javascript模塊（requirejs）和圖像。我想生成一個單獨的html文件，其中包含嵌入和縮小的所有資源，包括html文件本身。如何從一個項目的web生成一個優化的html文件？

這是我的結構：

myApp/ 
    www/ 
     css/ 
      css1.css 
      css2.css 
     img/ 
      img1.png 
      img2.png 
     js/ 
      main.js 
      module1.js 
     index.html

而且我想生成這個：

myApp/ 
    www-build/ 
     index.min.html

我知道，存在不同的工具來優化的JavaScript，CSS和HTML。但問題是如何將它們自動組裝成單個文件。

來源

2013-06-12 jbaylina

咩用它上網。任何人不止一次訪問該網站都會遇到大量的多餘流量。這就是爲什麼這些資源應該是外部的 - 所以它們可以與主要內容分開緩存（當然，儘管將每個*縮減爲一個CSS文件和一個js文件沒有錯） –

我同意這種做法通常是不是一個好主意。但是當頁面很小並且需要快速響應的頁面時，它可能是一個解決方案。想象一下，你正在訪問一個頁面到地球另一端的服務器。如果用戶不得不兩次訪問服務器，那就不一樣了。 – jbaylina

我明白了你的觀點，但是當你加快首頁加載的體驗速度時，你最終每次都會放慢速度。我估計在大多數情況下這不是一件好事 –

我結束了使用gruntjs等一系列咕嚕任務來完成這項工作：

一個Jade模板與include指令導入JS和CSS。
grunt-base64將圖像轉換爲base64。

玉文件，將一些這樣的事：

html 
    head 
     title= "Example Page" 
     include css/css1.css 
     include css/css2.css 
     include js/main.js 
     include js/module1.js 

    body 
     | <img src="data:image/png;base64, 
     include img1.b64 
     | "/> 

     | <img src="data:image/png;base64, 
     include img2.b64 
     | "/> 

     canvas#myCanvas

我也用uglify等優良的預定義任務來優化代碼。

來源

2013-06-14 08:38:18 jbaylina

-1

您可以在您的單個文件中包含所有內容，但我認爲這不是一個好主意，因爲Pekka的評論已經指出。但無論如何：您可以將標籤包含在Javascript中，與CSS（或內聯CSS）相同。對於圖像：您需要將它們轉換爲字符串以便將它們保存在頁面中。 Base64編碼將完成這項工作。這裏有一個例子：http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html

來源

2013-06-12 07:35:31 Robert

是的，我知道這是可能的。我所問的是，如果它存在一個工具或一個過程來自動執行它。 – jbaylina

這是不是一個好主意是值得商榷的。我可以看到，當你使用有限數量的TCP連接的移動設備時，這將會如何工作。如果頁面權重很小，我會傾向於使用一組數據，而不是使用多個TCP連接。 –

我不確定如何將其作爲一個整體文件生成，但是您可以使用Google Granule壓縮[到一個文件]並以編程方式縮小您的CSS文件和JS文件。（當頁面被加載時）。這將顯着減少網頁加載時間。

結帳：

http://code.google.com/p/granule/

來源

2013-06-18 05:02:57 mel3kings

你可以嘗試https://github.com/remy/inliner

你可以安裝：