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

上海社會科學院/ 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文件，並按預期替換了變量。

題：

第一次嘗試時，我試圖在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 */'; }

那么，為什么必須在sass之后執行preprocess ？ sass轉換后的管道不會返回已編譯的css嗎？ 這意味着變量將已經應用並被壓縮到流中...

看起來在某些時候，流向另一個方向流動。

Answer 1

為什么先進行預處理時不起作用：

問題與編譯時如何引用sass文件有關。 由於style.sass導入了style.sass partials/variables因此該文件在流外部被引用，它將檢索原始文件（未經預處理）。

為什么在以下情況下可以進行預處理：

由於已編譯的.css仍然具有'/* @echo HOST_URL */'值，因此預處理任務能夠將該值替換為所需的值。 沒有黑魔法，或倒流。