CODEWITHSUNDEEP
javascriptnode.jsgulpgulp-sassgulp-preprocess
a--m
a--m

Reputation: 4782

Understand Gulp pipe order

Context

I want to parse some .sass files and replace a variable before compile them into .css.

For this I used gulp, gulp-sass and 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/partials/_variables.sass

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

CLI

gulp sass

This works. It creates a dist/styles.css file with the replaced variables as intended.

Question:

At the first attempt I was trying to execute the preprocess before sass:

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

Simply won't replace the variables:

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

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

So, why does the preprocess has to be executed after the sass? Won't the pipe after the sass transformation return the already compiled css? That would mean that the variables would be already applied and squashed into the stream...

Looks like that at some point the stream goes in the other direction.

Upvotes: 1

Views: 809

Answers (1)

a--m
a--m

Reputation: 4782

Why it doesn't work when preprocessing first:

The issue relates how the sass files are referenced when compiled. Since style.sass imports partials/variables this file is referenced outside the stream and it will retrieve the original (not preprocessed) file.

Why it works preprocessing after:

Since the compiled .css still have the '/* @echo HOST_URL */' value the preprocess task is able to replace that value with the value required. No black magic, or inverted streams.

Upvotes: 1

Related Questions