What does the "js" method do on gulp (for Typescript project using gulp-typescript)

Question

I'm in the process of defining a seed node.js based server project for Typescript using Gulp and Mocha and am looking at the example at: https://www.typescriptlang.org/docs/handbook/gulp.html.

A gulpfile has been defined with the following code:

var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("default", function () {
  return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest("dist"));
});

I know that this code compiles Typescript into javascript and places the resulting files in the "dist" folder. However, I would like to break this code down and understand what is happening at every point (I'm not sure which exact bit of code invokes the Typescript compiler).

1) So, which part of the code invokes the compiler?

2) What does the .js call do? (I'm guessing this is the call to invoke typescript compilation, but I don't know).

The problem I find with the gulp documentation is that its not very comprehensive. I would like to find the documentation for all of the api methods (eg, "src", "js", "createProject", "pipe" etc). And the documentation on gulp-typescript on https://www.npmjs.com/package/gulp-typescript provides you with code snippets without explaining the details.

I have already watched the video at https://gulpjs.org by markgdyr, but the other videos are for browser projects, which I'm not interested in, thanks.

Answer 1

Piping your source files through the TypeScript project tsProject you created executes the compile step.

This produces an object containing a set of JavaScript files js, and a set of TypeScript definition files dts. In this case, you are accessing the JavaScript files via .js and saving them in the output folder via gulp.dest.

js is not a function, but a simple property access.

---

More info in the gulp-typescript docs.