Пользователь
0,0
рейтинг
12 августа 2013 в 04:50

Разработка → Emmet LiveStyle — инструмент для удобной front-end разработки



На днях появился наверное самый удобный инструмент для front-end разработчиков — Emmet LiveStyle. Это плагин для двухстороннего (редактор браузер) редактирования CSS файлов, который может заметно облегчить и ускорить разработку. Восторженные отзывы по всему интернету это подтверждают (комментарии к статье Smashing Magazine и на Хабре).

Главное преимущество Emmet LiveStyle в том, что все изменения вносятся легко и интуитивно, а результат виден «на лету». Это реально ускорят процесс. Рассказывать о плюсах плагина можно долго, но лучше всего работу плагина демонстрирует ролик:



Проект находится в режиме публичной беты. Пока инструмент работает в Google Chrome, Safari и Sublime Text. В будущем планируется поддержка других браузеров.

Возможности


  • Результат виден сразу после внесения изменений — никаких сохранений и обновлений страниц.
  • Не требуется хранить файлы локально, для редактирования их можно открыт напрямую с FTP.
  • Кроссплатформенность.
  • Результат можно просматривать одновременно в нескольких окнах, все изменения будут происходить «на лету». Удобно для тестирования адаптивного дизайна.
  • Можно редактировать одновременно несколько сайтов, например, десктоп и мобильную версию.
  • Легкая установка и работа: достаточно открыть CSS-файл в редакторе и связать его с файлом стилей сайта.

Установка


Ниже описан процесс установки для Google Chrome.

  1. Для Sublime Text 3 установить Package Control.
  2. В Sublime Text открыть Command Palette (Ctrl+Shift+P) и выбрать Package Control: Install Package.
  3. В списке найти и установить расширение LiveStyle.
  4. Установить расширение для Google Chrome.
  5. Открыть в Sublime Text CSS-файлы.
  6. Открыть в браузере страницу для редактирования
  7. Открыть DevTools (Ctrl+Shift+I) и во вкладке LiveStyle связать файлы стилей сайта с открытыми в Sublime Text. Для работы плагина DevTools необходимо держать открытым для каждого окна.


