Автоматическое обновление в Sublime Text 3 + BS работает только при сохранении документа, как сделать так чтобы стало как в Live Preview «на лету»?

Question

[Johny Smith]

Хочется сделать что-бы Browser Sync срабатывал не только при сохранении страницы, а при каждом изменении документа как это реализовано в Brackets Live Preview. Может кто сталкивался?

Answer 1

[Евгений Вольф]

Browser Sync работает только при сохранении документа, как сделать чтобы стало как в LiveReload обновление «на лету»?

Вы не совсем корректно ставите вопрос. BrowserSync работает не при "сохранении" документа, а при его физическом изменении, на диске, с которого (диска) он этот документ и читает. Соответственно, что бы BrowserSync отображал изменение после "любого нажатия клавиши", нужно, что бы каждое изменение вызывало сохранение документа. Как это сделать и возможно ли это сделать вообще, в каждом конкретном случае - зависит от редактора, которым Вы пользуетесь, думаю, что ответ на этот вопрос (как автоматически сохранять каждое изменение в редакторе) Вы с лёгкостью найдёте в его документации или в виде какого-то плагина для оного (если конечно, Ваш редактор их поддерживает).

P.S. Не понимаю, какую проблему составляет нажатие CTRL+S и зачем Вам смотреть на документ в неконсистентном состоянии, но... не буду спрашивать :)

P.P.S.

как это реализовано в Brackets LiveReload

Подозреваю, что "LiveReload" про который в данном случае идёт речь - является частью самого Brackets'а, что позволяет ему считывать текущее содержимое файла, а так же отслеживать события "документ был изменен" минуя жесткий диск.

Comments

[Johny Smith]

P.S. Не понимаю, какую проблему составляет нажатие CTRL+S и зачем Вам смотреть на документ в неконсистентном состоянии, но... не буду спрашивать :)

при вёрстке используется, вместо того чтобы эксперементировать на лету с стилями через inspector F12

[Сергей delphinpro]

Olek1: BS инжектит стили без перезагрузки страницы. Вбить несколько правил и жмякнуть ctrl+s не сильно напряжно.
А если вам нужно отслеживать изменения каждого пикселя, то вы определенно что-то делаете не так =)

[Johny Smith]

Сергей: когда я изменяю к примеру обычный html документ то тоже отображение в браузере не происходит на лету, и приходится каждый раз нажимать ctrl+s чтобы увидеть результат, это крайне неудобно.

P.S. после нажатия ctrl+s в браузере сверху отображается всплывающее окошко и пишется что BS Connected и исчезает, разве BS не умеет быть всегда "connected"? Какой тогда в этом смысл, что-бы каждый раз нажимать "сохранить документ" для того чтобы увидеть результат, но ведь по умолчанию так и происходит без BS, за исключением того что не приходится в браузере каждый раз обновлять страницу.

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

[Сергей delphinpro]

после нажатия ctrl+s в браузере сверху отображается всплывающее окошко и пишется что BS Connected и исчезает, разве BS не умеет быть всегда "connected"?

Немного странный вопрос )
Когда BS в состоянии инжектить изменения без перезагрузки всей страницы, то он это делает. Если это невозможно, он перезагружает страницу. Естественно, при перезагрузке страницы клиентская часть заново коннектится к серверной, отсюда и сообщение.

[Johny Smith]

Сергей: Browser Sync у меня не делает без сохранения документа встраивание элементов на страницу, в этом и заключается вопрос. Если у вас есть редактор кода Adobe Brackets то нажмите там на значок молнии справа в верхнем углу, откроется Кром, в котором все изменения будут происходить динамически, без каких либо Ctrl+S. Хочется так-же через Sublime Text 3:

[Сергей delphinpro]

Olek1: Да на этот вопрос вам уже ответили =)

[Евгений Вольф]

при вёрстке используется, вместо того чтобы эксперементировать на лету с стилями через inspector F12

Эту проблему решает Netbeans + Google Chrome + Nebeans Connector, он позволяет сохранять изменения стилей сделанные в хроме - обратно в CSS (без всяких Ctrl+S). Но, когда я последний раз им пользовался, он нормально поддерживал только "чистый CSS", без препроцессоров/конверторов (аки SASS, LESS, Stylus и т.д.).

