How to automate functional programing, and avoid repeating myself

Question

Within my gulpfile.js I have the following two functions that are making use of rendering gulp-nun-jucks for 2 different views...

function genNunJucks(cb) {
    return src(paths.views.src)
        .pipe(nunjucksRender({
            path: ['src/views/'], // String or Array
            ext: '.html',
            inheritExtension: false,
            envOptions: {
                watch: true
            },
            manageEnv: manageEnvironment,
            loaders: null
        }))
        .pipe(htmlbeautify({
            indentSize: 2,
            "eol": "\n",
            "indent_level": 0,
            "preserve_newlines": false
        }))
        .pipe(dest(paths.views.dest))
    cb();
}

function genNunJucks2(cb) {
    return src(paths.views.src2)
        .pipe(nunjucksRender({
            path: ['src/views/'], // String or Array
            ext: '.html',
            inheritExtension: false,
            envOptions: {
                watch: true
            },
            manageEnv: manageEnvironment,
            loaders: null
        }))
        .pipe(htmlbeautify({
            indentSize: 2,
            "eol": "\n",
            "indent_level": 0,
            "preserve_newlines": false
        }))
        .pipe(dest(paths.views.dest2))
    cb();
}

When it comes to working within the return area of gulp processes, how can I combine these two functions to be one function that does the same job? You will notice that my path.views.src(x) is the reason I am doing duplicating the process.

Perhaps there is there some kind of lopping process that I can apply that looks through a full array of paths.views.src:['','','']?

Many thanks on any tips

Answer 1

You can make use of closures and a form of currying for this, and create a function that gets src as parameter and returns the genNunJucks that you want to use:

function createGenNumChunksFunction(src) {
  return function genNunJucks(cb) {
    return src(src)
      .pipe(nunjucksRender({
        path: ['src/views/'], // String or Array
        ext: '.html',
        inheritExtension: false,
        envOptions: {
          watch: true
        },
        manageEnv: manageEnvironment,
        loaders: null
      }))
      .pipe(htmlbeautify({
        indentSize: 2,
        "eol": "\n",
        "indent_level": 0,
        "preserve_newlines": false
      }))
      .pipe(dest(paths.views.dest))
    cb();
  }
}

And instead of passing genNunJucks at the place where you use it right now you can pass createGenNumChunksFunction(paths.views.src) and createGenNumChunksFunction(paths.views.src2)

Here is a simplified version that can be executed in the snipped and illustrates how it works:

function createGenNumChunksFunction(src) {
  return function genNunJucks() {
    console.log(src)
  }
}

function callPassedFunction(cb) {
  console.log('function will be called')
  cb();
}


callPassedFunction(createGenNumChunksFunction('src1'))
callPassedFunction(createGenNumChunksFunction('src2'))

An additional note - which is probably not relevant for your case - if you want to use the genNunJucks directly without the need to "create" it first, you could keep it outside of the createGenNumChunksFunction.

function genNunJucks(src) {
  console.log(src)
}

function createGenNumChunksFunction(src) {
  return function() {
    return genNunJucks(src)
  }
}

function callPassedFunction(cb) {
  console.log('function will be called')
  cb();
}


callPassedFunction(createGenNumChunksFunction('src1'))
callPassedFunction(createGenNumChunksFunction('src2'))
genNunJucks('src3')