Invalid behaviour when using inside lazypipe

[Romelyus]

var gulp = require('gulp');
var gulpif = require('gulp-if');
var minifyCss = require('gulp-minify-css');
var lazypipe = require('lazypipe');
var args = require('yargs').argv;

var stylesTasks = lazypipe()
    .pipe(plugins.less) // some example code
    .pipe(plugins.autoprefixer, config.autoprefixer.browsers, config.autoprefixer.options) // some example code
    .pipe(gulpif, args.minify, minifyCss); // not working correctly

gulp.task('styles-common', function() {
    return gulp.src('some/src/*.less')
        .pipe(stylesTasks())
        .pipe(gulp.dest('some/dest'));
});
gulp.task('styles-ie', function() {
    return gulp.src('some/src/*.ie.less')
        .pipe(stylesTasks())
        .pipe(gulp.dest('some/dest'));
});
gulp.task('styles', ['styles-common', 'styles-ie']);

gulp styles --minify — in destination folder put two files with similar content

[SevereOverfl0w]

+1. I'd like to know how to solve this. I do feel like it is more likely a lazypipe issue however, for not defining an interface which permits sub-tasks.

[eduardolundgren]

This use-case is valid. Adding gulp if to support functions as trueChild and falseChild would do the job, e.g:

'use strict';

var match = require('gulp-match');
var ternaryStream = require('ternary-stream');
var through2 = require('through2');

module.exports = function (condition, trueChild, falseChild) {
    if (!trueChild) {
        throw new Error('gulp-if: child action is required');
    }

    if (typeof condition === 'boolean') {
        // no need to evaluate the condition for each file
        // other benefit is it never loads the other stream
        return condition ? trueChild : (falseChild || through2.obj());
    }

    function classifier (file) {
        return !!match(file, condition);
    }

    if (typeof trueChild === 'function') {
        trueChild = trueChild();
    }

    if (typeof falseChild === 'function') {
        falseChild = falseChild();
    }

    return ternaryStream(classifier, trueChild, falseChild);
};

Then you nesting lazypipe will work fine:

var buildJavaScript = lazypipe()
  .pipe(plugins.uglify, {
    preserveComments: 'some'
  });

var buildJavaScriptWithFilter = lazypipe()
  .pipe(plugins.if, '*.js', buildJavaScript);

[eduardolundgren]

There is a proposal pull request, let's see what @robrich says about it.

[robrich]

I found the solution. Lazypipe doesn't instantiate arguments on each build, it only instantiates the first argument, passing in the remaining arguments. Here's a solution:

var gulp = require('gulp');
var gulpif = require('gulp-if');
var minifyCss = require('gulp-minify-css');
var lazypipe = require('lazypipe');
var args = require('yargs').argv;

var stylesTasks = lazypipe()
    .pipe(plugins.less) // some example code
    .pipe(plugins.autoprefixer, config.autoprefixer.browsers, config.autoprefixer.options) // some example code
    // this line doesn't work: .pipe(gulpif, args.minify, minifyCss);
    // use this instead:
    .pipe(function () {
      return gulpif(args.minify, minifyCss());
    });
    // why does this work? lazypipe calls the function, passing in the no arguments to it,
    // it instantiates a new gulp-if pipe and returns it to lazypipe.

gulp.task('styles-common', function() {
    return gulp.src('some/src/*.less')
        .pipe(stylesTasks())
        .pipe(gulp.dest('some/dest'));
});
gulp.task('styles-ie', function() {
    return gulp.src('some/src/*.ie.less')
        .pipe(stylesTasks())
        .pipe(gulp.dest('some/dest'));
});
gulp.task('styles', ['styles-common', 'styles-ie']);

[SevereOverfl0w]

That adds a lot of additional code for each line I wish to to do it. I somewhat prefer the interface @eduardolundgren has provided.

[robrich]

Yeah, I'm not thrilled with the syntax either. I debated creating a
lazypipe init fn that I could pass an argument to. It ended up looking
uglier though. Alas, if an argument to a lazypipe step needs care on each
lazypipe instance, either you have to change every plugin to not need it,
or you need syntax to signal to lazypipe to treat this argument differently.

[eduardolundgren]

Following the instructions, the following example works fine:

function buildCssPipeline() {
  return lazypipe()
    .pipe(function() {
      var browsers = [
        'android >= 4.4',
        'bb >= 10',
        'chrome >= 34',
        'ff >= 30',
        'ie >= 8',
        'ie_mob >= 10',
        'ios >= 7',
        'opera >= 23',
        'safari >= 7'
      ];
      return plugins.if('*.css',
        plugins.autoprefixer(browsers)
          .pipe(plugins.csso()));
    });
}

Would be good to have it documented somewhere on gulp-if or on lazypipe project.
Feel free to close the issue. Thank you for the help.

[robrich]

documented at https://github.com/robrich/gulp-if#works-great-inside-lazypipe and OverZealous/lazypipe#9. Thanks for your work documenting this issue.

[eduardolundgren]

👍