В прошлом выпуске мы познакомились с некоторыми интересными инструментами и библиотеками: PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin и CSSComb. Все они были разработаны и выпущены активными членами веб-дизайн сообщества в качестве проектов с открытым исходным кодом. Сегодня мы представляем LiveStyle плагин нового поколения для двунаправленного (редактор ↔ браузер) редактирования CSS! – Ред.

В наши дни инструментальные средства для редактирования CSS не являются чем-то новым. Возможно, вы уже знакомы с программами типа LiveReload, CodeKit и Brackets. Так почему бы не создать еще один инструмент и не дать ему громкое название «CSS редактор нового поколения»?

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

Для того чтобы лучше понять, как работает LiveStyle, давайте сначала посмотрим на текущее состояние инструментов редактирования.

Состояние инструментов редактирования.

Большинство инструментов для редактирования работает по довольно простой схеме: они отыскивают CSS-файлы, помещают их в специальную папку и обновляют веб-браузер после каждого изменения. Поэтому пользователям приходится редактировать CSS-файл, сохранять его и только потом они смогут просмотреть изменения. Не совсем «живое» обновление, но и от этой простоты есть своя польза. Вы можете использовать эти средства вместе с препроцессорами для того, чтобы ваша веб-страница автоматически обновлялась каждый раз, когда вы сохраняете LESS или SASS файл.

Около года назад в продаже появился новый тип инструментов моментального редактирования. Такие редакторы, как Brackets и WebStorm были интегрированы непосредственно в веб-браузеры (точнее, в Google Chrome). У пользователей появилась возможность мгновенно видеть результаты изменений без необходимости сохранения файла. Редактор посылает файл с обновленным содержимым в браузер каждый раз, когда вы совершаете какие-то изменения. Но для того, чтобы использовать возможность моментального редактирования, требуется специальный встроенный веб-сервер. Он будет использоваться для того, чтобы правильно сопоставить ваши локальные файлы с URL-адресами браузера.

Подход с внесением изменений из DevTools обратно в CSS файл не настолько популярен. Существует несколько инструментов, таких как Tin.cr, которые позволяют вам сохранять DevTools изменения обратно в файле (команда Chrome Dev совсем недавно для этой же цели представила Chrome Workspaces).

Давайте подведем итоги. Чтобы использовать все эти инструменты для мгновенного просмотра результатов разработки (переноса обновлений из редактора в браузер и наоборот) вы должны:

• Использовать одни и те же CSS-файлы в текстовом редакторе и веб-браузере.
• Хранить ваши файлы в локальной файловой системе.
• В некоторых случаях использовать специальный инструментарий веб-сервера.

Все эти инструменты просто отлично работают в процессе разработки проекта, но что происходит после завершения работы над веб-сайтом? Что, если вы решите объединить и минимизировать свой CSS-код для улучшения производительности и пользовательского опыта взаимодействия с сайтом (UX)? Большинство из этих инструментов становятся практически бесполезными:

• Вы не можете использовать инструментарий веб-сервера, потому что вы должны использовать ваши собственные инструменты для бэк-энда/CMS.
• Вы не можете получить DevTools изменения обратно в ваш файл с (concatenated и архивированная и уменьшенная версия) CSS внутри браузера, поскольку он не совпадает с исходным кодом.
• В некоторых крупных проектах вы не сможете пользоваться локальной файловой системой – ваши файлы могут находиться в частной песочнице на dev-сервере.

Таким образом, в вашем распоряжении совсем не много вариантов, не так ли? Если вы спросите меня, что в первую очередь необходимо устранить, то я назову две вещи:

1. Все, что находится между браузером и редактором. Редактор должен иметь возможность передавать данные непосредственно в браузер, без использования каких-либо файлов или веб-серверов.
2. Полная замена содержимого CSS. Браузер или редактор должен получать только обновленные фрагменты, а не весь исходный код.

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

Как работ LiveStyle.

Представьте, что вы редактируете CSS файл, а я задаю вам вопрос: «Что вы только что изменили?»

Ваш ответ может быть следующим: «Во второй строке я заменил цифру 12 на 16 со словом red». Но я уверен, что в конечном итоге ваш ответ будет следующим: «В селекторе body я изменил значение background на red». Другими словами, вместо того, чтобы описать, какие изменения были сделаны в текстовом файле, вы опишите, как была изменена структура CSS-файла.

