在本地開發SASS，上傳變更

我是從CSS過渡到SASS的前端開發人員。我的本地機器上安裝了Ruby和Compass，Compass「watch」工作正常。在本地開發SASS，上傳變更

但是，我仍然得到本地CSS文件，我必須在每次微小的更改後手動將FTP傳遞到服務器，以查看所做的更改。我想自動執行此操作。

我確實發現了this thread其中建議使用rsync，但我使用Windows，我覺得設置rsync會非常困難。

有什麼方法可以使用Ruby自動執行此操作嗎？我試圖獲得的工作流程：

我將VSS中的SCSS文件保存。
羅盤表檢測的變化，編譯一個新的CSS文件
一些神奇的工具檢測到變化的CSS文件，上傳到我的服務器
我切換到Chrome瀏覽器，按下F5鍵，看到的變化

我可以做任何事情，除了第3步。任何想法？（這不涉及Linux或僅限Mac的軟件？）

來源

2011-09-19 ezuk

既然有人問，2011年北斗演變，現在提供了callback functions做的正是被要求在這個問題：

對於第3步，您可以使用on_stylesheet_saved和on_sourcemap_saved回調函數將* .css和* .css.map文件上傳到生產服務器。

示例代碼如何做到這一點可以在這個StackOverflow answer

來源

2016-05-10 08:15:32

謝謝！我很欣賞這裏的更新。 – ezuk

最簡單的解決方案是在本地開發（這是最佳實踐）。在您的計算機上運行Web服務器（嘗試Windows的XAMP），所有更改都將立即可見，無需上傳。只有完成後才能上傳。

來源

2011-09-20 07:49:12 Roy

這在理論上聽起來很可愛的發現，但我正在一個現有的網站，這是非常大的，數據庫支持，以及動態生成的。在本地鏡像它根本不是我的場景的選項... – ezuk

我實際上給了這個更多的想法，並決定我將使用此解決方案的一個版本。我不會運行網絡服務器，而是將生成的網頁作爲HTML保存在網站之外，並根據這些信息在本地進行開發。接受你的答案，謝謝！ – ezuk

我知道在當地建立和運行一個大型項目可能是一件痛苦的事情，但最終往往會讓你感到高興。當它只是造型時，你的解決方案看起來很好。祝你好運！ – Roy

我處於開發sass（scss）和在遠程開發站點上進行預覽的類似位置。在Windows上開發時，我使用Sublime Text 2編輯FTP-Sync插件以自動上傳保存。

此插件有一個方便的選項來標記文件夾保存的文件夾，這些文件夾會觸發它檢查另一個文件更改上傳的路徑。因此，您可以標記scss文件夾，對scss文件進行更改並保存，這會提醒ST2觀看css文件夾（您可以延遲構建以留出足夠的時間進行編譯）並上傳任何已更改的文件。

爲給定的項目設置軟件並設置FTP同步後，您的操作等同於1）編輯和保存，2）等待幾秒鐘，3）刷新瀏覽器以查看更改。（如果站點在這一點上看起來有些破裂，您可能需要將延遲設置提高一秒，然後再次保存該文件以再次觸發該過程。）

我不確定如何在其他平臺上完成此操作一個遠程站點，但我想知道Coda 2是否有一些可能適用於Mac OS用戶的選項。

來源

2013-02-12 20:20:21 Skrivener

Sublime也適用於Mac和Linux –

我不同意Roy和Adam，在使用Wordpress主題時，我在遠程開發服務器上開發。我有一組人添加了更新數據庫的內容和其他編輯內容，因此開發人員在100％的時間內都很難在本地工作。他們的SQL文件獲取內容更新不會超過事後與我的SQL文件（你知道主題選項設置和什麼）。

到目前爲止，我已經避免使用SASS。

我最佳的工作流程是編輯我的scss文件 - >自動編譯爲css - >自動上傳到搜索（就像上傳保存會） - > livereload發生，我看到編輯（我可以沒有這個最後一步）。

