Node.js 仅当使用gulp更改了文件时才编译sass_Node.js_Sass_Gulp_Gulp Sass_Gulp Cached

Node.js 仅当使用gulp更改了文件时才编译sass

node.js sass gulp

Node.js 仅当使用gulp更改了文件时才编译sass,node.js,sass,gulp,gulp-sass,gulp-cached,Node.js,Sass,Gulp,Gulp Sass,Gulp Cached,我正试图重建我的gulp文件，使其更有效率，而且我在使我的style任务仅在文件发生更改时编译时遇到了一些问题我发现了，但答案似乎对我不起作用假设我的回购协议是这样组织的： /dev /assets /styles all.css /src /assets /styles all.scss _header.scss gulpfile.js package.json 我只想覆盖all.css，如果我的任何一个Sass文件发生了更改。

我正试图重建我的gulp文件，使其更有效率，而且我在使我的

style

任务仅在文件发生更改时编译时遇到了一些问题

我发现了，但答案似乎对我不起作用

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

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

我只想覆盖

all.css

，如果我的任何一个Sass文件发生了更改。因此，如果我将

\u header.scss

保存到何处，但没有进行任何更改，并且运行了

样式

任务，它应该意识到代码没有更改，也没有覆盖

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

缓存的

管道在此实例中似乎不起作用。我运行了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“\u header”

编辑2:好的，我刚刚发现吞下缓存的似乎在监视任务中工作正常。所以，修改后的问题是：如何在watch任务之外获得相同类型的功能？
试试看。我相信这对文件的结尾是有效的，这听起来像是你想要的。
试试看。我相信这对文件的格式有效，这听起来像你想要的。
解决了这个问题，它可以检查导入的文件。太棒了！这是我的最后一项任务：
// 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));
});

解决了这个问题，它可以检查导入的文件。太棒了！这是我的最后一项任务：
// 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));
});

我想我看了一下这个问题，但我会再给它一次机会，然后再报告。谢谢你的建议。我想你可以把它变成你需要的东西。您可能需要在管道中更早地使用changed
，以便将srcall.scss
last changed日期与destall.scss
last changed日期进行比较。IIRC它基于文件名进行比较，因此如果您正在进行任何其他重命名/连接或类似操作，它可能会出现问题。就我个人而言，我总是在一个监视任务中使用类似于gulpcached
的东西，但我倾向于选择监视任务。所以从这个描述来看，似乎changed
在导入的文件中看不到更改，是吗？这个周末我要做些调查。我想我只能依靠值班任务了；我只是希望在某些情况下能够手动运行我的默认任务（运行所有任务）。我认为它的设计是在单个源文件和具有相同名称的单个目标文件之间进行1:1比较。比较方法可以不同，但是默认值应该是最后修改的日期——因此，如果它看到源文件的最后修改日期比目标文件的最近修改日期，那么它应该允许源文件通过管道。是的，这看起来很有希望——很好，他们有能力将多个src文件与单个dest文件进行比较（在缩小的情况下）。我想我看了一下，遇到了一些问题，但我会再次尝试并报告。谢谢你的建议。我想你可以把它变成你需要的东西。您可能需要在管道中更早地使用changed
，以便将srcall.scss
last changed日期与destall.scss
last changed日期进行比较。IIRC它基于文件名进行比较，因此如果您正在进行任何其他重命名/连接或类似操作，它可能会出现问题。就我个人而言，我总是在一个监视任务中使用类似于gulpcached
的东西，但我倾向于选择监视任务。所以从这个描述来看，似乎changed
在导入的文件中看不到更改，是吗？这个周末我要做些调查。我想我只能依靠值班任务了；我只是希望在某些情况下能够手动运行我的默认任务（运行所有任务）。我认为它的设计是在单个源文件和具有相同名称的单个目标文件之间进行1:1比较。比较方法可以不同，但是默认值应该是最后修改的日期——因此，如果它看到源文件的最后修改日期比目标文件的最近修改日期，那么它应该允许源文件通过管道。是的，这看起来很有希望——很好，他们能够将多个src文件与单个dest文件进行比较（在缩小的情况下）。