Changes to less files are not reflected in css files

[abhijithvijayan]

Changes to .less file only reloads once. What's wrong?

const gulp = require("gulp");
const less = require("gulp-less");
const concat = require("gulp-concat");
const sourcemaps = require("gulp-sourcemaps");
const autoprefixer = require("gulp-autoprefixer");
const cleanCss = require("gulp-clean-css");
const browserSync = require("browser-sync").create();

gulp.task("less", () => {
  gulp
    .src("./styles/*.less")
    .pipe(sourcemaps.init())
    .pipe(autoprefixer())
    .pipe(less())
    .pipe(concat("calendar.css"))
    .pipe(cleanCss())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("styles"))
    .pipe(browserSync.stream());
});

gulp.task("serve", () => {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
  gulp.watch("./styles/*.less", gulp.series("less"));
  gulp.watch("./index.html").on('change', () => {
    browserSync.reload();
  });
});

gulp.task('default', gulp.series(gulp.parallel('less', 'serve'), function () {}))

What version of gulp are you using? CLI version 2.0.1 Local version 4.0.0 What versions of npm and node are you using? npm 6.5.0 node v8.12.0

[abhijithvijayan]

[Fixed]