LESS部署和構建自動化

我一直想在Web開發中學習構建自動化，而在ANT構建Android應用程序方面只有真正的經驗。LESS部署和構建自動化

我想構建利用LESS的網站，但我無法看到如何實現這一點，這聽起來像是在開發中使用嵌入式JS方法並在部署時將LESS編譯爲CSS的良好實踐，但我不理解一個很好的方法，可以在構建腳本中匹配LESS鏈接和JS包含jess.js。例如

更換：

... html ... 

<link rel="stylesheet/less" type="text/css" href="styles.less" /> 
<script src="less.js" type="text/javascript"></script> 

... html ...

有了：

<link rel="stylesheet/css" type="text/css" href="styles.min.css" />

我希望我所提到的是有道理的。

有用

如果任何人都可以給我任何指針/建議在這個問題上我將不勝感激。

來源

2013-03-14 Malachi

沒有構建腳本將能夠將一個CSS文件與js文件合併，如你的例子。他們是兩種完全不同的語言，服務於兩種完全不同的需求，他們需要彼此分開。由於Less最後只是CSS，將Less文件合併到js文件是沒有意義的。

而且最佳實踐建議把CSS鏈接在文檔的頭部（爲史蒂夫Souders的建議here）和的javascript代碼在文件的結尾，就結束標記（再次史蒂夫Souders的前， here）。如果你遵循這些規則（這是強烈建議性能）你最終將CSS鏈接遠離你的JS在HTML腳本，像這樣：

<html> 
    <head> 
    <link rel="stylesheet/less" type="text/css" href="styles.css" /> 
    </head> 
    <body> 

    ....here goes the content of the page 

    <script type="text/css" src="scripts.js"></script> 
    </body> 
</html>

現在，讓我們想象一個很基本的工作流程。你有你的基本HTML結構，你需要調整它的佈局。您添加一個css重置（reset.css）並開始在稱爲style.less的Less文件中創建文檔樣式。如果您添加

<link rel="stylesheet/less" type="text/css" href="styles.less" />

在文檔的頭部，您將無法看到任何更改，因爲瀏覽器無法理解.less文件。這些文件需要在css中進行預處理和「翻譯」，因此瀏覽器可以解析它們並將給定的樣式應用到HTML頁面。所以你會運行你的（.less）文件到一個預處理器中，然後這個處理器會吐出一個css文件。所以，你的<head>將是：

<head> 
    <link type="text/css" href="css/reset.css" /> 
    <link type="text/css" href="css/styles.css" /> 
</head>

注意，styles.less文件不會在HTML中引用，但只有它的CSS對應styles.css的。當你對佈局感到滿意時，就可以繼續前進。

現在，這裏是構建腳本真正發光的好地方。構建腳本將（除其他外）連接相同類型的外部文件。在這種情況下，它可以將這兩個文件合併成一個文件。您的新<head>將是：

<head> 
    <link type="text/css" href="css/main.css" /> 
</head>

同樣的事情也會在底部js文件發生。來源：

<script src="one.js" type="text/javascript"></script> 
<script src="two.js" type="text/javascript"></script> 
<script src="three.js" type="text/javascript"></script>

到：

<script src="scripts.js" type="text/javascript"></script>

正如我所說的，這是使用較少（或無禮/ SCSS，或手寫筆），工作流和構建腳本的一個非常基本的，粗糙的例子。我想說Paul Irish給出了在this視頻中運行的構建腳本的最簡單和最清晰的代表，我強烈建議，尤其是因爲它具有HTML5 Boilerplate，如您的問題中所引用的那樣。

希望這有助於你更好地理解，讓我知道你是否有任何疑問。

來源

2013-03-15 02:11:00 Nobita

感謝您花時間以這種詳細的方式回答我的問題，並指出我一些有用的資源，即構建腳本視頻。我認爲你誤解了我想要做的事情。這是瞭解其他人如何部署應用程序並使用LESS。我會更新我的問題以使其更清楚。 – Malachi 2013-03-15 18:47:18

我是Less.js的核心團隊。如果您可以避免使用LESS，請不要使用瀏覽器版本（例如，您可能會讓用戶在瀏覽器中實時編輯「主題」......但除非您正在做這樣的事情，否則請避免使用瀏覽器版本）。

嘗試使用此構建工具進行編譯Less to CSS：https://github.com/assemble/assemble-styles。推薦的做法是將LESS預編譯爲CSS，並且使用匯編樣式可以輕鬆創建LESS/CSS文件的「捆綁」或多個版本，並且可以添加監視任務，以便在您處理LESS他們自動編譯爲CSS文件。

隨着LESS被編譯爲CSS作爲開發過程的一部分，您可以將精力集中在如何在生產中處理CSS（而不必考慮LESS）。合理？如果您有任何問題，我很樂意提供幫助。

如果您熟悉npm，那麼這很容易使用。請做npm install assemble-styles

然後按照README上的說明進行操作。

來源

2013-03-17 18:08:11 jonschlinkert

感謝您的回覆 - 我沒有使用Node的經驗，目前沒有任何構建部署的經驗。我會研究你推薦的那個鏈接，看看我能找到什麼。乾杯 – Malachi 2013-03-18 20:12:30

沒問題，我希望它很有用 – jonschlinkert 2013-03-19 21:24:44

LESS部署和構建自動化

回答

相關問題