How to properly set up gulp watch?

Question

Less

Here is the content of the main.less file:

@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";

Here are the tasks:

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. I run the watch command, it watches for changes in files, main.less
and files in it (I wrote at the very beginning)
2. I change less and save
3. the changes are visible on the site (watch worked successfully)
4. I try to change less again
5 changes are not applied, less is not compiled , although the watch command executes, why is that? in other words, I have a disposable watch

Answer 1

This is how I use it. I don't know if it's correct, but it works.

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);
});

Answer 2

LEss caches inlude, how to disable this cache ?

Answer 3

Specifically, the problem is that files that are included via @import are cached in a special way - clearing the cache (or disabling caching in the browser) does not solve the problem in any way.
As it turned out, all this is stored in window.localStorage. In LESS, in principle, everything has already been provided for , and in order to disable caching, it is enough to set the environment as development, and this is done as follows: I want to note that this code should be located before connecting less.js
var less=less||{}; less.env='development';