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

Question

I can't 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-if into the mix, the gulpif pipe returns nothing 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 is that? What am I doing wrong? If I add some logs into the gulp-if source code I can see that the condition is passing.

score 12 · Answer 1 · edited Nov 06 '15 at 03:47

12

I think you may want to use gulp-filter instead: 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'));
});

This will create a filtered stream and the restore() will restore the stream. gulpIf is made to conditionally process a whole stream and not just matching files.

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

edited Nov 06 '15 at 03:47

Richard Szalay

83,269
19
178
237

answered Apr 17 '14 at 15:59

Nicholas Boll

845
7
9

I'll give `gulp-filter` a whirl, but I still don't understand what `gulp-if` wouldn't work. I've seen it [used to compile coffeescript](http://stackoverflow.com/a/21723513/65387) before. – mpen Apr 17 '14 at 19:05
3

You are right. `gulp-if` uses `gulp-match` which should process regular expressions. This should also be valid as well: `.pipe(gulpIf('**/*.less'),less(lessOptions))` – Nicholas Boll Apr 17 '14 at 20:05
2

gulp-if and gulp-filter serve different needs. gulp-filter removes things from the stream that match the filter. gulp-if is a ternary-stream passing things to the if and else streams if it matches, and then passes everything downstream. – robrich May 12 '14 at 04:14

score 3 · Answer 2 · answered May 12 '14 at 04:15

3

This sounds like a bug in gulp-if. Try upgrading gulp-if to the latest version, and if that doesn't work, post an issue on https://github.com/robrich/gulp-if/issues.

answered May 12 '14 at 04:15

robrich

13,017
7
36
63

score 1 · Answer 3 · answered Mar 02 '17 at 09:56

1

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

answered Mar 02 '17 at 09:56

kossmos

19
2

1

What are you saying? That `gulpif` will work with a function but not a regex? – mpen Mar 02 '17 at 20:03
1

Really? Because the docs [specifically say](https://github.com/robrich/gulp-if#condition) that accepts a RegularExpression. – mpen Mar 04 '17 at 08:22

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

3 Answers3