Compiling TypeScript for a specific folder to increase build performance

Posted on: 2017-04-11

If you are using Gulp to build your TypeScript you may use the default configuration that is used in a lot of website which is letter the tsconfig.json to handle what to include and having Gulp to use Gulp-TypeScript to read the tsconfig.json file. However, if you want to build just a portion of the TypeScript, let say a single folder, you will be out of luck.

So the idea is to not use this kind of configuration in tsconfig.json

{ 
  "compilerOptions": 
  { "sourceMap": true, 
  "target": "es6", 
  "module": "amd", 
  "outDir": "./deploy/output", 
  "types": [ "jquery", "requirejs", "lodash", "reflect-metadata" ], 
  "experimentalDecorators": true, 
  "emitDecoratorMetadata": true 
  }, 
  "include": [ "app/scripts/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ] 
} 

and not this task in Gulp task code:

gulp.task("build", () => { 
  const r = "./app/output"; 
  var compilationResults = tsProject.src() 
    .pipe(sourcemaps.init()) 
    .pipe(tsProject()); 
  compilationResults.dts.pipe(gulp.dest(r)); 
  return compilationResults.js 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(r)); 
}); 

But to use this tsconfig.json:

{ 
  "compilerOptions": { 
    "sourceMap": true, 
    "target": "es6", 
    "module": "amd", 
    "outDir": "./deploy/output", 
    "types": [ "jquery", "requirejs", "lodash", "reflect-metadata" ], 
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true 
    }, 
    "exclude": [ "node_modules", "**/*.spec.ts" ] 
} 

and this Gulp task code:

gulp.task("build", () => { 
  const outFolder = "./app/output"; 
  var compilationResults = gulp.src("app/scripts/**/*.ts") 
    .pipe(sourcemaps.init()) 
    .pipe(tsProject());
  compilationResults.dts.pipe(gulp.dest(outFolder)); 
  return compilationResults.js 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(outFolder)); 
}); 

The whole idea is that you can move the include files outside TypeScript configuration file, but inject the files from Gulp. So far, everything is build from the root of the app/script folder, but you could define a new task that take a sub folder like the following code:

gulp.task("buildgeneral", () => { 
  const outFolder = "deploy/output/general"; 
  var compilationResults = gulp.src("app/scripts/general/*.ts")
    .pipe(sourcemaps.init())
    .pipe(tsProject());
  compilationResults.dts.pipe(gulp.dest(outFolder)); 
  return compilationResults.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(outFolder)); 
}); 

This is very interesting if you have a project with thousand files. Instead of building the whole project every time, you can just build the file or the folder that the file reside.