實時css/scss版本與流星，避免服務器重啓

Question

雖然用流星建立大型應用程序，但我們確實面臨編輯樣式表文件的常見問題。一旦編輯了一個文件，整個應用程序就會重新加載，每次進行一點改動都需要花費時間。一個大型項目暗含了複雜的CSS文件。出於這個原因，我選擇使用sass來構建它們，並在開發過程中更高效。我正在尋找的是一個工作流程，我可以在編輯器中更改.scss文件，並在我的流星應用程序中實時觀看結果。

Answer 1

以下是你需要什麼（它看起來講究，但不要害怕，它值得）：

設置你的項目外化.css文件

• 流星編譯所有的CSS文件整合到一個單一的文件中，大多數css編輯器都沒有預料到這種行爲。對於開發階段，我建議使用將樣式表包含在html頁面本身的傳統方法。這樣做：meteorProject/public
• 添加CSS文件到這個文件夾：
  • 在您的流星項目的根目錄下創建一個公共文件夾meteorProject/public/style.css
  • 導入你的主HTML代碼樣式表<link rel="stylesheet" type="text/css" href="/style.css" />

你做了什麼？您創建了可通過路徑localhost:3000/訪問的公共存儲庫，然後將樣式表style.css添加到此存儲庫，通過相對路徑/style.css可以找到該樣本表。通過使用這種技術，流星將不會編譯既不包括自己的樣式表到您的項目，您只需使用link標籤以常規方式手動加載它。現在是配置編輯器的時候了。

• 既然樣式是以10年前的樣式導入的，那麼您可以使用兼容的工具來覆蓋樣式以允許實時編輯。一個簡單的，但只爲CSS是衆所周知的Espresso（以前稱爲CSSEdit），打開頁面並覆蓋樣式......但那個目前不支持.scss文件。

編輯.scss實時文件與流星：

• 要做到這一點，你需要使用文本崇高2或3的編輯器，你可以在這裏：http://www.sublimetext.com/3它是不是免費的，但沒有功能也沒有時間限制。所以如果你繼續使用它，只需購買它來支持開發團隊。
• 您將需要真棒工具，讓現場版是高名，在這裏獲得：https://github.com/mechio/takana

這高名真是太真棒！這個概念如下：一旦安裝並運行，它將創建一個與sublimetext編輯器交互的服務器，然後請求您向代碼中添加一個js片段，以便瀏覽器與takana服務器連接並重新加載.css或.scss文件實時無需重啓流星。 要設置與高名流星項目剛做到以下幾點：

• 通過提供它的meteorProject/public的絕對路徑打開另一個終端的終端
• sudo npm install -g takana（如果要求輸入密碼）
• 開始高名上面創建的文件夾是可能看起來像：takana /Users/aUser/meteorProject/public
• 添加到您的主HTML頁面的js代碼段<script type="text/javascript" src="http://localhost:48626/takana.js"></script>

您現在所有的設備都可以使用它

• 在第二個終端啓動您的流星項目。命令meteor從正確的道路...
• 打開任何瀏覽器，您的流星網頁即可能http://localhost:3000
• 打開sublimetext，嘗試編輯style.css文件，CSS的更改會自動在瀏覽器頁面上顯示，但不保存任何東西。
• 這也適用於.scss文件。只需將style.css重命名爲style.css.scss並在崇高文本中進行編輯即可。這裏發生了奇蹟，你正在編輯一個scss文件，並在流星應用程序上生成結果，而無需重新加載任何東西。

一旦你滿意的結果，你可以編譯.scss到.css文件和常規方式將其添加到項目中，或使用流星.scss包，將在每一個爲你做這個重新開始。注意：不要忘記在生產中一次性刪除js和樣式代碼片段。

最後但並非最不重要的一點是，您可以在多個瀏覽器中打開項目，並在SublimeText中編輯文件時查看它們的現場刷新，同時Safari和FF也能正常工作，但由於某些原因，我不得不使用「Google Chrome Canary「而不是」Chrome「。如果您在其他瀏覽器（例如IE，Opera）上工作，或者即使它與計算機上的常規「Chrome」一起使用，請發表評論。