我還沒有嘗試過，但我發現這個鏈接似乎是迄今爲止最接近的答案。 Using SASS with Remote Setup

備註：本地工作並不總是最佳設置。這不是一個答案，這是關於我第八次看到類似答案的這個問題。

更新：剛剛嘗試過，沒有Codekit只是sass - 它很棒！

其他更新：我進一步修改了我處理sass和遠程開發的方式。我知道使用Sublime，同時打開我的.scss和.css文件。然後，我使用SFTP（一個崇高的包）來「監視文件」，它將查找文件的更改直接編輯它之外，然後打開終端和sass我的scss文件，現在每次我保存它符合本地，然後編譯後的css文件自動上傳到我的服務器！希望這是有道理的，也許我會做一個視頻展示。

來源

2014-02-13 20:47:52 philhoyt

對不起後復活，但尼斯解決方案。使用崇高一段時間，從未看到sftp中的「監控文件」。我在終端中使用指南針來觀看scss文件，這很有效，我相信。 – visyoual

我正在思考如何解決這個問題，然後搜索了一下我必須確定的問題......這篇文章給了我「正確的o，這應該工作」來讓它工作，並且確實如此。謝謝：D – danjah

在我的經驗，最好的辦法就是以這種方式工作：

1.你有一個網站的某個地方 - 它並不真正的問題在哪裏以及如何複雜這個網站;
2.你有從這些SASS文件生成的本地SASS文件和CSS;
3.安裝Fiddler2（網絡代理）
4.將其配置爲捕獲CSS文件的請求並將響應替換爲本地CSS文件。

因此，正如您所看到的，您可以使用本地CSS文件而不是遠程文件。因此，每次建立SASS時都不需要上傳CSS。

來源

2014-03-02 00:25:37 Valentine

Automatically Upload CSS After Sass is Compiled。

安裝： gem install net-ssh gem install net-sftp
添加到config.rb：

require 'net/ssh' 
require 'net/sftp' 

http_path = "/" 
css_dir = "/" 
sass_dir = "/sass" 
images_dir = "images" 
javascripts_dir = "js" 

output_style = :expanded 
environment = :development 

remote_theme_dir_absolute = '/path/to/where/you/want/to/save/the/file/on/remote/server' 

sftp_host = 'your-host.com' # Can be an IP 
sftp_user = 'your-user.com' # SFTP Username 
sftp_pass = 'xxxxxxxxxxx' # SFTP Password 

on_stylesheet_saved do |filename| 

    Net::SFTP.start(sftp_host, sftp_user , :password => sftp_pass) do |sftp| 
    puts sftp.upload! '/path/to/local/style.css', remote_theme_dir_absolute + '/' + 'style.css' 
    end 
    puts ">>>> Compass is polling for changes. Press Ctrl-C to Stop" 
end

僅適用於FTP：

require 'net/ftp' 


http_path = "/" 
css_dir = ".." 
sass_dir = ".." 
images_dir = "images" 
javascripts_dir = "js" 

project_type = :stand_alone 
output_style = :compressed 
line_comments = false 
environment = :development 

ftp_host = 'your-host.com' # Can be an IP 
ftp_user = 'your-user' # FTP Username 
ftp_pass = 'xxxxxxxxx' # FTP Password 

TXT_FILE_OBJECT = File.new('/path/to/local/style.css') 

on_stylesheet_saved do |filename| 
    Net::FTP.open(ftp_host, ftp_user , ftp_pass) do |ftp| 
    ftp.putbinaryfile(TXT_FILE_OBJECT, "/path/on/remote/server/#{File.basename(TXT_FILE_OBJECT)}") 
    end 
    puts ">>>> Compass is polling for changes. Press Ctrl-C to Stop" 
end

變化顯示目錄和文件路徑，以你的...

來源

2014-11-09 02:37:49 Nikit

在本地開發SASS，上傳變更

回答

相關問題