Разработка Sass локально, загрузка при изменении

Я интерфейсный разработчик, переходящий от CSS к SASS. У меня есть Рубин и компас, установленные на моей локальной машине, и компас "часы" работает красиво.

тем не менее, я все равно заканчиваю с локальными CSS-файлами, которые я должен вручную FTP на сервер после каждого крошечного изменения, чтобы увидеть, что изменилось. Я хотел бы автоматизировать это.

Я нашел этой теме который предложил использовать rsync, но я использую Windows, и я чувствую настройку rsync будет очень трудно.

есть ли способ автоматизировать это с помощью Ruby? Рабочий процесс, который я пытаюсь получить:

  1. Я сохраняю файл SCSS в VIM.
  2. компас часы обнаруживает изменения и компилирует новый файл CSS
  3. какой-то волшебный инструмент обнаруживает изменение в файле CSS, загружает на мой сервер
  4. я переключаюсь на Chrome, нажимаю F5 и вижу изменение

Я могу делать все, кроме шага 3. Любой идеи? (Это не связано с Linux или Mac-только программное обеспечение?)

6 ответов


Так как вопрос был задан в 2011 году компас эволюционировал и теперь предоставляет функции сделать именно то, что было задано в вопросе:

для шага 3 Вы можете использовать on_stylesheet_saved и on_sourcemap_saved функции обратного вызова для загрузки *.css и *.стиль CSS.сопоставьте файлы с производственным сервером.

пример кода, как это сделать, можно найти в этой StackOverflow ответ


Я не согласен с Роем и Адамом, при работе с темами Wordpress я разрабатываю на удаленном dev-сервере. У меня есть команда людей, добавляющих контент и другие изменения, которые обновляют базу данных, мне как разработчику было бы сложно работать локально 100% времени. Их файл sql, обновляемый контентом, не будет очень хорошо сочетаться с моим файлом sql (вы знаете настройки параметров темы, а что нет).

я избегал использования SASS по этой причине, пока сейчас.

мой оптимальный рабочий процесс будет редактировать мой файл scss - > автоматическая компиляция в css - > автоматическая загрузка в поиск (например, загрузка при сохранении) -> livereload происходит, и я вижу изменения (я могу жить без этого последнего шага).

Я еще не пытался это сделать, но я нашел эту ссылку, которая кажется самым близким ответом до сих пор.использование SASS с удаленной настройкой

боковое Примечание: локальная работа не всегда является оптимальной настройкой. Это не ответ и это примерно в 8-й раз я видел этот вопрос с аналогичными ответами.

обновление: просто попробовал без Codekit просто sass --watch, и это сработало отлично!

ЕЩЕ ОДНО ОБНОВЛЕНИЕ: я дополнительно изменил способ обработки sass и удаленной разработки. Я знаю использовать Sublime, откройте Мой .scss and .css файл в то же время. Затем я использую SFTP (пакет для sublime) для "мониторинга файла", который будет искать изменения в файле вне его прямого редактирования, Затем я открываю терминал и sass мой файл scss, теперь каждый раз, когда я сохраняю его, он соответствует локально, а затем скомпилированный файл css автоматически загружается на мой сервер! Надеюсь, это имеет смысл, может быть, я сделаю видео-шоу.


Я нахожусь в аналогичном положении, развивающемся в sass (scss) и предварительном просмотре на удаленном сайте dev. При разработке в Windows я использую Sublime Text 2 Для редактирования с помощью плагина FTP-Sync для автоматической загрузки при сохранении.

этот плагин имеет удобную опцию, чтобы пометить папки, наблюдаемые для сохранения файлов, которые вызывают его, чтобы проверить другой путь для дальнейших изменений файла для загрузки. Таким образом, вы можете пометить папку scss, внести изменения в файл scss и сохранить, который предупреждает ST2 о просмотре css папка (вы можете создать в задержке, чтобы дать достаточно времени для компиляции) и загружать любые измененные файлы.

после настройки программного обеспечения и настройки FTP Sync для данного проекта ваши действия составляют 1) редактировать и сохранять, 2) подождите пару секунд, 3) обновить браузер для просмотра изменений. (Если сайт выглядит сломанным в этот момент, вам может потребоваться увеличить настройку задержки на секунду и сохранить файл снова, чтобы запустить процесс в другой раз.)

Я не уверен, как выполнить это на других платформах для удаленного сайта, хотя мне интересно, есть ли у Coda 2 некоторые параметры, которые могут работать для пользователей Mac OS.


по моему опыту, лучший способ-это работать таким образом:

1. у вас есть сайт где-то - и это действительно не имеет значения, где и насколько сложный этот сайт;
2. у вас есть локальные файлы SASS и CSS, созданные из этих файлов SASS;
3. установить Fiddler2 (веб-прокси)
4. настройте его, чтобы поймать запрос на файл CSS и заменить ответ на локальный файл CSS.

Итак,как вы можете видеть, вы можете использовать локальный файл CSS вместо удаленного. Так нет необходимости загружать CSS каждый раз, когда вы создаете SASS.


автоматически загружать CSS после компиляции Sass.

  1. установить: gem install net-ssh gem install net-sftp

  2. добавить в 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 и пути к файлам на ваш...


самым простым решением было бы разработать локально (как это рекомендуется). Запустите веб-сервер на своем компьютере (попробуйте XAMP для Windows), и все изменения будут мгновенно видны без необходимости загрузки. Загружайте, только когда закончите.