How to use gulp -if to conditionally compile fewer files?

Question

I cannot get gulp-if to work correctly.

Without gulp - if it works fine:

gulp.task('css', function() {
    return gulp.src([
    //  'bower_components/bootstrap/dist/css/bootstrap.css',
        'app/stylesheets/main.less',
    ])
    .pipe(less({
        strictMath: true,
         strictUnits: true,
    }))
    .pipe(concat('all.css', {newLine: '\n'}))
    .pipe(prefixer('> 1%'))
    .pipe(minifyCss())
    .pipe(gulp.dest('public/css'));
});

But as soon as I add gulp-ifto the mix, the pipe gulpifwill not return anything when it returns to the main stream:

gulp.task('css', function() {
    return gulp.src([
        'bower_components/bootstrap/dist/css/bootstrap.css',
        'app/stylesheets/main.less',
    ])

        .pipe(gulpif(/\.less$/,less({
            strictMath: true,
            strictUnits: true,
        })))
        .pipe(concat('all.css', {newLine: '\n'}))
        .pipe(prefixer('> 1%'))
        .pipe(minifyCss())
        .pipe(gulp.dest('public/css'));
});

Why? What am I doing wrong? If I add several logs to the source code gulp-if, I see that the condition passes.

Answer 1

I think you can use gulp-filterinstead: https://www.npmjs.org/package/gulp-filter

gulp.task('css', function() {
    var lessFilter = gulpFilter('**/*.less', {restore: true})
    return gulp.src([
        'bower_components/bootstrap/dist/css/bootstrap.css',
        'app/stylesheets/main.less',
    ])

    .pipe(lessFilter)
    .pipe(less({
        strictMath: true,
        strictUnits: true,
    }))
    .pipe(lessFilter.restore)

    .pipe(concat('all.css', {newLine: '\n'}))
    .pipe(prefixer('> 1%'))
    .pipe(minifyCss())
    .pipe(gulp.dest('public/css'));
});

, restore() . gulpIf , .

gulp.src('src/**/*.js', function () {
    .pipe(gulpIf(isProduction, concat('all.js')))
    .pipe(gulp.dest('dest/')
});

Answer 2

gulp-if. gulp-if , , https://github.com/robrich/gulp-if/issues.

Answer 3

gulp.task('css', function() {
    var condition = function(file) {
        if (file.extname == '.less') return true;
    };

    return gulp.src([
        'bower_components/bootstrap/dist/css/bootstrap.css',
        'app/stylesheets/main.less',
     ])
    .pipe(gulpif(condition, less({
        strictMath: true,
        strictUnits: true,
    })))
    .pipe(concat('all.css', {newLine: '\n'}))
    .pipe(prefixer('> 1%'))
    .pipe(minifyCss())
    .pipe(gulp.dest('public/css'));
});