2013-12-14 41 views
0

我做了很多網絡性能優化工作,通常在項目中(顯然)並非每個人都與開發與生產環境處於同一頁面上。如何縮小多個/混合文件類型

我工作的大多數項目都使用HTML,CSS和JS,但很多時候涉及到的HTML在PHP模板(主要是HTML)中。

哪些PHP minifiers(如果有的話)可以正常工作在主要是HTML的文件上,哪些JS和CSS minifiers會產生對開發者友好但濃縮的代碼(例如,在保留註釋的同時在一行上有每條規則的CSS文件,但刪除空格)。

由於易於運行不同的任務,我目前使用Grunt和大部分的'contrib'插件,但在簡單連接和完全連接和縮小之間似乎沒有多大的區別(即一行中的所有代碼)。

是否有任何提供中間立場和/或可處理混合文件類型的工具(即PHP文件主要包含HTML或包含.htm(l)文件擴展名的PHP文件)?

+0

我沒有看到js/css文件的問題。你有開發文件和運行Grunt來縮小它們,同時保持原始的文件再次執行。您在應用程序中使用縮小的文件。就像LESS工作一樣。您不包括.less文件,但使用輸出的CSS。 – user555

+0

我的主要關注點是可讀性。我通常在生產代碼上工作(我不認爲他們正在使用預處理器),完全縮小的代碼很難瀏覽和丟失文件和外部分號之間的中斷。雖然我喜歡使用Uglify並生成源地圖,但我知道如何將DevTools與這些技術結合使用,但我不能假定每個人都這麼做,所以我想找到一箇中間地帶的方法。 –

+0

恕我直言,不理解「jQuery.js」和「jQuery.min.js」之間鏈接的人不應觸碰產品代碼。發送到客戶端的生產代碼不應包含註釋,調試符號等。您可能無法找到所需的工具。縮小與可讀性無關,其中一個是源代碼。在過去,我已經使用PHP對js和css進行了「按需」縮小的實驗。在發送給客戶端的文件之前,他們被PHP腳本縮小了。也許這可能是一條值得追求的道路? – user555

回答

0

下面是我找到的最滿意的解決方案(截至昨天)......抱歉,我不得不提一個特定的程序(我假設其他程序可能會這樣做)。

我能給出的最清晰的解釋是CSS:

公開賽在崇高的文本項目,做一個「替換」正則表達式匹配選項激活找到\n\n(2個回車),並與\n更換(1回車)。

保存。

然後在IDE中打開該項目,設置代碼格式設置首選項,以便聲明,屬性和右括號在它們自己的行上,並且每個都縮進等量。

然後,我將這些設置應用於整個項目並進行了代碼重新格式化。爲了防止psuedo類匹配,我設置了它,以便在將冒號與聲明分開的冒號後面有一個空格。例如:

a:hover{ 
font-weight: bold; 
} 
p{ 
font-weight: normal; 
} 

然後我做了一個「查找所有」的:(由後面緊跟一個空格,在崇高的文本我只是強調一個冒號和尾部空間,然後選擇「全選」選項(命令+ control + g)

然後我將光標移動到每一行的開頭(命令+◀︎[這是一個左箭頭])並刪除,直到所有屬性都在一行上。

然後,我下移到下一行,只有}(右括號)並刪除,直到它在同一行上的行作爲屬性和聲明。

然後我調整了這個過程來處理我需要的每個文件(PHP/HTML,CSS,JS)。

最終的結果是緊湊的人類友好的,可讀的,代碼具有所有完整的顯影劑友好的特性(在聲明最後一個屬性後分號,在不同的行聲明)。