Menu
I'm trying to make gulp compile and watch TypeScript files. This is what I have got so far
var tsProject = plugins.typescript.createProject(
{
removeComments: false,
target: 'ES5',
module: 'amd',
noExternalResolve: false,
noImplicitAny: false,
});
var typescriptGlob = [
presentationScriptsDir + '**/*.ts',
definitelyTypedDefinitions
];
gulp.task("compile-typescript", function () {
return gulp.src(typescriptGlob)
.pipe(plugins.typescript(tsProject))
.pipe(gulp.dest(presentationScriptsDir));
});
gulp.task("watch-typescript", function() {
return gulp.watch(typescriptGlob, ["compile-typescript"]);
});
I am using gulp-typescript.
However, since we have hundreds of TypeScript files I don't want to recompile all files every time one of them changes. The code above does that (I can tell because watch-typescript takes at least as much time as the compile-typescript)
I have tried using gulp-changed, like this
gulp.task("compile-typescript", function () {
return gulp.src(typescriptGlob)
.pipe(plugins.changed(presentationScriptsDir, {extension: '.js'}))
.pipe(plugins.typescript(tsProject))
.pipe(gulp.dest(presentationScriptsDir));
});
That indeed filters out unchanged files. But then the typescript compiler reports errors since it only gets a single file, which lacks type declarations that it normally gets from other files.
I do not want to set the noExternalResolve flag to true, since then a lot of type checking will not be done, which defeats a lot of the reason for using TypeScript in the first place.
How can I write this gulpfile better?
966
You can find the complete code for tsconfig. json below. Another way of automating the TypeScript compilation is by using command line interface or the Command Prompt. The second way is pretty simple to achieve; we just need to write a single line to watch any changes in our TypeScript file.
A gulp plugin for handling TypeScript compilation workflow. The plugin exposes TypeScript's compiler options to gulp using TypeScript API. This plugin works best with gulp 4.
In order to compile Typescript files with Gulp, you need to install these plugins: npm install gulp-typescript –save npm install gulp-sourcemaps –save The first plugin is to compile Typescript and generate Javascript files; the second one is the plugin for Sourcemaps.
A gulpfile is a file in your project directory titled gulpfile.js (or capitalized as Gulpfile.js, like Makefile), that automatically loads when you run the gulp command. Within this file, you'll often see gulp APIs, like src(), dest(), series(), or parallel() but any vanilla JavaScript or Node modules can be used.
First install gulp-cli globally (if you use a Unix system, you may need to prefix the npm install commands in this guide with sudo ). Then install typescript, gulp and gulp-typescript in your project’s dev dependencies. Gulp-typescript is a gulp plugin for TypeScript. Let’s write a Hello World program. In src, create the file main.ts:
This creates the following Gulp tasks: gen-ts-refs: Adds all of your TypeScript file paths into a file named typescriptApp.d.ts. This file will be used to support code help in some editors as well as aid with compilation of TypeScript files.
The TypeScript compiler does not go through the separate compile and link phases like most language compilers do. So, it really can't accomplish incremental compilation.
Like you said, to get the type-checking, the compiler needs to load and at least re-parse all of the files that might be referenced.
What we have done in our project is to use Visual Studio's support to "Compile on save" which will generate the .js files for us while we're developing and debugging. (Apparently that mechanism uses the noExternalResolve feature). Then we rely on our unit test process and continuous integration server to run a regular TypeScript compile to get all the syntax and typing errors.
So I'd suggest to run your watch with the noExternalResolve flag but also include a step in your workflow to run the full TypeScript compile at important points. Maybe you can specify a certain "root" file that starts a full compile when it's changed, or maybe you can find some other event that occurs not-too-frequently which you can use to trigger a regular compile.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
