Using a function conditionally with gulp-if

Question

I'm trying to conditionally change the paths to JS files when in production. I'm using gulp-inject-string along with gulp-if to call a function that inserts my remote path + the parent folder name of a series of html files:

```
...(require a bunch of stuff here)...
var inject = require('gulp-inject-string');

function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

function injectAfterEach(src) {
    var folders = getFolders(config.root.dest);

    var tasks = folders.map(function(folder) {
        if (folder !== 'base') {
            var fullPath = path.join(config.remotePath, folder, '/');
            console.log('folder: ' + fullPath);
            return gulp.src(src)
                .pipe(inject.afterEach('<script src="', fullPath))
                .pipe(gulp.dest(config.tasks.html.dest))
        }
    });
    return tasks;
}

gulp.task('html', function() {

    return gulp.src(config.tasks.html.src)
        .pipe(gulpif(process.env.NODE_ENV == 'production', injectAfterEach(config.tasks.html.src) ))
        .pipe(gulpif(process.env.NODE_ENV == 'production', removeCode({ production: true })))
        .pipe(gulpif(process.env.NODE_ENV == 'production', htmlmin(config.tasks.html.htmlmin)))
        .pipe(gulp.dest(config.tasks.html.dest))
        .pipe(browserSync.stream());
});
```

I keep getting a "dest.on is not a function" error, which I guess is because my injectAfterEach isn't returning a stream.Transform object? Can someone clarify the best way to run that function conditionally? My gulp is a little shaky, but I tried to reference the api docs for this particular use case.

Answer 1

I think you want something like the following. I have simplified a few things so I could test it.

First point: your getFolders() function can be easily replaced with the glob.sync() see call glob options. Since you apparently want only the folders, your glob pattern for the glob call MUST end with a "/", i.e. a path.sep.

The key point here to return a stream is the use of gulp-merge which allows you to return a merged stream of each of the folders.map individual streams.

const gulp = require('gulp');
const path = require('path');
const merge = require('gulp-merge');
const gulpif = require('gulp-if');
const glob = require("glob");
const inject = require('gulp-inject-string');


function injectAfterEach(src) {

  const folders = glob.sync(src);
  console.log(folders);

  return merge(folders.map(function (folder) {

    console.log("folder basename = " + path.basename(folder));

    if (path.basename(folder) !== 'base') {

      let fullPath = path.join("RemotePath", path.sep, path.basename(folder), path.sep);
      console.log('fullPath: ' + fullPath);

        return gulp.src(path.join(folder, '*.html') )
            .pipe(inject.afterEach('<script src="', fullPath))
            .pipe(gulp.dest('dist'))
      }
  }));
}

gulp.task('default', function() {

  return gulp.src('./htmlFolder')

    .pipe(gulpif(true, injectAfterEach('./htmlFolders/**/')))

      // just commented out for testing
      // .pipe(gulpif(process.env.NODE_ENV == 'production', removeCode({ production: true })))
      // .pipe(gulpif(process.env.NODE_ENV == 'production', htmlmin(config.tasks.html.htmlmin)))
      .pipe(gulp.dest('dist'))
      // .pipe(browserSync.stream());
});