Не устанавливается browser sync на windows 10

Issue details

Please provide issue details here.

Receiving an error when attempting to install on Windows 10

Please provide necessary steps for reproduction of this issue, or better the
reduced test case (without any external dependencies).

After entering npm install browser-sync the following error occurs

96 error Unexpected end of input at 1:37360
96 error .4.10″:{«name»:»browser-sync-ui»,»version»:»0.4.10″,»dependencies»:{«
96 error ^

According to https://www.browsersync.io/docs Visual Studio should be installed and that the compilation worked fine with Visual Studio 2013 Update 4.

However the current free Visual Studio Version is Visual Studio Community 2017. After installing this I still receive the error.

After installing Visual Studio 2017 I then also tried npm install -g browser-sync —msvs_version=2017 and I still received the same error message.

Please specify which version of Browsersync, node and npm you’re running

• Browsersync [ ]
• Node [ v8.0.0 ]
• Npm [ v5.0.0 ]

Affected platforms

• linux
• [10 ] windows
• OS X
• freebsd
• solaris
• other (please specify which)

Browsersync use-case

• API
• Gulp
• Grunt
• CLI

If CLI, please paste the entire command below

{cli command here}

for all other use-cases, (gulp, grunt etc), please show us exactly how you’re using Browsersync

{Browsersync init code here}

Вдохновившись
этой серией статей, меня посетила идея приобщить всех знакомых дизайнеров/верстальщиков/разработчиков к великому к консоли. И начать я решил с самого вкусного — с синхронизации браузеров. На самом деле, утилит, каким-то образом помогающих работать веб-девелоперам, много и рассказать про каждую просто невозможно, но ведь главное в этом деле заинтересовать;)

Вспомните, как обычно происходит верстка макета? Вносим изменения в css. Сохраняем. Переключаемся на Chrome. Обновляем страницу. Тестируем. Переключаемся на Firefox. Обновляем страницу. Тестируем. Переключаемся на IE. Обновляем страницу. Тестируем. Повторяем сначала.

Каждый может делать это по-разному, но суть останется прежней: тестирование в разных браузерах очень долгий и муторный процесс. Но мы с вами сейчас попробуем его немного оптимизировать. И в этом нам поможет утилита
browser-sync. Как можно прочитать на их сайте, программа умеет не только отслеживать изменения в файлах проекта и автоматически перезагружать вкладки, но и позволяет синхронизировать навигацию в каждом браузере. Вот так это работает:

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

Установка browser sync

Надеюсь я успел вас достаточно заинтересовать, потому что почти все, что мы будем делать ниже, может испугать:) Нужная нам утилита является модулем для
Node.js. Для её установки нам потребуется пакетный менеджер
npm, поставляемый с нодой. Кто знает что это такое, может сразу перейти на сайт http://www.browsersync.io/ и следуя простым инструкциям (нет, действительно, всего три шага) установить и настроить. Для тех кто никогда не слышал ни о npm, ни о Node.js, быстро пробежимся по установке.

Для начала идем на сайт Node.js, скачиваем и устанавливаем. Тут ничего сложного: далее, далее, далее, готово. Откройте консоль (я пользуюсь встроенный в PhpStorm) и выполните команду:

npm install -g browser-sync

Это команда установит browser-sync. Если в консоли появилось «‘npm’ не является внутренней или внешней командой…», просто перезагрузите компьютер и попробуйте снова.

Если все прошло удачно, поздравляю, все установлено и готово к работе. Ничего ведь сложного?

Настройка browser sync

Теперь откроем в консоли папку проекта (Shift + правый клик на папке, дальше — Открыть окно команд) и запустим browser-sync. Тут есть два варианта: если вы верстаете статичные файлы (*.html, *.css и др.) и если вы делаете динамику (*.php, например). В первом случае, для запуска утилиты в серверном режиме, выполните команду:

browser-sync start --server --files "*.css, *.html"

В консоли вы увидите url адреса для синхронизации, а также в вашем браузере по умолчанию откроется вкладка с индексовой страницей проекта:

Помните, я говорил, что можно синхронизировать навигацию всех браузеров? Настраивается это здесь: переход по ссылкам, отправка форм, скроллинг.

Теперь, если вы используете локальный сервер, и вам нужно синхронизировать браузеры при изменении php (или других) файлов, необходимо использовать режим proxy:

browser-sync start --proxy "myproject.dev" --files "*.css, *.html, *.php, *.js"

Browser-sync имеет множество настроек, описывать их я не буду, просто дам ссылку:
http://www.browsersync.io/docs/command-line/. Там же можно посмотреть и примеры использования.

Для выхода из программы, в окне консоли нажмите Ctrl+C, и введите y в ответ на подтверждение выхода.

Друзья! Хочу поделиться очень полезной штукой для верстальщиков — browser-sync. Она позволяет синхронизировать работу окон браузера.

Обычный процесс верстки проходит так — открываем Sublime Text 3, вносим изменения, сохраняем, открываем браузер, обновляем страницу и смотрим результат. И так во всех браузерах. Это довольно долгий процесс. Но есть способ упросить этот процесс. Для этого существует browser-sync. С его помощью вы можете открыть Sublime Text 3, внести изменения, сохранить и смотреть результат сразу во всех браузерах без обновления страниц. Это очень удобно. Рекомендую всем.

Чтобы его установить, для начала нужно установить Node.js, далее в консоли выполнить следующую команду npm install -g browser-sync. Готово! Browser-sync установлен. Теперь займемся его настройкой.

Откроем в консоли папку с проектом. В консоли вводим browser-sync start --server --files "*.css, *.html". Если есть еще какие-то файлы с другими расширениями, то дописываем их в данную строчку.

Далее в браузере откроется страница проекта. Чтобы открыть в других браузерах данную страницу, достаточно скопировать url из адресной строки.
Более подробно о работе browser-sync вы можете узнать на странице https://www.browsersync.io/.

2 ответа