Gulp. Не работают внешние ссылки в BrowserSynс.
Данная проблема актуальна уже достаточно долго и часто встречается у пользователей. Скорее всего причина кроется в настройках сети, брандмауэре, в занятых портах и т.п. Виновников неполадки может быть достаточно много и не всегда получается их выявить.
Большинство решений, которые я нашел, мне не помогли и ссылки на внешних устройствах так и не заработали. Однако, недавно я натолкнулся на способ, который, наконец, избавил от проблемы. Надеюсь он будет полезен и вам.
Модуль dev-ip
С помощью менеджера пакетов установим модуль dev-ip:
Yarn:
yarn add dev-ip
Npm:
npm install dev-ip
Подключим его в свой gulpfile.js:
const devip = require('dev-ip');
И напишем таск для BrowserSync. Вот, что должно получится в итоге:
const browserSync = require('browser-sync');
const devip = require('dev-ip');
// BrowserSync
function browsersync() {
browserSync.init({
server: { baseDir: '*директория проекта*' },
notify: false,
host: devip()
});
};
Теперь при запуске проекта вы будете получать список с внешними адресами. Попробуйте перейти по одной из них с другого устройства, находящегося в вашей сети: если не получилось, перейдите по следующей ссылке. У меня заработала 3-я.
Обратите внимание, что к ссылке нужно добавить порт.
Например: 192.168.56.1:3000
Вы можете настроить выводимые ссылки, опираясь на документацию модуля dev-ip.
Данное решение подсказал комментатор здесь, за что ему огромное спасибо!
Искренне надеюсь, что статья была вам полезна. Удачи!