How to use multiple Pipes with gulp-if and lazypipe?

Question

I have a Grunt file that is working without using gulpif and lazypipes, but what I am trying to do is create a task that will take in the script files in my index.html page using useref. Then gulpif JS lint, uglify/concatenate, and notify. I am getting a "Error: Invalid call to lazypipe().." and I was looking at this post https://github.com/OverZealous/lazypipe/issues/19, but I am a bit green and don't understand the error/how to fix it "pipe(foo) vs. pipe(foo())". If someone could tell me how I am using the lazypipe wrong = I should be good.

The grunt file is bigger and I am using gulpif bc css will used too once this is to work. If there is a better way for me to do this let me know, thanks.

Plugins in use:

var gulp        = require('gulp'),
jshint          = require('gulp-jshint'),
notify          = require('gulp-notify'),
gulpif          = require('gulp-if'),
lazypipe        = require('lazypipe'),
useref          = require('gulp-useref');
uglify          = require('gulp-uglify');

var anyJS       = '/**/*.js',
    distFolder  = 'dist';

//Lazy Tasks
    var jsTask = lazypipe()
        .pipe(jshint)
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(notify('JS Linting finished'))
        .pipe(uglify())
        .pipe(notify('JS Compressing finished'));


//Tasks
    gulp.task('mini', function () {
        return gulp.src('./index.html')
            .pipe(useref())
            .pipe(gulpif(anyJS, jsTask()))
            .pipe(gulp.dest(distFolder));
    });

Answer 1

So I finally figured out what was wrong. All function calls in the LazyPipe must not use ()! So if you have lazypipe().pipe(jshint).pipe(uglify()). It will not work - you need to remove the () on uglify too.

I think I'll try it again with LP and GF, but here is it working with gulpFilter or at least 90%. The notifies didn't show.

gulp.task('mini', function () {
    var jsFilter = gulpFilter(jsInput, {restore: true});
    var cssFilter = gulpFilter(cssInput, {restore: true});

    return gulp.src('./index.html')
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(useref())
        .pipe(jsFilter)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(uglify())
        .pipe(notify('JS task finished'))
        .pipe(jsFilter.restore)
        .pipe(cssFilter)
        .pipe(sass())
        .pipe(autoPrefixer('last 2 versions'))
        .pipe(cssComb())
        .pipe(mmq({
            log: true
        }))
        .pipe(minifyCss())
        .pipe(notify('CSS task finished'))
        .pipe(cssFilter.restore)

        .pipe(gulp.dest(distFolder));
});

Answer 2

Like you pointed out in your own answer, you need to use the stream factories themselves (instead of the result) when you pipe with lazypipe. For factories that uses no parameter, this is as simple as removing the (), and for factories that do require parameters, you can use arrow functions to create such factories:

var jsTask = lazypipe()
    .pipe(jshint)
    .pipe(() => jshint.reporter('jshint-stylish'))
    .pipe(() => notify('JS Linting finished'))
    .pipe(uglify)
    .pipe(() => notify('JS Compressing finished'));

It is also possible to create such factories by using bind(), but the approach above is easier as you don't need to worry about the calling context.