GULPでLESSの変更を検知する方法

2021年7月23日GULP

GULPでLESSの変更を検知する方法を紹介します。

GULPでLESSの変更を検知する方法

基本的にGULPでSASSやHTMLの変更を検知してブラウザを自動でリロードさせる方法で紹介している方法と同じになります。

gulp-lessをインストール

npm i gulp-less --save-dev

gulpfile.jsに記述

const gulp = require("gulp");
const sass = require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const browserSync = require("browser-sync").create();
const less = require("gulp-less");

// Sass

gulp.task("sass", function(done) {
  return (
    gulp
      .src(["./src/sass/**/*.scss"])
      .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("./dist/css"))
  );
  done();
});

// Less

gulp.task("less", function(done) {
  return gulp
    .src("./src/less/styles.less")
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("./dist/css"));
  done();
});

// Watch task with BrowserSync

gulp.task("watch", function() {
  browserSync.init({
    server: {
      baseDir: "./"
    },
    browser: "firefox developer edition"
  });

  gulp
    .watch(
      ["./src/sass/**/*.scss", "**/*.html", "./src/less/styles.less"],
      gulp.series(["sass", "less"])
    )
    .on("change", browserSync.reload);
});