Skip binary files in a gulp task

Question

I'm trying to use gulp-if and gulp-is-binary in order to skip over binary files in a my HTML task, but I'm having a lot of trouble.

I've got this task:

// html task, converts includes & variables in HTML
gulp.task("html", function () {
    "use strict";

    // development HTML directory
    var htmlDirectory = dev;

    // production HTML directory (if --dist is passed)
    if (argv.dist) htmlDirectory = dist;

    // clean directory if --dist is passed
    if (argv.dist) del([htmlDirectory + "/**/*", "!" + htmlDirectory + "{/assets,/assets/**}"]);

    // process HTML
    return gulp.src([src + "/**/*", "!" + src + "{/assets,/assets/**}"])
        // prevent breaking on error
        .pipe(plumber({errorHandler: onError}))
        // check if source is newer than destination
        .pipe(gulpif(!argv.dist, newer({dest: htmlDirectory, extra: [src + "{/partials,/partials/**}"]})))
        // check if a file is a binary
        .pipe(gulpif(isBinary(), function () { /* somehow skip? */ } ))
        // replace variables
        .pipe(fileinclude({
            prefix: "@@",
            basepath: "@file",
            context: {
                name: name,
                description: description,
                version: version,
                repository: repository,
                license: license,
            }
        }))
        // replace FontAwesome placeholders
        .pipe(replace(/(?:<icon:)([A-Za-z0-9\-\_]+)[^>]*(?:>)/g, "<i class='fa fa-$1' aria-hidden='true'><\/i>"))
        // output to the compiled directory
        .pipe(gulp.dest(htmlDirectory))
        // reload the files
        .pipe(browserSync.reload({stream: true}))
        // notify that the task is complete, if not part of default or watch
        .pipe(gulpif(gulp.seq.indexOf("html") > gulp.seq.indexOf("default"), notify({title: "Success!", message: "HTML task complete!", onLast: true})))
        // push the task to the ranTasks array
        .on("data", function() {
            if (ranTasks.indexOf("html") < 0) ranTasks.push("html");
        });
});

This is the line I'm having trouble with:

.pipe(gulpif(isBinary(), function () { /* somehow skip? */ } ))

I can't figure out how to tell Gulp to skip that file and continue the rest of the task. I feel like I'm missing something simple.

Answer 1

After a ton of research, experimenting, and a some help from the developer of gulp-is-binary, I figured this out. My task is below:

// html task, copies binaries, converts includes & variables in HTML
gulp.task("html", function () {
    "use strict";

    // development HTML directory
    var htmlDirectory = dev;

    // production HTML directory (if --dist is passed)
    if (argv.dist) htmlDirectory = dist;

    // clean directory if --dist is passed
    if (argv.dist) del([htmlDirectory + "/**/*", "!" + htmlDirectory + "{/assets,/assets/**}"]);

    // copy binaries
    var binaries = gulp.src([src + "/**/*", "!" + src + "{/assets,/assets/**}"])
        // prevent breaking on error
        .pipe(plumber({errorHandler: onError}))
        // check if source is newer than destination
        .pipe(gulpif(!argv.dist, newer({dest: htmlDirectory, extra: [src + "/**/*", "!" + src + "{/assets,/assets/**}"]})))
        // check if a file is a binary
        .pipe(isBinary())
        // skip the file if it's not a binary
        .pipe(through.obj(function(file, enc, next) {
            if (!file.isBinary()) {
                next();
                return;
            }

            next(null, file);
        }))
        // output to the compiled directory
        .pipe(gulp.dest(htmlDirectory));

    // process HTML
    var html = gulp.src([src + "/**/*", "!" + src + "{/assets,/assets/**}"])
        // prevent breaking on error
        .pipe(plumber({errorHandler: onError}))
        // check if source is newer than destination
        .pipe(gulpif(!argv.dist, newer({dest: htmlDirectory, extra: [src + "/**/*", "!" + src + "{/assets,/assets/**}"]})))
        // check if a file is a binary
        .pipe(isBinary())
        // skip the file if it's a binary
        .pipe(through.obj(function(file, enc, next) {
            if (file.isBinary()) {
                next();
                return;
            }

            next(null, file);
        }))
        // replace variables
        .pipe(fileinclude({
            prefix: "@@",
            basepath: "@file",
            context: {
                name: name,
                description: description,
                version: version,
                repository: repository,
                license: license,
            }
        }))
        // replace icon placeholders
        .pipe(replace(/(?:<icon:)([A-Za-z0-9\-\_][^:>]+)(?:\:([A-Za-z0-9\-\_\ ][^:>]*))?(?:>)/g, "<i class='icon'><svg class='icon_svg $2' aria-hidden='true'><use xlink:href='#$1' \/><\/svg></i>"))
        // output to the compiled directory
        .pipe(gulp.dest(htmlDirectory));

    // merge both steams back in to one
    return merge(binaries, html)
        // prevent breaking on error
        .pipe(plumber({errorHandler: onError}))
        // reload the files
        .pipe(browserSync.reload({stream: true}))
        // notify that the task is complete, if not part of default or watch
        .pipe(gulpif(gulp.seq.indexOf("html") > gulp.seq.indexOf("default"), notify({title: "Success!", message: "HTML task complete!", onLast: true})))
        // push the task to the ranTasks array
        .on("data", function() {
            if (ranTasks.indexOf("html") < 0) ranTasks.push("html");
        });
});

The full gulpfile can be found here:

https://github.com/JacobDB/new-site/blob/2d510e33863d25a99de4fe350bf9a181aefa3761/gulpfile.js