#03 Watch задачи и автоматическое обновление

от 2019 - 09 - 09

Чтобы задачи запускались по умолчанию и в определенной последовательности, нужно прописать в gulpfile.jsgulp.series, для одновременного (параллельного) запуска — gulp.parallel.

gulp.task('default', gulp.series(task_one, task_two));
gulp.task('default', gulp.parallel(task_one, task_two));

Для автоматического обновления страницы в браузере нам понадобится плагин BrowserSync. Подробнее о нем можно почитать на оф. сайте.
Через консоль устанавливаем его для данного проекта:

npm install --save-dev browser-sync

Теперь вернемся к ранее написанному коду из предыдущих статей.

var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create(); // Подключаем плагин BrowserSync и создаем для него рабочую среду

function style_css(done) {

  gulp.src('./scss/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass({
    errorLogConsole: true,
    outputStyle: 'compressed'
  }))
  .on('error', console.error.bind(console))
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],
    cascade: false
  }))
  .pipe(rename({suffix: '.min'}))
  .pipe(sourcemaps.write('./'))
  .pipe( gulp.dest('./css/') )
  .pipe(browserSync.stream()); // Записываем в BrowserSync

  done();
}

function sync(done) { // Создаем функцию для плагина BrowserSync
  browserSync.init({ // Вызываем инициализацию плагина
    server: {
      baseDir: "./" // Указываем директорию, которая отслеживается для инициализации в браузере (корневая папка проекта)
    },
    port: 3000 // Указываем порт, по которому будет обращение к серверу
  })
  done();
}

function browserReload(done) { // Дополнительная функция для BrowserSync
  browserSync.reload();
  done();
}

function watchTask() { // Создаем функцию для watch-задачи (параметр для нее указывать не нужно)
  gulp.watch("./scss/**/*", style_css); // Запуск функции style_css при изменении файлов в директории /scss/
  gulp.watch("./**/*.html", browserReload); // Запуск функции browserReload при изменении в проекте файлов *.html,
  gulp.watch("./**/*.php", browserReload); // файлов *.php
  gulp.watch("./**/*.js", browserReload); // и файлов *.js
}

gulp.task('default', gulp.parallel(sync, watchTask)); // Запуск по умолчанию функций sync и watchTask одновременно

Запись «./scss/**/*» указывает, что мы берем все папки в директории /scss/ и все файлы внутри них. Обратите внимание, что в функции style_css мы также обращаемся ко всем папкам внутри /scss/ и всем файлам, имеющих расширение *.scss.

Теперь при вызове в консоли gulp будут запущены функции sync и watchTask. При каждом сохранении в файле *.scss будет производится конвертация в файл *.min.css, и также при сохранении в любых других файлах (*.html, *.php, *.js) браузер будет обновляться автоматически.
Чтобы отменить выполнение watch-задачи, достаточно нажать Ctrl + C в консоли.

Если назвать функцию browserSync, то в консоли выведется ошибка, т.к. недопустимо название, совпадающее с названием плагина.
При запуске выведется информация

Local: http://localhost:3000
External: http://192.168.1.82:3000
————————————-
UI: http://localhost:3001
UI External: http://localhost:3001

Local — это ссылка для запуска на локальном компьютере, External — для запуска на удаленном компьютере.
UI и UI External — вход в графический интерфейс browserSync на локальном компьютере для настроек.