Скомпилируйте sass, только если файл был изменен с помощью gulp

Я пытаюсь восстановить файл 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,

Я смотрел на 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 задача. Итак, пересмотренный вопрос: как я могу получить такую ​​же функциональность вне задачи наблюдения?

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

Попробуйте вместо этого глоток. Я считаю, что работает на дату последнего изменения файла, который звучит как то, что вы хотите.

Другие вопросы по тегам