構建系統，集成coffeescript，LESS（等）web開發？

對於業餘愛好項目，目前我正在工作，包括稍後在編譯後的語言，例如Coffeescript到Javascript，LESS到CSS等等......我一直在通過shell腳本來組織和維護代碼。構建系統，集成coffeescript，LESS（等）web開發？

這是完全可行的，但有時我認爲專用的構建系統會更合適。典型的任務包括文件翻譯，刪除非縮小版本，獲取更新的外部庫等等......

有沒有任何構建系統將所有這些功能組合起來？

編輯：

非常感謝您的答覆。運氣可能有它，我今天發現了這個工具，並決定放棄它：http://brunch.io/ 不過，我接受的答案更接近我的想法。

早午餐之前，我還在考慮SCons的，因爲它是很簡單的web項目，我可以利用與其他項目的知識（在C，Python和Java的等）

來源

2012-04-18 Rui Vieira

編輯所以它不是要求推薦，而是要求解決方案：構建集成了網絡資源管理（例如LESS，CoffeeScript等）的系統 – 2013-07-27 11:46:18

爲CoffeeScript的項目中最常見的做法是使用CoffeeScript自己的cake。您將Cakefile放入存儲庫的根目錄並創建執行構建步驟的任務。你可以調用less.js和咖啡來直接從你的任務中調用。

我使用了幾個工具：browserify和uglifyJS在我的Cakefile任務中爲瀏覽器創建一個完整的包。這是一個fairly complicated Cakefile，但尋找構建任務，以瞭解如何一起使用這些工具。

請注意，該示例不包括只有javascript的最終包中的css。 Here is an example of a Cakefile I've written that embeds javascript right into the html。你可以用CSS來做同樣的事情。關於Cakefile的好處在於，它在開發過程中將資產分開，然後只在準備部署時將它們包裝在一起。也就是說，如果你可以避免將它們分開，那麼對於緩存和開發便利的原因而言，這是可取的。我在這個例子中包裝它的唯一原因是因爲最終的包需要在另一個沒有跨站點訪問的環境中運行。

來源

2012-04-18 12:25:08

如果您正在開發像Rails這樣的Web框架的項目，那麼您應該配置Web框架以在服務時編譯CoffeeScript和LESS。

如果你正在開發沒有後臺「靜態」的網站，然後我會建議之一：

使用像LiveReload工具（MAC-只），或
使用靜態網站生成器像Middleman

來源

2012-04-18 13:39:29

「您應該配置Web框架以便在服務時編譯CoffeeScript和LESS 「。 ...正在開發 – umassthrower 2012-08-14 04:55:04

我個人一直使用的RubyGems的組合完成這個任務，主要是：

衛隊
鏈輪
後衛 - 鏈輪

衛隊是將監聽文件的更改，然後可以做的「東西」給那些修改過的文件的瑰寶。

Sprockets在Ruby on Rails中用於其資產管道。簡而言之，在轉換/轉換CoffeeScript，LESS，SASS，JS模板時，幾乎所有需要轉換的東西都需要轉換，並且有一個RubyGem用於轉換。

guard-sprockets gem是兩者之間的粘合劑，每次更改源文件時都會調用鏈輪來生成我的文件。

如果您熟悉Ruby，RubyGems和Bundler，可以看看我使用這三個RubyGems創建的Project Template。這絕對不是完美的，但它目前適用於我，並可能幫助你開始。

https://github.com/spadin/frontend-project-template

來源

2012-04-18 15:45:11 Sandro

選項，你應該考慮：

Cake
grunt
CodeKit（重加載）

編輯：6個月後，我建立了我自己的工具來擴展Cake的功能：http://ricardobeat.github.com/cake-flour

來源

2012-04-18 19:04:56

我用Mindscape Workbench與Visual Studio 2010，這太棒了。

從網站：

超級好用

安裝擴展程序，即可大功告成。無需設置發佈後生成事件或輸出生成器。保存這些文件，並根據需要生成關聯的CSS或JS文件。簡單！
語法高亮

通過擴展Visual Studio中，在Web工作臺會給你無禮的話，少，咖啡腳本語法高亮顯示。一種幫助學習語法並更好地理解你正在編寫的代碼的好方法。
智能感知

的Visual Studio爲開發人員提供夢幻般的智能感知，我們已經很努力，當你編輯帶來智能感知的無禮和減檔。
免費使用

歡迎您使用本軟件免費，如果你喜歡它，你最多可以移動到專業版爲小$ 39！你想

你不必使用所有這三種支持的語言
只使用了位。如果您只想要Coffee Script，或者只想使用Less，那麼通過所有方法就可以使用這些部分。這一切都在一個安裝，但在你的應用程序中不相互依賴。

來源

2012-04-18 19:17:31 asawyer

我剛剛安裝了它，除非我錯過了它不支持生產代碼的東西。你必須在HTML中包含每一個咖啡文件。 – 2012-10-18 15:28:18

你應該考慮的另一個選擇是CoffeeToaster：
http://github.com/serpentem/coffee-toaster

它配備了一個包裝系統，該系統啓用時會使用你的文件夾的層次結構，如果你想使空間中聲明你的類，然後就可以從多個文件擴展類，做進口和兒子，比如像：

#<< another/package/myclass 
class SomeClass extends another.package.MyClass

構建配置極其簡約，簡單，做是顯而易見的：

# => SRC FOLDER 
toast 'src_folder' 
    # => VENDORS (optional) 
    # vendors: ['vendors/x.js', 'vendors/y.js', ... ] 

    # => OPTIONS (optional, default values listed) 
    # bare: false 
    # packaging: true 
    # expose: '' 
    # minify: false 

    # => HTTPFOLDER (optional), RELEASE/DEBUG (required) 
    httpfolder: 'js' 
    release: 'www/js/app.js' 
    debug: 'www/js/app-debug.js'

還有一個調試選項，單獨編譯文件以方便調試過程和其他有用的功能。

看一看，也許它讓你滿意。

來源

2012-04-26 19:00:13

非常有趣的項目。我一定會檢查出來。謝謝。 – 2012-04-27 10:59:46

構建系統，集成coffeescript，LESS（等）web開發？

回答

相關問題