只有在使用gulp修改文件时才编译sass。

Question

我正在尝试重新构建我的gulp文件，以提高效率，而且我在只有在文件更改时才能编译我的styles任务时遇到了一些问题。

我找到了这个问题，但答案似乎不适合我。

假设我是这样组织我的回购的：

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

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

根据我上面提到的问题，我在看吞咽，但这似乎不适合我。以下是它最基本的任务：

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任务中工作得很好。因此，修改后的问题:我如何才能在监视任务之外获得相同类型的功能？

Answer 1

吞咽-更新解决了这个问题，它可以检查导入的文件。太棒了！下面是我的最后一个样式任务：

// 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

试一试吞咽。我相信这在文件的最后修改日期上有效，听起来就像你想要的那样。