Скомпилируйте 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));
});
Попробуйте вместо этого глоток. Я считаю, что работает на дату последнего изменения файла, который звучит как то, что вы хотите.