了解Gulppipe道顺序

上下文

我想parsing一些.sass文件并在将它们编译成.css之前replace一个variables。

为此，我使用了一大口 ， 一口一口的 ， 一口气的预处理工艺 ：

 npm install gulp gulp-sass gulp-preprocess --save-dev 

Gulpfile.js

 var gulp = require('gulp'); var sass = require('gulp-sass'); var preprocess = require('gulp-preprocess'); var settings = { HOST_URL: 'qa.host.com' } gulp.task('sass', function () { return gulp.src('./sass/**/*.sass') .pipe(sass({indentedSyntax: true})) .pipe(preprocess({context: settings})) .pipe(gulp.dest('./dist')); }); 

上海社会科学院/ styles.sass

 @import "partials/variables" body background-image: url("//#{ $host_url }/foo.jpg") .bar color: $red background-image: $host_url 

SASS /分音/ _variables.sass

 $red: #ff0000 $host_url: '/* @echo HOST_URL */' 

CLI

 gulp sass 

这工作。 它会根据预期创build一个dist/styles.css文件，其中包含replace的variables。

题：

在第一次尝试时，我试图在sass之前执行preprocess ：

 .pipe(preprocess({context: settings})) .pipe(sass({indentedSyntax: true})) 

根本不会replacevariables：

 body { background-image: url("///* @echo HOST_URL *//foo.jpg"); } .bar { color: #ff0000; background-image: '/* @echo HOST_URL */'; } 

那么，为什么preprocess必须在sass之后执行呢？ Sass转换后的pipe道不会返回已经编译好的css吗？ 这意味着这些variables已经被应用并压缩到stream中了。

看起来在某一点上，这个stream向另一个方向。

Answer 1

为什么在预先处理时不起作用：

这个问题涉及如何在编译时引用sass文件。 由于style.sass导入style.sass partials/variables这个文件在stream的外部被引用，并且将检索原始（未预处理的）文件。

为什么它可以在预处理后运行：

由于编译后的.css仍然具有'/* @echo HOST_URL */'值，因此预处理任务可以用所需的值replace该值。 没有黑魔法，或倒stream。