Gulp. Не работают внешние ссылки в BrowserSync

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.

Данное решение подсказал комментатор здесь, за что ему огромное спасибо!

Искренне надеюсь, что статья была вам полезна. Удачи!