Search code examples
javascriptgulpgulp-userefgulp-if

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


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));
    });

Solution

  • 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));
    });