0

Here is a code snippet from a gulp file. I'd like to understand passing of argument "file" to internal functions. More importantly, I'd like to understand this idiom because I see it often in Javascript. My guess is that "tsResult.js" iterates through various javascript files in this Typescript project and the "file" argument is each such file. How can I decipher such usage below and in future

gulp.task('scripts', ['clean'], () => {
const tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject());
  return tsResult.js.pipe(sourcemaps.write({
    includeContent: false,
    sourceRoot: function (file) {
      return path.relative(path.dirname(file.path), file.base);
    }
  }))
    .pipe(gulp.dest(OUTPUT_FOLDER));
});
Forumer
  • 45
  • 1
  • 6

1 Answers1

0

Many JS libraries make heavy use of a design pattern called Dependency Injection.

Basically, gulp-sourcemaps is giving you the option of overriding how the source root (the root URL where the file is located) is determined.

From the gulp-sourcemaps documentation:

Set the location where the source files are hosted (use this when includeContent is set to false). This is usually a URL (or an absolute URL path), not a local file system path. By default the source root is '' or in case destPath is set, the relative path from the source map to the source base directory (this should work for many dev environments). If a relative path is used (empty string or one starting with a .), it is interpreted as a path relative to the destination. The plugin rewrites it to a path relative to each source map.

The sourceRoot function is called, passing in the file that is currently being processed, and is expected to return the root path.

JDB
  • 25,172
  • 5
  • 72
  • 123
  • Is it the "pipe" function that passes this argument implicitly? If so, will I be able to see it in its documentation? I haven't been able to so far. Is it like the "foreach" function passes in each element? I'd like to understand this so I can leverage this in functions I create. – Forumer Feb 20 '18 at 21:56
  • The sourcemaps.write function calls your sourceRoot function. – JDB Feb 20 '18 at 22:54
  • I'm still unclear on what is the mechanism that passes each file into sourcemaps which, in fact, takes three arguments: "data", "enc", "callback". How does sourcemap get all these arguments? – Forumer Feb 21 '18 at 20:37
  • I can't really explain all of gulp to you. It's too big and trying to explain it one little question at a time is going to take forever. I recommend you read the documentation, or [one of the many helpful books](http://shop.oreilly.com/product/9781784395766.do). Also, this answer might be helpful: https://stackoverflow.com/a/38404984/211627 – JDB Feb 21 '18 at 20:52
  • My question is not about Gulp but about how arguments are passed. I just happened to find the code as an example, against which I could ask my question, from Gulp. My background is in languages, like Java, where arguments to methods are explicitly defined. In Javascript, the arguments seem to appear from nowhere! – Forumer Feb 21 '18 at 22:49
  • Ah... Well, then you need to study Javascript. It's pretty typical syntax. – JDB Feb 21 '18 at 23:10