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

Question

[Yurik7k]

Вот содержимое файла main.less:

@import "../blocks/simple.less";

@import "../blocks/header.less";
@import "../blocks/slider.less";
@import "../blocks/sets.less";
@import "../blocks/help.less";
@import "../blocks/category.less";
@import "../blocks/tour.less";
@import "../blocks/recall.less";
@import "../blocks/review.less";
@import "../blocks/footer.less";

@import "../blocks/device.less";

Вот таски:

gulp.task(init.name+':less', function () {

        return gulp.src(init.less)
            .pipe(less())
            .pipe(autoprefixer())
            .pipe(cssmin())
            .pipe(gulp.dest(init.css.assets))
    });

  gulp.task(init.name+':watch', function(){

        watch(init.watch.less[0], function(event, cb) {
            gulp.start([init.name+':less']);
        });

    });

1. запускаю команду watch, она следит за изменением файлов, main.less
и файлов в нем (написал в самом начале)

2. изменяю less и сохраняю

3. изменения видны на сайте (watch отработал успешно)

4. пытаюсь еще раз изменить less

5. изменения не применяют, less не компилируются, хотя watch команду выполняет, почему так? другим словами у меня watch одноразовый

Answer 1

[Dymok]

Я вот так использую. Не знаю насчёт правильности, но всё работает.

gulp.task("serve", function () {
    browserSync.init({
        server: "dev"
    });

    gulp.watch("src/scss/*.scss", ["dev:scss"]);
    gulp.watch("src/**/*.html", ["dev:html"]);
    gulp.watch("src/js/*.js", ["dev:js"]);
    gulp.watch("src/js/libs/*.js", ["dev:js-libs"]);
    gulp.watch("dev/*.html").on("change", browserSync.reload);
    gulp.watch("dev/js/*.js").on("change", browserSync.reload);
    gulp.watch("dev/**/*.css").on("change", browserSync.reload);
});

Comments

[Yurik7k]

так же работает одноразово, LEss кеширует inlude, как отключить этот кеш ?

Answer 2

[adametsderschopfer]

Конкретно проблема состоит в том, что файлы, которые подключаются через @import, кэшируются особенным образом — очистка кэша (или отключение кэширования в браузере) никак не решает проблему.
Как оказалось, хранится все это в window.localStorage. В LESS уже в принципе все предусмотрели, и для того чтобы отключить кэширование достаточно установить окружение как development, а делается это следующим образом:

var less=less||{}; less.env='development';

Хочу отметить, что этот код должен располагаться до подключения less.js