Question

我是一名从CSS过渡到SASS的前端开发人员。我已经在我的本地机器上安装了Ruby和Compass，并且Compass“watch”工作得非常好。

但是，我仍然最终得到本地CSS文件，我必须在每次微小的更改后手动FTP到服务器，看看做了哪些更改。我想自动化这个。

我确实发现this thread建议使用rsync，但是我使用Windows而且我觉得设置rsync会非常困难。

有没有办法使用Ruby自动执行此操作？我想要获得的工作流程：

我将SCSS文件保存在VIM中。
Compass Watch检测到更改并编译新的CSS文件
一些神奇的工具检测到CSS文件的更改，上传到我的服务器
我切换到Chrome，点击F5，然后看到更改

除了第3步，我可以做任何事情。任何想法？（那不涉及Linux或Mac专用软件？）

Answer 1

我不同意Roy和Adam，在使用Wordpress主题时，我在远程开发服务器上开发。我有一组人员添加了更新数据库的内容和其他编辑，作为开发人员，我很难100％在本地工作。使用我的sql文件（你知道主题选项设置和什么不是）之后，他们的sql文件更新内容将不会很好地网格化。

到目前为止，我已经避免使用SASS了。

我的最佳工作流程是编辑我的scss文件 - ＆gt;自动编译为css - ＆gt;自动上传到搜索（就像保存上传一样） - ＆gt; livereload发生，我看到编辑（我可以没有这最后一步生活）。

我还没有尝试过，但我发现此链接似乎是迄今为止最接近的答案。Using SASS with Remote Setup

附注：本地工作并不总是最佳设置。这不是一个答案，这是我第八次用类似的答案看到这个问题。

更新：刚试过没有Codekit只是sass --watch并且效果很好！

另一个更新：我进一步修改了处理sass和远程开发的方式。我知道使用Sublime，同时打开我的.scss和.css文件。然后我使用SFTP（一个sublime的包）来“监视文件”，它会在直接编辑它之前查找文件的更改，然后打开终端并保存我的scss文件，现在每次我保存它都符合本地，然后编译后的css文件自动上传到我的服务器！希望这很有意义，也许我会制作视频。

Answer 2

自2011年提出问题以来，Compass已经发展，现在提供callback functions完全按照问题提出的要求：

对于第3步，您可以使用on_stylesheet_saved和on_sourcemap_saved回调函数将* .css和* .css.map文件上传到生产服务器。

示例代码如何执行此操作可在此StackOverflow answer

中找到

Answer 3

我在sass（scss）中开发并在远程开发站点上进行预览时处于类似的位置。在Windows上进行开发时，我使用Sublime Text 2编辑FTP-Sync插件，以便在保存时自动上传。

此插件有一个方便的选项，用于标记为文件保存而监视的文件夹，触发它以检查其他路径以进行进一步的文件更改。因此，你可以标记你的scss文件夹，对scss文件进行更改并保存，这会警告ST2观察css文件夹（你可以构建一个延迟以便有足够的时间编译）并上传任何已更改的文件。

在为给定项目设置软件和设置FTP Sync之后，您的操作相当于1）编辑和保存，2）等待几秒钟，3）刷新浏览器以查看更改。（如果此时站点看起来断了，您可能需要将延迟设置增加一秒并再次保存文件以再次触发该过程。）

我不知道如何在远程站点的其他平台上实现这一点，不过我想知道Coda 2是否有一些可能适用于Mac OS用户的选项。

Answer 4

根据我的经验，最好的方法是以这种方式工作：

1.你在某个地方有一个网站 - 这个网站的位置和复杂程度并不重要; 2.你有本地SASS文件和从这些SASS文件生成的CSS;
3.安装Fiddler2（网络代理）
4.将其配置为捕获CSS文件请求并将响应替换为本地CSS文件。

因此，正如您所看到的，您可以使用本地CSS文件而不是远程CSS文件。因此，每次构建SASS时都无需上传CSS。

Answer 5

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

将dirs和文件路径更改为您的...

Answer 6

最简单的解决方案是在本地开发（这是一种最佳实践）。在您的计算机上运行Web服务器（尝试XAMP for Windows），所有更改将立即可见，无需上传。只有在你完成后才能上传。

在本地开发SASS，上传更改

6 个答案: