Only compile sass if a file has changed using gulp

Question

I'm trying to rebuild my gulp file to be a bit more efficient, and I'm having some trouble getting my styles task to only compile if a file has changed.

I found this question, but the answer doesn't seem to be working for me.

Let's say I have my repo organized like so:

/dev
  /assets
    /styles
      all.css
/src
  /assets
    /styles
      all.scss
      _header.scss
gulpfile.js
package.json

I only want to overwrite all.css if a change has been made in either of my Sass files. So, if I where to save _header.scss but no changes had been made, and ran my styles task, it should realize that the code hasn't changed and not overwrite all.css.

I was looking at gulp-cached, per the question I linked to above, but that doesn't seem to be working for me. Here's the task at it's most basic:

var gulp = require("gulp"),
    cached = require("gulp-cached"),
    sass = require("gulp-sass");

gulp.task("styles", function() {
    return gulp.src(src + "/assets/styles/all.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(cached("sass_compile")) // should skip the dest if cache is the same
        .pipe(gulp.dest(dev + "/assets/styles"));
});

The cached pipe doesn't seem to be working in this instance. I run gulp styles and it still overwrites all.css, even if no changes have been made, even if I didn't even re-save the file.

The more complex task I'd eventually like to use is:

var gulp = require("gulp"),
    cached = require("gulp-cached"),
    sourcemaps = require("gulp-sourcemaps"),
    sass = require("gulp-sass"),
    autoprefixer = require("gulp-autoprefixer"),

    // set up environment paths
    src = "./src",
    dev = "./dev",
    dist = "./dist";

gulp.task("styles", function() {
    return gulp.src(src + "/assets/styles/all.scss")
        .pipe(sourcemaps.init())
        .pipe(sass().on("error", sass.logError))
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 9"))
        .pipe(sourcemaps.write())
        .pipe(cached("sass_compile")) // should skip the dest if cache is the same
        .pipe(gulp.dest(dev + "/assets/styles"));
});

Would greatly appreciate some guidance on this. Thanks much.

---

EDIT 1: Note that all.scss in this demo only contains @import "_header";.

---

EDIT 2: Okay, I just figured out that gulp-cached seems to be working fine in a watch task. So revised question: How can I get this same type of functionality outside of the watch task?

Answer 1

gulp-newer solved this problem, it can check imported files. Pretty awesome! Here's my final styles task:

// styles task, compiles & prefixes SCSS
gulp.task("styles", function () {
    "use strict";

    // development CSS directory
    var cssDirectory = dev + "/assets/styles";

    // production CSS directory (if --dist is passed)
    if (argv.dist) {
        cssDirectory = dist + "/assets/styles";
    }

    // clean directory if --clean is passed
    if (argv.clean) {
        del(cssDirectory + "**/*");
    }

    // compile all SCSS in the root styles directory
    return gulp.src(src + "/assets/styles/*.scss")
        // check if source is newer than destination
        .pipe(newer(cssDirectory + "/all.css"))
        // initialize sourcemap
        .pipe(sourcemaps.init())
        // compile SCSS (compress if --dist is passed)
        .pipe(gulpif(argv.dist, sass({outputStyle: "compressed"}).on("error", sass.logError), sass().on("error", sass.logError)))
        // prefix CSS
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 9"))
        // write the sourcemap (if --dist isn't passed)
        .pipe(gulpif(!argv.dist, sourcemaps.write()))
        // output to the compiled directory
        .pipe(gulp.dest(cssDirectory));
});

Answer 2

Try gulp-changed instead. I believe that works on the last modified date of the file, which sounds like what you want.