Автор разработки есть на хабре — chikuyonok. Подробности можно почитать на официальном сайте и в статье Smashing Magazine.
@grokru
карма
406,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (40)

  • +9
    Минусы, ограниченность только Sublime Text. Нужно добавить поддержку других редакторов
  • +6
    Специально установил ST, что б попробовать. Спасибо, отлично работает!
    Кстати, Netbeans 7.4 beta из коробки примерно так же умеет
  • 0
    Странно, почему-то не видит открытые Sublime Text 3 файлы.
    • +2
      Ладно-ладно вам, сразу минусовать, подумаешь, не обратил внимание, что открыл вST2, а не в ST3)
      • –2
        Чё уж там, в карму тогда тоже верните)
  • +3
    Куда им о багах писать? Вешает намертво ST3 при вставке или редактировании строки с открытой фигурной скобкой. Три раза повторил и три раза завис не сохраняя, естественно.
  • +4
    Для связки IntelliJ Idea (и подобные) + Firefox есть CSS-X-Fire.
    • 0
      Спасибо за наводку.
      • 0
        также стоить добавить fireless и firesass, если используете соответствующие компиляторы.
        • 0
          Еще раз спасибо. Использую sass.
        • +1
          Кстати, для compass используется firecompass.
    • +1
      Замечу что подерживает работу с less
  • 0
    Portable Sublime Text 2, не видит редактор.
    Пишет «No active editor».
    • 0
      Тоже это заметил. В целом не особо критично, но всеравно неприятно.
  • +3
    Чем это лучше LiveReload? Он работает из любой IDE и не требует расширения для браузера.
    • 0
      Могу предположить, что отсутствие «левого» отладочного кода в теле страницы, который можно «забыть» убрать при выгрузке на продакшн, во-вторых установка и настройка гораздо более очевидная, я вот даже сходу не нашел на двух страницах как настроить livereload — вижу как вставить «виджет», но не вижу как настроить серверную часть.

      Здесь же нет «серверной» части как таковой, а Sublime Text практически де-факто для фронт-енд разработки, единственное хотелось бы в дальнейшем получить версию под firebug, ну и исправить баги, конечно.
    • +5
      Самое большое отличие — LiveReload работает только в одну сторону. Изменения, сделанные в браузере, в редактор не пробрасываются.
  • +1
    Так то все реально здорово, но неужели кто-то до сих пор использует голый CSS для разработки фронтенда? Поддержку LESS/SASS/Stylus бы. Понимаю сложность, но было бы круто.
    • +2
      Пользуюсь, мне удобно, сделал несколько сайтов на less, но сейчас перешел обратно на css. Less удобен для стандартизирования и типизирования больших объемов типового оформления, с этим не поспоришь, Но разовые сайты с уникальным дизайном смысла нет делать на less — скорости не прибавляет, зато прибавляет хлопот в дальнейшем при мелких правках.
      • +1
        Возможно, зависит от подхода. Но комбинирование селекторов, относительные стили и mixins — LESS/Stylus удобен везде, где нужно писать CSS (кроме совершенно простых случаев). Уникальность дизайна тут роли не играет. А мелкие правки — не сложнее, чем при простом CSS (ну разве что чуток — надо настроить компиляцию).
    • +3
      Препроцессоры не дают сколь-либо существенных преимуществ:
      — тот же Emmet позволяет кодить еще быстрее, он же помогает с префиксами (впрочем, сгодятся любые сниппеты).
      — Стилями лучше всего управляться методологией БЭМ — только она спасает на сколь-либо серьёзных проектам, впрочем, преимущества видны уже почти сразу.
      — От переменных толку мало — реально значения меняются очень редко, и в таких случаях их легко заменить поиском и заменой: sed проходится по css'кам очень быстро.

      Зато недостатков полно:
      — код сложнее понять, труднее управлять;
      — усложняется инфраструктура;
      — не сделать соответствие конкретного стиля в браузере конкретному файлу — трудно найти нужный участок. Есть только экспериментальная технология в одном браузере — она никак не спасёт при отладке в IE или на мобильниках.
      • +3
        Существенность — очень относительная и субъективная величина. Но все эти «мелочи» вместе невероятно увеличивают производительность.

        Тот же Emmet позволяет кодить еще быстрее, он же помогает с префиксами (впрочем, сгодятся любые сниппеты).
        Препроцессоры не исключают написание CSS-свойств. Нельзя сравнивать LESS и Emmet — в идеале должны использоваться вместе.

        Стилями лучше всего управляться методологией БЭМ — только она спасает на сколь-либо серьёзных проектам, впрочем, преимущества видны уже почти сразу.
        Не могу пока объективно рассуждать насчет БЭМ, но это немного другой подход, и, несмотря на то, что его концепция пересекается с препроцессорами, опять же можно использовать все сразу.

        От переменных толку мало — реально значения меняются очень редко, и в таких случаях их легко заменить поиском и заменой: sed проходится по css'кам очень быстро.
        При правильной организации — это убойная штука. Особенно для поддержки «цветов темы» и создания относительных цветов (темнее/светлее/прозрачнее/насыщеннее/итд)

        Насчет недостатков согласен (кроме первого), но у всего есть свои недостатки.
        • +1
          Сомневаюсь, что в сколь-либо ближайшей перспективе окупится время на внедрение и ознакомление с препроцессором.

          Часто ли встречаются те же темы? Я без проблем делал (простенькие) темы без всяких препроцессоров. В сложных темах, где нужны свои картинки, эффекты, дополнительная разметка препроцессор вряд ли серьёзно поможет. Тем более, что в CSS уже есть нужны возможности без препроцессоров: простое добавление нужных имён классов. Те же модификаторы в БЭМ.
  • +1
    Отличный инструмент, жаль только, что пока мозилла не поддерживается.
    • +1
      Ещё забыл добавить, что было бы неплохо, чтобы можно было редактировать не только файлы стилей, но и html код открытой страницы (взять хотя бы то, что не редко приходится создавать/редактировать страницы с инлайн стилями, пример: html письма).
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Не нашел запрос в трекер PhpStorm'а, добавил. Голосуем, просим, просим!
    P.S.: в тред призываются neuro159 и philipto
    • 0
      • 0
        Алексей, ну кому как не вам, знать о том что Шторм может и чего не может. И как вы упустили что ваш Live Edit (за который отдельное спасибо, он клёвый) это только половина от того что предлагает LiveStyle я не знаю. Но то, что в Live Edit нет двустороннего обмена изменениями факт, а хотелось бы чтобы оно было. Потому и оформил реквест и зазывал вас сюда — посмотреть, проникнуться и сделать Шторм еще клёвее.
    • 0
      Хочу такую штуку в шторм, только умнее. Чтобы редактировать верстку в хроме, а она сама менялась в php-шаблоне! :)
  • +1
    Кстати, Chrome 29 версии уже почти подобрался к возможностям плагина (см. habrahabr.ru/post/182036/), а в Chrome 30 это уже практически из коробки (см. Live editing).
    Если коротко:

    1. Открыть chrome://flags/#enable-devtools-experiments, включить галку, перезапустить.
    2. Devtools / Settings / Expriments чекнуть галку «FileSystem inspection»
    3. Devtools / Settings / Workspace добавить директорию с ресурсами сайта, и прописать маппинг адреса на сервере и пути относительно выбранной директории ( http://localhost:8080/ -> / или что-то типа этого).

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

    офф: для bem-tools (если вдруг) можно подключать на страницу index.css, вместо _index.css, тогда магия с путями работает правильно.

    где-то тут же есть поддержка Source Map
    • +2
      Проблема подхода в Chrome Workspaces в том, что он становится бесполезным, если работаете с сайтом, где CSS собирается из нескольких файлов, а потом ещё и минифицируется. С LiveStyle таких проблем нет: вы сможете смапить два абсолютно разных файла (например, исходный модуль CSS в редакторе → скомпилированный CSS в браузере) и использовать их для живого редактирования.

      Ну и куча дополнительных плюшек вроде синхронизаций изменений между окнами, быстрое добавление нового файла и т.д.
      • 0
        Думаю проблема подхода еще и от фреймворка зависит. В хроме вопросы со сборкой и минификацией сейчас решаются тупо подключением source map, что дает возможность прямо в «инспекторе» редактировать прямо исходники (sass, например). Кейс с внешним редактором так же работает — хром следит за изменениями в исходниках и обновляет окна когда нужно. Но я вовсе не утверждаю, что этот способ универсален — бывает ведь и такое github.com/LearnBoost/stylus/pull/886 :)
        • +2
          Проблема source maps в том, что они годятся только для просмотра. Как только вы что-нибудь поменяете в сгенерированном CSS или в исходном файле препроцессора — source map становится невалидным и его нужно заново сгенерировать. В итоге для того, чтобы увидеть любое изменение, нужно сначала сохранить файл, дождаться, пока он перегенерируется, потом дождаться, пока Chrome по таймауту подцепит изменения. То есть не совсем «живое» редактирование.

          LiveStyle пытается иначе решить эту проблему: свойства в селекторах напрямую мапятся из CSS в препроцессор и наоборот. Тогда получается действительно живое редактирование, фрагмент показан в демо-видео. Маппинг селекторов, в большинстве случаев, относительно простой, но есть проблемы с маппингом миксинов, переменных и прочего. Поэтому я сейчас исследую, как это можно заставить работать правильно и удобно.
  • 0
    Что-то не ставится в Хром — «Произошла ошибка, повторите попытку»

    Хром последний стабильный Версия 28.0.1500.95 m
    • 0
      заработало
  • 0
    Хочу для NPP. Так и не получилось пересесть за Sublime Text из-за субъективных тормозов.
  • 0
    Как альтенративу можно рассмотреть Guard Livereload: github.com/guard/guard-livereload
    Так же имеется плагин к Sublime Text, но дабы работал с каждым редактором, необходима установка Guard'a.
    Работает с файлами любого формата — css, less, sass, js, html, php… Задействуется при сохранении.
  • 0
    Основной недостаток, по моему, то что настройка слетает при перезагрузке страницы. Правлю HTML, перезагружаю страницу, опять выбираю свой файл стилей, при след. правке HTML то же самое. Неудобно, поэтому пока пользуюсь редко.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.