Сегодня хочу покзать вам, как можно настроить пожалуй лучшее решение для верстальщиков, в Ubuntu. Точнее не решение — а в какой то степени комплекс ПО состоящий из редактора Sublime, дополнения к нему - emmet, позволяющее многократно ускорить ввод html тегов, расширения для браузера и программы которые будут обновлять страницу автоматически при каждом сохранении файла css или html - LiveReload.
Для начала установим редактор sublime:
wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add - sudo apt-get install apt-transport-https echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list sudo apt update sudo apt install sublime-text
Запускаем sublime:
subl
Идем в tools — install package control
После чего — tools — command pallette…
Тут набираем или находим package control: install package
в новом открышемся окне находим emmet и жмем по нему.
Ждем пока скачается дополнение и перезапускаем sublime.
Для проверки работоспособности emmet создаем файл с рашриение html набираем ! И жмем клавишу tab. Должен будет подставится шаблон.
Теперь займемся установкой LiveReload, что бы сохраненные изменения в наших файлах отображались автоматически, без каких либо действий в браузере. Покажу на примере браузера Chrome.
Устанавливаем расширение LiveReload и идем в менеджер расширений. Находим установленное расширение и ставим галочку Разрешить открывать локальные файлы.
Перезапускаем браузер.
После чего нам нужно установить guard-livereload:
sudo apt install ruby-dev sudo gem install rdoc -V sudo gem install guard -V sudo gem install guard-livereload -V
Идем в папку, где распологается наш проект и выполняем команду:
guard init
В текущей папке будет создан файл с именемм Guardfile, отредактируем в нем строчку:
watch(%r{public/.+\.(#{compiled_exts * '|'})})
Уберем из нее public/
В итоге сточка должна быть такая:
watch(%r{.+\.(#{compiled_exts * '|'})})
Весь файл Guardfile:
guard 'livereload' do
extensions = {
css: :css,
scss: :css,
sass: :css,
js: :js,
coffee: :js,
html: :html,
png: :png,
gif: :gif,
jpg: :jpg,
jpeg: :jpeg,
# less: :less, # uncomment if you want LESS stylesheets done in browser
}
rails_view_exts = %w(erb haml slim)
# file types LiveReload may optimize refresh for
compiled_exts = extensions.values.uniq
watch(%r{.+\.(#{compiled_exts * '|'})})
extensions.each do |ext, type|
watch(%r{
(?:app|vendor)
(?:/assets/\w+/(?<path>[^.]+) # path+base without extension
(?<ext>\.#{ext})) # matching extension (must be first encountered)
(?:\.\w+|$) # other extensions
}x) do |m|
path = m[1]
"/assets/#{path}.#{type}"
end
end
# file needing a full reload of the page anyway
watch(%r{app/views/.+\.(#{rails_view_exts * '|'})$})
watch(%r{app/helpers/.+\.rb})
watch(%r{config/locales/.+\.yml})
end
Теперь запускаем «мониторинг»:
guard
Осталось только нажать на кнопку LiveReload в браузере на открытой вкладке с редактируемой страницей.
В консоли будет выведена инофрмация, что браузер подключен.
Теперь при каждом сохранении файлов в папке, страница будет обновляться автоматически.
И последняя в этой заметке возможность, о которой хочу рассказать, которая так же заметно упрощает жизнь — возможность автосохрания в sublime.
Для включения этой возможности идем в tools-command pallete, вводим install, выбираем package control: install package.
В новом окне набираем Auto Save и устанавливаем одноименное расширенние.
После его установки идем в prefferences — key bindings, и в окне user добавляем строчку:
{ "keys": ["ctrl+shift+s"], "command": "auto_save" }
Соответсвенно ctrl+shift+s можно заменить на любую другую комбинацию клавиш. Она используется для включения автосохранения, которое по умолчанию выключено.
Теперь осталось перейти во вкладку с файлом, который нужно сохранять автоматически и нажать введенную выше комбинацию клавиш и при каждом вводе файл будет сохраняться автоматически, и изменения, соответсвенно будут автоматически отображаться в браузере.
Для ОС Windows - все вышесказанное будет отличаться незначительно, только установкой sublime и клиенсткой программы LiveReload. Соответсвенно sublime можно скачать тут , а LiveReload - тут , в секции Downloads.
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Поделитесь статьей с друзьями в соц. сетях, возможно, она будет им полезна.
Если вам помогла статья, вы можете >>отблагодарить автора<<