我正在尝试重建我的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
任务中工作正常。修改后的问题:如何在监视任务之外获得相同类型的功能?
答案 0 :(得分:0)
请尝试使用gulp-changed。我相信它适用于文件的last modified date,听起来就像你想要的那样。
答案 1 :(得分:0)
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));
});