Gulp не следит за изменениями в файлах .html и .css?

Question

[Никита Петров]

Добрый день. Подскажите пожалуйста где я мог ошибиться?
Хочу следить за изменениями .css и .html и при сохранении делать hot reload

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var paths = {
    css: ['./style/*.css'],
    html: ['./*.html']
};

gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch(paths.css, paths.html).on("change", reload);
});

При таком варианте собственно все работает, но он следит только за .html файлом.

'use strict';

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



gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("*.html").on("change", reload);
});

В первом (нужном) варианте при запуске gulp serve никаких ошибок, но и в консоле собственно тоже ничего.

Структура простая

└── node_modules
└── style/.css
└── index.html

Answer 1

[alvvi]

gulp.watch(paths.css, paths.html)
Вы передали два разных аргумента, а нужен один.
Попробуйте

gulp.watch(['./path/to/styles/*/**.*.css ', './path/to/html/*/**.*html'])

Comments

[Никита Петров]

рабочее решение оказалось не столь изящным как хотелось

gulp.watch("*.html").on("change", reload);
gulp.watch("./style/*.css").on("change", reload);

Ваше решение не срабтало(

[alvvi]

Никита Петров, https://github.com/gulpjs/gulp/blob/master/docs/AP...

Answer 2

[Дмитрий]

По хорошему у вас должно быть 2 папки src и dist (к примеру). В src у нас находятся исходники html, sass, js и прочее, а в dist уже готовый проект (build).
В вашем случае создайте в папке проекта папку src и перенесите туда html и css файлы (Также проверьте пути к файлам). Как понадобится, просто добавите перенос и компиляцию в папку dist.
P.S. Называйте html файл index.html, если он отличается, то добавляйте параметр "index: Название_вашего_файла.html"

'use strict';

const gulp            = require('gulp'),
var browserSync  = require('browser-sync'),
var reload            = browserSync.reload;

// BrowserSync
gulp.task('serve', function () {
    browserSync({
        server: {
            baseDir: "src"
            //index: "paths.html" если название нестандартное
        },
        notify: false
    });
});

// Watch
gulp.task('watch', function() {
  gulp.watch('./src/css/**/*.css', reload),
  gulp.watch('./src/*.html', reload);
});

Запускаем командой gulp watch.