moss moss - 4 months ago 15
Javascript Question

Is there a way to dynamically set src and dest in gulpfile.js?

I have multiple sets of js modules that I would like to concat into separate files. I don't want to have to create a seperate concat task for each file. It would make more sense to be able to pass arguments into the gulp task "concat". Unfortunately gulp doesn't allow arguments to be passed into tasks(I'm sure for good reason).

Any ideas of how I can accomplish this?




Use Case



A specific scenario would be website that has a global.js file for all pages as well as page specific
js
files.

Creating a task for each page specific
js
file will quickly make the gulpfile.js hard to manage as the site grows.




My dev invironment:



I have a
dev/js/
directory which has multiple sub-directories. Each sub-directory contains modules for a specific js file. So each sub-directory needs to be concatenated into it's own file within
lib/js/
.




Perhaps requirejs?



Maybe I should just look into using a module loader like requirejs.

Answer

Note: You'd probably be better off using a bundler like browserify or webpack. Since asking this question I have switched to browserify rather than trying to roll my own solution.

Improved Solution:

var fs = require("fs");
/* other requires omitted */

/* Set JS dev directory in one place */
var jsSrc = "dev/js/";
var jsDest = "lib/js/";

var concat = function (path) {

      path     = path.replace(/\\/g, "/");
  var src      = path.replace(/(\/[^\/]+?\.js$)|(\/$)/, "/*.js";
  var filename = src.match(/\/([^\/]+?)(\/[^\/]+?\.js$)/)[1] + ".js";

  gulp.src(src)
      .pipe(concat(filename)
      .pipe(gulp.dest(jsDest));
});

/* The concat task just runs the concat function for
 * each directory in the javascript development directory.
 * It will take a performance hit, but allows concat to be
 * run as a dependency in a pinch.
 */
gulp.task("concat", function () {
  var dirArr = fs.readdirSync(jsDev);

  for (var d in dirArr) {
    var path = jsDev+dirArr[d]+"/";
    concat(path);
  }
});

/* Run "concat" as a dependency of the default task */
gulp.taks("default", ["concat"], function () {

  var JSWatcher = gulp.watch([jsSrc+"**/*.js"]);

  JSWatcher.on("change", function (event) {
    concat(event.path);
  });

});

Alright, I think this works. It's a little bit of a hack though, and doesn't work for all use cases.

... removed previous example to save space ...