когда я изменяю к примеру обычный html документ то тоже отображение в браузере не происходит на лету, и приходится каждый раз нажимать ctrl+s чтобы увидеть результат, это крайне неудобно.

В этом с Вами многие не согласятся, хотя бы по тому, смотреть на постоянно дёргающийся экран с "поехавшими" тегами и разметкой - не многим удобнее. Плюс - обновление страницы в браузере, относительно затратная операция, к тому же если она будет обновляться после каждой измененной буквы или добавленного пробела.

Что бы такая система, как Вы хотите работала нужно выполнить одно из условий:
1. Передавать в браузер измененный код минуя жесткий диск, как это делает NetBeans + NetBeans Connector для хрома. В этом случае, Вам придётся найти подобную связку для нужного браузера и Вашего редактора/IDE, есть довольно большая вероятность, что на данный момент её может не существовать вообще.
2. Автоматически сохранять любое изменение в файле, тогда BrowserSync будет его автоматически отслеживать и подтягивать (обновлять страницу в браузере). На мой взгляд, такой режим работы будет выглядеть крайне плохо, по следующим причинам:
а) Каждое изменение, в т.ч. не закрытый тег, недописанный CSS и т.д. будут вызывать обновление страницы, и отображение недописанного кода, который в свою очередь может привести к самым разным артефактам
б) Придётся постоянно отвлекаться на "мигающий" код
в) Это создаёт дополнительные накладные расходы
г) и т.д.

Но, если Вы всё же хотите добиться подобного функционала, как я уже говорил выше, Вам нужно либо:
1. Найти соотв. связку IDE/Редактор + плагин для браузера и отказаться от BrowserSync, т.к. лично мне не удалось найти в его документации функции загрузки кода за пределами отслеживаемых файлов (возможно, я плохо искал)
2. Найти плагин для Вашего редактора/IDE который будет делать автоматическое сохранения файла при каждом изменении оного. Думаю, это самый простой вариант.

[Johny Smith]

б) Придётся постоянно отвлекаться на "мигающий" код

Это обычный фронтэнд, и это нисколько не мешает. Когда только печатаешь код, то в этот момент на браузер особо внимание на обращаешь "что оно там мерцает", смотришь тогда - когда уже поставил точку с запятой

в) Это создаёт дополнительные накладные расходы

Да, завышенные билы за электроэнергию. А если серьёзно то компьютер автоматизирован и не надо ничего нажимать при написании кода, для этого его и изобретали, чтобы повторяющиеся операции не производить по многу раз одни и теже ¯\_(ツ)_/¯

[Евгений Вольф]

Olek1: Вы конечно по своему правы, безусловно. Но, само написание кода предполагает другой процесс - "что-то нажимать". В т.ч. нажимать "Enter" для перевода строки (как пример). Это я касательно:

и не надо ничего нажимать при написании кода

На самом деле, на "Ctrl+S" завязано довольно много разных операций (в зависимости от контекста работы), в т.ч. синхронизация файлов с удаленным сервером, виртуальной машиной, обновление в браузере, всякие там анализаторы кода и так далее, в т.ч. именно по этому, практически ни одна подобная операция не происходит "до Ctrl+S". Я понимаю, что этот факт Вашу проблему не решает, но, плагин для Вашего любимого редактора или IDE, который по КД будет нажимать за Вас Ctrl+S, каждые пол секунды или какую-то внешнюю программу, которая будет нон-стоп посылать сочетание Ctrl+S для выбранного вами окна (программы) - думаю, найти будет не сложно. Правда, в этом случае, Вы потеряете возможность нормально "откатываться" (Ctrl+Z), т.к. фиксироваться будет каждое изменение.

С другой стороны, если Вы всё же этого хотите, вот например, плагин для Atom'а, который как раз делает автосохранение.

Так же, возможно стоит поискать какие-то плагины для Brackets'а, которые восполнят другой недостающий в нем функционал, если Вам принципиально нравится его LiveReload и он имеет ключевое знание.

