如果文件已使用 gulp 更改，则仅编译 sass

Question

我正在尝试重建我的 gulp 文件以提高效率，但我在让我的 styles 任务仅在文件发生更改时编译时遇到了一些问题。

我找到了 this question，但答案似乎不适合我。

假设我的存储库是这样组织的：

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

我只想在我的 Sass 文件中的任何一个发生更改时覆盖 all.css。因此，如果我在哪里保存 _header.scss 但没有进行任何更改，并且运行我的 styles 任务，它应该意识到代码没有更改并且不会覆盖 all.css.

根据上面链接的问题，我正在查看 gulp-cached，但这似乎对我不起作用。这是最基本的任务：

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

cached 管道在这种情况下似乎不起作用。我运行 gulp styles 它仍然覆盖 all.css，即使没有进行任何更改，即使我什至没有重新保存文件。

我最终想使用的更复杂的任务是：

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

非常感谢对此的一些指导。非常感谢。

编辑 1: 请注意，此演示中的 all.scss 仅包含 @import "_header";.

编辑 2： 好的，我刚刚发现 gulp-cached 在 watch 任务中似乎工作正常。修改后的问题：如何在 watch 任务之外获得相同类型的功能？

Answer 1

尝试 gulp-changed instead. I believe that works on the last modified date 文件，这听起来像你想要的。

Answer 2

gulp-newer解决了这个问题，可以检查导入的文件。太棒了！这是我的最终样式任务：

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

如果文件已使用 gulp 更改，则仅编译 sass

Only compile sass if a file has changed using gulp

sass

node.js

gulp

gulp-sass

gulp-cached