Удобная среда для HTML верски [sublime, emmet, livereload]

Сегодня хочу покзать вам, как можно настроить пожалуй лучшее решение для верстальщиков, в 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.