Как настроить watch в gulp?

Question

[Evgeniy]

Добрый день всем!
Ребята помогите пожалуйста разобраться, в чем может быть проблема?

Не работает ватчер, не видит функцию startHtml ( хотя сама отдельно отрабатывает норм ),пишет ошибку:
[10:38:08] Starting 'watchFiles'...
[10:38:08] 'watchFiles' errored after 3.18 ms
[10:38:08] ReferenceError: startHtml is not defined

npm -v - 6.14.5
node -v - v14.3.0
gulp -v - CLI version: 2.2.1 Local version: 4.0.2

gulpfile.js выглядит так

'use strict';

var gulp = require('gulp'),
    prefixer = require('gulp-autoprefixer'),
    rename = require('gulp-rename'),
    rigger = require('gulp-rigger'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    terser = require('gulp-terser'),
    nodesass = require('node-sass'),
    browserSync = require('browser-sync'),
    imagemin = require('gulp-imagemin'),
    del = require('delete'),
    reload = browserSync.reload,
    watch = require('watch');

const { series, parallel } = require('gulp');
var path = {
    build: { //Тут мы укажем куда складывать готовые после сборки файлы
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/'
    },
    src: { //Пути откуда брать исходники
        html: 'src/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html
        js: 'src/js/main.js',//В стилях и скриптах нам понадобятся только main файлы
        style: 'src/sass/main.sass',
        img: 'src/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
        fonts: 'src/fonts/**/*.*'
    },
    watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        style: 'src/sass/**/*.sass',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    clean: './build'
};

// Собираем html
exports.startHtml = function (cb) {
    return gulp.src('src/*.html')
      .pipe(rigger()) //Прогоним через rigger
      .pipe(gulp.dest(path.build.html)) //Выплюнем их в папку build
      .pipe(reload({stream: true})); //И перезагрузим наш сервер для обновлений
       cb();
};

// Изменение файлов
exports.watchFiles = function () {
  watch('./src/**/*.html', startHtml);
  cb();
}

package.json выглядит так:

{
  "name": "gulp-frontend",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "aithor",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "delete": "^1.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-cli": "^2.2.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-rename": "^2.0.0",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-terser": "^1.2.0",
    "gulp-uglify": "^3.0.2",
    "node-sass": "^4.14.1",
    "watch": "^1.0.2"
  }
}

Answer 1

[Владислав Бойченко]

Сказать, что очень странная сборка -- ничего не сказать.
1. Подключайте browser-sync правильно:

const browserSync = require('browser-sync').create();

2. Если вы используете деструктуризацию, используйте ее правильно, для чего дублирование?

const { series, parallel, gulp } = require('gulp');

3. Если вы ипользуете строгий режим, зачем вы смешиваете const и var? Используйте только const (и при надобности let).
4. Если вы используете Gulp 4, можно отказаться от ключевых слов "gulp" и "task". Добавьте в деструктуризацию еще "src" и "dest", чтобы получилось так:

const { series, parallel, src, dest, gulp } = require('gulp');

После чего пишите таски стрелочными функциями и пользуйтесь всеми прелестями gulp 4, например:

const styles = () => {
  return src('path.src.style')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(dest(path.build.css))
    .pipe(browserSync.stream())
};

5. Вотчеры и exports так никто не пишет. Разделите это. У вас должнен быть отдельно вотчер и отдельно дефолтный таск для запуска проекта. В вашем случае в общем се должно выглядеть так:

// Отдельно таск для работы с html
const startHtml = () => {
    return src('src/*.html')
    .pipe(rigger())
    .pipe(dest(path.build.html))
    .pipe(browserSync.stream());
};

// Отдельно через browser-sync отслеживаете изменения в html-файлах. 
const watcher = () => {
	browserSync.init({
		server: {
			baseDir: './src/'
		}, 
		notify: false
	});
    watch('./src/*.html', startHtml);
}

// Отдельно запускаете это все.
exports.default(series(startHtml, watcher));

Comments

[Evgeniy]

к сожалению тогда пишет ошибку:
TypeError: watch is not a function

А так весь gulpfile переписал как вы сказали

const prefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const rigger = require('gulp-rigger');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const terser = require('gulp-terser');
const nodesass = require('node-sass');
const imagemin = require('gulp-imagemin');
const del = require('delete');
const watch= require('watch');
const browserSync = require('browser-sync').create();
const { series, parallel, src, dest, gulp } = require('gulp');

// Собираем html
const startHtml = () => {
    return src('src/*.html')
    .pipe(rigger())
    .pipe(dest('build'))
    .pipe(browserSync.stream());
};

// Изменение файлов
const watcher = () => {
  browserSync.init({
    server: {
      baseDir: './src/'
    },
    notify: false
  });
    watch('src/**/*.html', startHtml);
}
//exports.default(series(startHtml, watcher)); - не работает, говорит: exports.default is not a function
exports.default = (series(startHtml, watcher));

[Evgeniy]

а всё) засунул watch в

const { series, parallel, watch,  gulp } = require('gulp');

и дело пошло, большое спасибо)

Answer 2

[Eduard07]

Нужно создать таск, например ( gulp@3.9.1 )

gulp.task('html:build', function () {
return gulp.src(path.src.html)
.pipe(gulp.dest(path.build.html))
});

а так группа тасков, общая

gulp.task('watch', function() {
gulp.watch(path.watch.html, ['html:build']);
});

у меня так, может с в галпе 4 по другом не много, но разница там не большая, я смотрел.