jsorrell / gulp-watch-sass

Watches for SASS files modifications, taking @import-ing SASS files into account.

gulp-watch-sass

Watches for SASS files modifications thanks to gulp-watch, while adding @importing SASS files to the stream thanks to gulp-fn.

State

master:

develop:

Install

npm install --save-dev gulp-watch-sass

Usage

const gulp = require("gulp")
const sass = require("gulp-sass")
const watchSass = require("gulp-watch-sass")

gulp.task("sass:watch", () => watchSass([
  "./public/**/*.{scss,css}",
  "!./public/libs/**/*"
])
  .pipe(sass())
  .pipe(gulp.dest("./public")));

API

watchSass(glob, [options])

Creates a watcher that will spy on files that are matched by glob which can be a glob string or array of glob strings. On file change, the modified file and the @importing files will be added to the stream.

You can watch for CSS files modifications in addition to SASS ones. In this case, if the modified file is a CSS file, then only the @importing files will be added to the stream.

options

This object is passed to the gulp-watch options directly.

options.includePaths

Mimics node-sass' includePaths option.

Why?

gulp.watch recompiles all the SASS files:

gulp.task("sass", () => gulp.src([
  "./public/**/*.scss",
  "!./public/libs/**/*"
])
  .pipe(sass())
  .pipe(gulp.dest("./public")));

gulp.task("sass:watch", () => {
  gulp.watch([
    "./public/**/*.scss",
    "!./public/libs/**/*"
  ], ["sass"]);
});

This works well, but each time a SASS file is updated, all the project's SASS files are recompiled, which can be quite long when working on big projects.

gulp-watch doesn't take @importing files into account:

gulp.task("sass:watch", () => watch([
  "./public/**/*.scss",
  "!./public/libs/**/*"
])
  .pipe(sass())
  .pipe(gulp.dest("./public")));

This recompiles only modified SASS files, but because @import statements are not resolved, the stylesheets may not be refreshed as expected.