Live Server

Используемые решения:

1. browser-sync

Установим Live Server, который позволит нам использовать возможности локального сервера и автоматически обновлять страницы при изменениях в файлах.

Давайте установим browser-sync командой:

npm i browser-sync --save-dev

Для начала определим константы в gulpfile.js, необходимо указать create() для создания нового подключения:

gulpfile.js// определяем константы Gulp
const { src, dest, parallel, series, watch } = require('gulp');
// подключаем Browsersync
const browserSync = require('browser-sync').create();

Напишем функцию, которая определит логику работы browser-sync:

gulpfile.js// определяем логику работы Browsersync
function browsersync() {
  // инициализация Browsersync
  browserSync.init({ 
    // указываем папку сервера
    server: { baseDir: 'app/' }, 
    // отключаем уведомления
    notify: false, 
    // отвечает за режим работы: true (подключение к интернет) или false (без подключения интернет)
    online: true 
  })
}

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

gulpfile.js// экспортируем функцию browsersync() как таск browsersync, значение после знака = это имеющаяся функция
exports.browsersync = browsersync;

Запускаем таск командой:

gulp browsersync

Запуск в автоматическом режиме

Давайте сделаем так, чтобы при сохранении index.html, происходило автоматическое обновление страницы в браузере. Для этого создадим новую функцию startwatch(), которая запустит наблюдение за изменениями файлов. Данную функию позже мы добавим в дефолтный экспорт для запуска вотчинга при старте:

gulpfile.js// автозапуск
function startwatch() {
  // мониторим все файлы html в проекте и вызываем функцию browsersync(), если есть изменения
  watch(["app/**/*.html"], browsersync);
}

Для того, чтобы наша функция startwatch() заработала и начала выполнять полезную работу, ее необходимо добавить в дефолтный экспорт:

gulpfile.js// экспортируем дефолтный таск с нужным набором функций
exports.default = parallel(startwatch);

Полный gulpfile.js

gulpfile.js// определяем константы Gulp
const { src, dest, parallel, series, watch } = require("gulp");
// подключаем Browsersync
const browserSync = require("browser-sync").create();
// автозапуск
function startwatch() {
  // мониторим все файлы html в проекте и вызываем функцию browsersync(), если есть изменения
  watch(["app/**/*.html"], browsersync);
}
// определяем логику работы Browsersync
function browsersync() {
  // инициализация Browsersync
  browserSync.init({
    // указываем папку сервера
    server: { baseDir: "app/" },
    // отключаем уведомления
    notify: false,
    // отвечает за режим работы: true (подключение к интернет) или false (без подключения интернет)
    online: true,
  });
}
// экспортируем функцию browsersync() как таск browsersync, значение после знака = это имеющаяся функция
exports.browsersync = browsersync;
// экспортируем дефолтный таск с нужным набором функций
exports.default = parallel(startwatch);

Запускаем таск командой:

gulp