如何正確unminify JS和CSS，並在HTML5中引用它們？

我一直在幫助我的朋友與創建個人網站的一個項目，我發現這個awesome jssor template的圖像幻燈片。它有deeply minified，without jquery和with jquery三個版本。如何正確unminify JS和CSS，並在HTML5中引用它們？

我已經使用jQuery沒有經驗，所以我決定去同一個版本，而jQuery的，我在那裏度過了很多時間試圖瞭解在代碼中實際發生的情況。然後，我已經轉向深度縮小的版本，因爲沒有對css或js文件的單一引用，所有工作都很順利。現在

，該deeply minified版本里面的樣式和腳本都寫在一行。由於它們超過30000個字符，因此我不打算將它們包含在後，但所有文件均可在上述模板鏈接中找到。

我已經使用這個css unminifier - 和這個js unminifier - 以某種方式將它們轉換成可讀和可理解的格式。之後，我創建了相應的樣式和js文件，並在其中粘貼了未分類的代碼。我已經將文件的引用和路徑添加到html的頭部，但由於某些原因沒有任何效果。

... 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" type="css/text" href="style/slidestyle.css"> 
<script src="js/script.js"></script> 

<title></title> 
</head> 
...

您可能會問：「爲什麼我需要改變任何東西，如果它沒有任何改變？」。這是真的，但在那種情況下，我不知道它是如何工作的，並希望你同意我的看法，這很糟糕。

我的問題，並詢問是，如何正確unminify CSS和JS文件和後記中引用它們的HTML？我認爲以這種方式做事並不是一種常見做法，但我希望能夠理解事情的工作方式並在需要時改變它們。

更新：我想通了我的方式，並作出承諾GitHub。適用於有類似問題或想更好地理解滑塊工作原理的人。

來源

2016-02-28 alljamin

我爲你做了一些挖掘工作：https：//github.com/jssor/slider/issues/171 –

@PhilMander謝謝，沒有看到這之前。 – alljamin

它應該工作。有一件事要確認，每個滑塊都有一個id，爲了移動內聯樣式來分開css塊/文件，請指定滑塊的類名，而不是使用'＃id'規則。如果仍然存在問題，請留下您工作的網址，或將您的工作寄給我。 – jssor

如何正確unminify JS和CSS

龍回答短：你不是;至少不是JS。

在CSS

的minifyer我只知道剝離空白，註釋和尾隨;等;轉換＃FF0000 - >紅色和類似的東西。一切仍然非常可讀，因此添加一些換行符和空格可以使代碼易於理解。

在JS ONT只unneccesary空白被剝離，但所有本地可變和功能名稱由（通常）單字符名稱進行替換。在不同的環境下，經常使用相同的名稱來表示不同的事物。更積極的minifyer甚至改變你的代碼結構到更短的東西。

幾乎所有的我們的代碼的理解是基於使用的名稱和代碼的結構;所以問題。

您可以嘗試從縮小的代碼中反向設計某些東西，或者有時您必須在其他代碼中修補某些東西，但是除非您確實需要並且沒有其他選擇，否則不會取消縮減代碼。

然後我就搬到了深深縮小的版本，什麼是整齊漂亮如一切正常，沒有一個單一的參考CSS或js文件

不，它不是，它是最後所選擇 - 解決方案，如果其他任何失敗。就像在您無法引用其他文件的環境中一樣。

因爲這些CSS-String的30kb現在無法被瀏覽器緩存（就像他們會使用單獨的文件一樣），最壞的情況是您在頁面上多次添加此塊，所以它只是膨脹你的HTML並放慢你的頁面。

你可能會問：「爲什麼我需要改變任何東西，如果它工作沒有任何cahnges？」。這是真的，但在那種情況下，我不知道它是如何工作的，並希望你同意我的看法，這很糟糕。

如果你想了解它是如何工作的，請看看jQuery版本。由於jQuery是外部庫，因此縮小器無法去除所使用的方法名稱。第二，代碼更密集，因爲您不必閱讀管理動畫的代碼，只需讀取一個調用即可將這些對象的這些屬性設置爲這些值的動畫，等等。這使您能夠更好地理解此代碼中沒有實現細節的情況。

來源

2016-02-28 13:25:10 Thomas

嘗試過使用jQuery的版本，它確實有'min.js'的外部引用，但問題依然存在 - 無法從外部引用樣式' css'。如果我只是將HTML中使用的相同樣式參數複製粘貼到CSS並引用它們，那麼它們就會停止工作。任何想法，爲什麼它表現得像這樣？ – alljamin

我認爲，你已經把css文件放在一個子文件夾中？ 'css'或'styles'左右？該樣式使用相對路徑引用兩個圖像。現在，瀏覽器嘗試解析這些圖像相對於css文件 - > 404。**修復css文件中圖像的路徑。** – Thomas

如何正確unminify JS和CSS，並在HTML5中引用它們？

回答

相關問題