Или попробуйте описанную мной выше связку NetBeans + Connector, она как минимум решала проблему обратного (автоматического) сохранения изменения стилей, сделанных в Chome'е, без всяких Ctrl+S'ов, копирований и т.д.

[Johny Smith]

Евгений Вольф: началось всё с того что я увидел где-то в интернете промо ролик, на котором отображалось как можно делая проект сразу видеть его на нескольких устройствах, компьютер, ноутбук, смартфон, планшет etc.

"Мой" Brackets такое не умеет, разве что на соседнем мониторе отображать предпросмотр

[Евгений Вольф]

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

Очень похоже на моё рабочее место, только вместо ноутбука у меня стоит монитор с ноутбучным разрешением/размером, а планшет и телефон - я обычно подключаю в работу в самом конце, когда на столе 3-4 монитора, лишние устройства сильно мешают, гораздо проще оттестировать всё на эмуляторе, а на телефоне и планшете провести финальный тест (по крайней мере, для меня). Это я к тому, что я, являюсь одним из представителей тех, кого "Ctrl+S вполне устраивает".

"Мой" Brackets такое не умеет, разве что на соседнем мониторе отображать предпросмотр

Atom умеет делать так, как Вы хотите, пример:

*на картинке пример какого-то примитивного макета, для учебной группы. Обновляется автоматически, без сохранения файла.

Касательно подключения планшета и/или телефона - это в большей степени заслуга далеко не IDE/редактора, а соотв. инструментов, например андроид-устройства, подключаются в т.ч. так.

[Johny Smith]

Евгений Вольф: та нет, URL просто localhost:с портом открываешь и оно там автоматически обновляется на каком устройстве откроешь на таком и будет, ввести ссылку достаточно, ничего мудрить не стоит

На официальном сайте https://www.browsersync.io/ в самом низу пишится, цитата:

Dynamic sites

If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode. Browsersync will wrap your vhost with a proxy URL to view your site.

browser-sync start --proxy "myproject.dev" --files "css/*.css"

Где это вводить?
Какие параметры?
Что означает двойной знак минуса "--" перед значением proxy и files ?

[Евгений Вольф]

Olek1: ну это если устройство в локальную сеть подключено и у него доступ к этому самому серверу есть. Но, и опять таки - такой способ позволяет просто просматривать страницы на устройстве, а пример выше - позволяет ещё и управлять устройством.

[Юнус Газиев]

Olek1: 2017год - фронтендер обязан знать как перестать беспокоиться и полюбить консоль на W... - это к вопросу о двойных знаках минуса

[Евгений Вольф]

Что означает двойной знак минуса "--" перед значением proxy и files ?

Двойной знак минуса, в Linux/Unix программах обычно отделяет параметры самой программы, от списка файлов, которые эта программа должна обработать. Сделанно это с целью того, что бы программа точно понимала, что есть файл(ы), а что есть параметр(ы). Как Вы понимаете, имена файлов и имена параметров могут легко совпадать. Есть так же 2-й вариант, применяемый в данном конкретном случае. В большинстве Unix/Linux программ есть два вида (варианта) передаче параметров программе, "сокращенные параметры", "полные параметры". Сокращенные - проще (быстрее) набирать, они предваряются одним знком "минус". Полные параметры, соотв. двумя знаками минус, за которыми следует полное имя параметра. Примеры можно посмотреть, например здесь.

Выдержка из статьи:

-a, --all — выдавать все файлы в каталогах, включая скрытые файлы, начинающиеся с точки.

-b, --escape, --quoting-style=escape — Заменять неграфические символы в именах файлов, используя алфавитно-цифровые последовательности, а также последовательности вида -Q, за исключением того, что имена файлов не заключаются в двойные кавычки.

Как видите, тут приводятся примеры обоих видов параметров (сокращенных и не сокращенных), в данном случае -a - сокращенный вариант, а --all - полный.

Где это вводить?

В консоли, в папке с проектом (в корне проекта).

Какие параметры?

Какие именно параметры - у Вас указано в Вашем же примере, параметры --proxy и --files