2014-07-07 26 views
2

目前我只是對我的網站做了less.js解決方法。它工作正常。 假設代碼如下所示。less.js的工作方式

<html> 
<head> 
<link rel="stylesheet/less" type="text/css" href="styles.less" /> 
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script> 
</head> 
<body> 
    ... 
</body> 
</html> 

當我更新styles.less文件時,只需刷新頁面即可。 Less.js將編譯較少的文件並應用於頁面。但我只是想知道編譯後的css文件存儲在哪裏?我也想知道less.js是否調用lessc來編譯少文件?

謝謝。

回答

1

在您給出的設置(HTML頁面)中,您讓客戶擔心解釋少於文件。

確切地說,瀏覽器加載您鏈接到的JavaScript庫,然後這個JavaScript解釋styles.less文件。

實際的css文件沒有存儲在服務器上,因爲它是所有瀏覽器端的工作,我懷疑瀏覽器將它存儲在除RAM之外的其他地方。


雖然這聽起來不太好。我們,擁有高端服務器的慷慨的網站所有者喜歡儘可能提升客戶端的計算能力。我們不想讓沒有必要的iPhone用戶電池電量不足。

或者,您在完成編輯後在樣式文件上運行lessc styles.less > styles.css。然後直接在HTML中使用styles.css,也從HTML中刪除less.js


問題你可能想問:如何編譯爲css自動然後呢?

有幾種解決方案:

  • 自動化少文件的編譯就可以被改變,使用一些軟件來觀看一個文件或目錄。
  • 您正在使用的編輯器可能有編譯較少功能,或者作爲擴展名添加。
  • 您可能想要考慮使用Web框架的策略。僅僅編譯少一點就太過分了,但是如果你從web框架中獲得其他優勢,或者已經在使用它 - 這是一個不錯的選擇。使用較少的中間件和Express框架的example
+0

你並不需要一個完整的框架來自動處理LESS文件。這主要是使用正確的編輯器的問題,或者設置其他類型的* watcher *,每次更改它時都會自動編譯該文件。爲了這一點,將一切都移到某個框架上有點矯枉過正。該文件只需在開發過程中編譯一次,而不是在Web服務器上編譯。 – deceze

+0

@deceze完全同意你的意見。我的意思是他可能想開始使用Web框架,因爲它的其他優勢也可能幫助他取決於他在做什麼。修改答案,以更好地概述自動化選項。感謝您指出。 – alandarev

+0

@alandarev感謝你的文章,你說'客戶解釋Less文件'。我不確定它是什麼意思,這是否意味着瀏覽器解釋Less文件?如果是這樣,我不同意你的看法。在我的理解。如果我使用less.js。編譯少的工作應該發生在服務器上。因爲我只在服務器上安裝nodejs。沒有必要爲所有類型的客戶安裝較少的軟件包。服務器將返回Less文件http請求的編譯後的css代碼。是對的嗎 ?請幫助驗證它。謝謝。 –

0

我知道這樣的:javascript從'link'標籤讀取較少的文件,然後解析到'style'標籤的html頁面中,您應該使用瀏覽器調試工具查看它(它的動態當你關閉頁面然後樣式標籤將會清洗)。