title: Understand Gulp pipe order
body: <h1>Context</h1>
  
  <p>I want to parse some <code>.sass</code> files and replace a variable before compile them into <code>.css</code>.</p>
  
  <p>For this I used <a href="https://github.com/gulpjs/gulp" rel="nofollow">gulp</a>, <a href="https://github.com/dlmanning/gulp-sass" rel="nofollow">gulp-sass</a> and <a href="https://github.com/jas/gulp-preprocess" rel="nofollow">gulp-preprocess</a>:</p>
  
  <pre><code>npm install gulp gulp-sass gulp-preprocess --save-dev
  </code></pre>
  
  <p><strong>Gulpfile.js</strong></p>
  
  <pre><code>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'));
  });
  </code></pre>
  
  <p><strong>sass/styles.sass</strong></p>
  
  <pre><code>@import "partials/variables"
  
  body
    background-image: url("//#{ $host_url }/foo.jpg")
  
  .bar
    color: $red
    background-image: $host_url
  </code></pre>
  
  <p><strong>sass/partials/_variables.sass</strong></p>
  
  <pre><code>$red: #ff0000
  $host_url: '/* @echo HOST_URL */'
  </code></pre>
  
  <p><strong>CLI</strong></p>
  
  <pre><code>gulp sass
  </code></pre>
  
  <p><strong>This works.</strong> It creates a <code>dist/styles.css</code> file with the replaced variables as intended.</p>
  
  <h1>Question:</h1>
  
  <p>At the first attempt I was trying to execute the <code>preprocess</code> before <code>sass</code>:</p>
  
  <pre><code>.pipe(preprocess({context: settings}))
  .pipe(sass({indentedSyntax: true}))
  </code></pre>
  
  <p>Simply won't replace the variables:</p>
  
  <pre><code>body {
    background-image: url("///* @echo HOST_URL *//foo.jpg"); }
  
  .bar {
    color: #ff0000;
    background-image: '/* @echo HOST_URL */'; }
  </code></pre>
  
  <p>So, why does the <code>preprocess</code> has to be executed after the <code>sass</code>? 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...</p>
  
  <p>Looks like that at some point the stream goes in the other direction.</p>