了解Gulp管道订单

Question

上下文

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

为此，我使用了gulp，gulp-sass和gulp-preprocess：

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 /分音/ _variables.sass

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

CLI

gulp sass

这样做。它会根据需要创建一个包含替换变量的dist/styles.css文件。

问题：

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

.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吗？这意味着变量已经被应用并压缩到流中......

看起来在某个时刻，流向另一个方向发展。

Answer 1

为什么在首次预处理时它不起作用：

该问题涉及编译时如何引用sass文件。由于style.sass导入partials/variables此文件在流外引用，它将检索原始（未预处理）文件。

为什么它在以下之后进行预处理：

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