Running gulp-if combined with concat doesn't work right.

[pgilad]

Running the following code:

    var clientStream = gulp.src(['src/js/**/*.js', '!src/js/vendor/**'])
        .pipe(gulpif(isProduction, concat('scripts.min.js'))
        .pipe(gulpif(isProduction, uglify()))
        .pipe(gulp.dest(scriptsTarget));

Concatenates the entire stream to scripts.min.js but does it to every file stream that passes through, causing numerous concated files to pass through.

Obviously in the uglify task it works great because it's a stream that works parallel on file vinyls, and concat needs all streams to pass through.

Any workaround for this?

[NicholasBoll]

I have run into the same issue. My solution was to use a gulp-filter and return true only for the first file. Probably a better solution is to store a reference to a piped stream and use a regular if:

var clientStream = gulp.src(['src/js/**/*.js', '!src/js/vendor/**']);
if (isProduction) {
  clientStream = clientStream.pipe(concat('scripts.min.js')
    .pipe(uglify())
}
clientStream.pipe(gulp.dest(scriptsTarget));

That code isn't as elegant as using gulpIf, but it is more elegant than a first file filter.

[yocontra]

Probably related to gulp-if not propagating events between the child/parent correctly https://github.com/robrich/gulp-if/issues/15

[robrich]

Check out the new version. Does this resolve the concern?

[styurenkov-b2broker]

problem still happens in 2023. having a gulp-if before gulp-contact results in:

Error: gulp-concat: Missing file option

[robrich]

@styurenkov-b2broker Do you have a sample repo that shows this concern?

[styurenkov-b2broker]

@robrich repo is private, but here is a sample gulp task I was trying to add that logic to:

let plumber = require("gulp-plumber"),
    scss = require("gulp-sass")(require("sass")),
    autoprefixer = require("gulp-autoprefixer"),
    csso = require("gulp-csso"),
    cache = require("gulp-cached"),
    replace = require("gulp-replace"),
    dependents = require("gulp-dependents"),
    csscomb = require("gulp-csscomb"),
    sourcemaps = require("gulp-sourcemaps"),
    rename = require("gulp-rename"),
    cleanCSS = require("gulp-clean-css"),
    gulpif = require("gulp-if"),
    concat = require("gulp-concat"),
    buffer = require("gulp-buffer"),
    postcss = require("gulp-postcss"),
    postcssLogical = require("postcss-logical"),
    postcssDirPseudoClass = require("postcss-dir-pseudo-class"),

var styleTasks = [] //array with variables for task below

    styleTasks.forEach((singleTask) =>
        $.gulp.task(singleTask.taskName, () => {
            let fileBase = singleTask.fileBase;
            let stream = $.gulp
            .src([fileBase + "**/*.{scss,map}"])
            .pipe(plumber())
            .pipe(
                scss({
                    outputStyle: "compressed",
                })
            )
            .pipe(
                autoprefixer({
                    overrideBrowserslist: ["last 3 versions"],
                })
            );

            if (singleTask.combineFiles === true) {
                stream = stream.pipe(concat(singleTask.concatFileName));
            }
            return stream
                .pipe(
                    postcss([
                        postcssLogical({}),
                        postcssDirPseudoClass(),
                        b2brokerFlexGapFixer(),
                    ])
                )
                .pipe(
                    $.gulp.dest(function (file) {
                        return fileBase.replace("src/assets", "assets/ltr");
                    })
                )
                .pipe($.browserSync.stream());
        })
    );

after all I just made a separate build folder for ltr and rtl. originally I wanted to build in the same folder with suffix -ltr, -rtl. but couldnt achieve that because of the above mentioned error