現場CSS預覽的可能性？

最近我一直在研究我的應用程序的樣式，並且有人告訴我使用實時預覽會很棒。但是，我似乎無法找到任何能在我的特定工作環境中工作的東西。現場CSS預覽的可能性？

我目前在Laravel工作，我的應用程序在本地網絡上的Ubuntu PC上運行。當我保存gulp/elixir觸發器中的一個文件並將它從SCSS編譯爲CSS，然後抓取規範化並將它們放到一個大文件中時，我將我的樣式分爲2個文件，一個用於元素樣式，另一個用於Flexbox佈局。

大多數程序都喜歡實時重載和類似的工作來檢查文件是否保存在本地，我將它保存在Sublime文本3中，然後使用FTP擴展上傳它，然後使用gulp觸發器並執行所有的魔術。

我似乎無法繞過解決方案，任何想法如何獲得某種活的CSS預覽工作？

來源

2016-05-26 Joris Schelfhout

你可以使用括號編輯器。我相信它也可以用於Ubuntu – Willox

BrowserSync非常適合這一點，爲我的視圖和樣式更改添加了文件夾（針對的是吞噬我的完成樣式表的文件夾），它的工作方式就像一個魅力。易於設置，無後顧之憂。

來源

2016-06-16 12:59:43

我其實不認爲這會很難。如果我有像你這樣的環境，我會這樣做。

咕嘟咕嘟 -

我會成立大口內的dev的標誌，會看我的SCSS變化。使用Gutil標誌我會檢查如果dev的==真&觸發的CSS爲test.css與gulp ftp

.pipe(isDev ? .pipe(ftp({ /* settings here */ }) : gutil.noop())

網站JavaScript中的FTP - 基於或許

我會成立某種觸發您可以手動設置的本地存儲，如果值爲true，則注入test.css。例;

if (localStorage.getItem('dev') === true) { 
    var head = document.head, 
     link = document.createElement('link') 

    link.type = 'text/css' 
    link.rel = 'stylesheet' 
    link.href = '{url}' // test.css 

    head.appendChild(link); 

}

所以一起每次你打保存在SCSS，將建造它，如果localStorage的開發設置爲true，您的JavaScript應該注入test.css到頭部推到服務器&時間。這個過程會很慢，但它應該工作。

來源

2016-05-26 11:09:05 Mark

現場CSS預覽的可能性？

回答

相關問題