gulp.dest is not written if followed by browserSync.reload

Following the docs, I am pipe-ing browserSync.reload({stream: true}) after gulp.dest.

This is resulting in the gulp.dest files not being written. If I switch the order (put browserSync.reload({stream: true}) before pipe(gulp.dest...)), it works (both writes file dest AND injects changes in the browser).

Are the docs wrong or is something else going on?

Here's my Gulpfile. I'm using PostCSS instead of Sass like your example, but it should be the same:

var path        = require('path');
var config      = require(path.join(process.cwd(), 'config'));
var gulp        = require('gulp');
var postcss     = require('gulp-postcss');
var browserSync = require('browser-sync');
var gulpif      = require('gulp-if');

gulp.task('build:postcss', function() {
  var plugins = [
      require('postcss-import')(),
      require('postcss-custom-selectors')(),
      require('postcss-custom-properties')(),
      require('postcss-custom-media')(),
      require('postcss-color-gray')(),
      require('postcss-color-rebeccapurple')(),
      require('postcss-color-function')(),
      require('postcss-color-hex-alpha')(),
      require('postcss-color-hwb')(),
      require('postcss-calc')(),
      require('postcss-font-variant')(),
      require('postcss-assets')({
        basePath: config.paths.src,
        loadPaths: [path.join(config.paths.src, 'assets')]
      }),
      require('postcss-nested')(),
  ];
  var prodPlugins = [
    require('css-mqpacker')(),
    require('autoprefixer-core')({browsers: 'last 2 version'}),
    require('csswring')(),
  ];

  return gulp.src(path.join(config.paths.src, 'assets/css/*.css'))
    .pipe(postcss(plugins))
    .pipe(gulpif(config.isProd, postcss(prodPlugins)))
    .pipe(browserSync.reload({stream: true}))
    .pipe(gulp.dest(path.join(config.paths.dest, 'assets/css/'))
  );
});

BrowserSync / gulp-browser-sync

gulp.dest is not written if followed by browserSync.reload #46