Но дело вовсе не в то, что вы передаете информацию другому разработчику, т.е. «в body изменить значение background на red». Он может выполнять те же изменения в своем CSS файле и получить тот же результат!

Именно по этому принципу и работает LiveStyle. При обновлении CSS источника он выполняет структурное сравнение с предыдущим состоянием и создает специальный патч, который описывает все изменения в CSS структуре. Затем этот патч передается всем клиентам и применяется к соответствующему CSS источнику.

Такой подход дает вам следующие преимущества:

• Вы можете связать между собой два совершенно разных CSS источника для редактирования. Например, вы можете взять минимизированный и объединенный CSS источник в браузере, связать его с CSS модулями в редакторе и использовать для полностью двунаправленного редактирования.
• Вам не нужно хранить файлы в локальной файловой системе. Вы можете просто открыть нужный вам файл непосредственно с помощью FTP протокола, виртуальной сети и тому подобного. Если файл можно открыть с помощью обычного текстового редактора, то вы можете использовать и этот способ редактирования.
• Вы даже можете создавать новые, безымянные файлы и использовать их для редактирования!
• Вам не нужен специальный веб-сервер, фрагмент кода или просмотрщик файлов, все работает в редакторе и браузере.

Далее представлено демо видео, которое демонстрирует работу этого подхода в реальной жизни:

http://www.youtube.com/watch?v=iQLhGbkupS4&feature=player_embedded

В видео выше, чтобы продемонстрировать возможности LiveStyle я использовал главную страницу Facebook. Нет сомнений, что это один из самых крупных и сложных веб-сайтов на планете, и я не имею доступа ни к серверу Facebook, ни к его CSS источнику. Но мне нужно всего несколько кликов, чтобы начать редактирование CSS. Представьте себе, насколько просто сделать то же самое для вашего собственного сайта!

Установка.

В настоящее время LiveStyle успешно работы в Google Chrome, WebKit Nightly (для редактирования iOS приложений) и Sublime Text. Процесс установки довольно прост:

1. Установите плагин «LiveStyle» из Package Control (пакета управления) в Sublime Text.
2. Установите расширение для Google Chrome.

WebKit расширение может быть установлено непосредственно из Sublime Text, просто выберите пункт меню Tools → Install LiveStyle for WebKit extension (Инструменты → Установить LiveStyle для WebKit расширения) или задайте команду LiveStyle: Install WebKit extension из Command Palette.

Вот и все что нужно сделать! Теперь вы можете использовать LiveStyle для выполнения настройки вашего веб-сайта. Если при установке LiveStyle у вас возникли какие-то проблемы или вам нужна дополнительная помощь, пожалуйста, воспользуйтесь официальным руководством по установке.

Использование LiveStyle.

Для того чтобы начать редактирование CSS, просто выполните следующие четыре шага:

1. Запустите Sublime Text, откройте CSS-файл или создайте новый.
2. Запустите браузер Chrome и перейдите на страницу, которую вы хотите редактировать.
3. Откройте DevTools, перейдите к LiveStyle панели и проверьте, что LiveStyle включен для текущей страницы.
4. Когда LiveStyle будет активирован, вы увидите список внешних таблиц стилей слева и список файлов редактора справа. Просто выберите файл редактора, который должен быть связан с браузером и на этом все!

Заметьте, что список файлов редактора автоматически обновляется каждый раз при создании, открытии или закрытии файлов в редакторе.

Важно знать: DevTools должен быть открыт в течение всего сеанса редактирования, и для каждого окна (в режиме мультипросмотра). Вы не должны все время быть на LiveStyle панели, но DevTools обязательно должен оставаться открытым, в противном случае входящие обновления не будут применены.

Новые рабочие процессы.

Концепция создания CSS патча от LiveStyles представляет собой количество рабочих потоков, которые можно использовать в процессе разработки:

Простой режим.

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

Если ваш файл достаточно большой, то процесс обновления может затянуться на некоторое время, необходимое для принятия изменений. Если вы хотите ускорить процесс или на вашей странице отсутствуют внешние таблицы стилей, то вы можете создать новую таблицу стилей, нажав кнопку Add file (Добавить файл) и использовать ее для обновления в режиме реального времени.

Режим мультипросмотра.

Режим мультипросмотра идеально подходит для точной настройки адаптивных веб-проектов. У вас есть возможность одновременно открыть несколько окон с одной и той же страницей и экспериментировать с ее размером для поиска подходящих точек прерывания. DevTools должен быть открыт для каждого окна, в противном случае не будут применяться каки …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров