【问题标题】：Understand Gulp pipe order了解 Gulp 管道顺序
【发布时间】：2015-02-05 23:26:58
【问题描述】：

上下文

我想解析一些.sass 文件并在将它们编译成.css 之前替换一个变量。

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

sass/styles.sass

@import "partials/variables"

body
  background-image: url("//#{ $host_url }/foo.jpg")

.bar
  color: $red
  background-image: $host_url

sass/partials/_variables.sass

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

CLI

gulp sass

这行得通。它会创建一个 dist/styles.css 文件，其中包含预期的替换变量。

问题：

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

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

根本不会替换变量：

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

.bar {
  color: #ff0000;
  background-image: '/* @echo HOST_URL */'; }

那么，为什么preprocess 必须在sass 之后执行？ sass转换后的管道不会返回已经编译的css吗？这意味着变量已经被应用并压缩到流中......

看起来在某些时候流向另一个方向。

【问题讨论】：

确实很奇怪。我查看了preprocess的代码，发现他们用来匹配echo语句的regex。此外，我可以看到它们匹配 .sass 文件和 css 文件都具有相同的规则。在摆弄了他们使用的正则表达式之后，我得到了它来匹配你的两种情况（根据他们的规则，它是无效的，我不确定它是否是不同的标准）。虽然如果它以一种方式工作，那就使用它。无论哪种方式都应该没有问题。

标签： javascript node.js gulp gulp-sass gulp-preprocess

【解决方案1】：

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

这个问题与编译时如何引用 sass 文件有关。由于style.sass 导入partials/variables，此文件在流外部被引用，它将检索原始（未预处理）文件。

为什么它在预处理之后起作用：

由于编译后的.css 仍然具有'/* @echo HOST_URL */' 值，预处理任务能够将该值替换为所需的值。没有黑魔法，也没有倒流。

【讨论】：