ivogabe
commented
4 years ago gulp-typescript cannot work together with gulp-cached. We cannot change that, as gulp-cached will only pass the changed files to the compiler. This will probably cause that the changed files cannot be compiled as they use variables or classes defined in other files.
Instead, you should pass all files to gulp-typescript and let gulp-typescript handle incremental compilation. That is currently a bit limited, but we hope to improve that soon. To use incremental compilation, you must creata a tsProject as shown in the readme.
The initial build works great. In watch mode, rebuilds have type errors.
Expected behavior:
Hoping for it to work just like the first build, but subsequent builds in watch mode have many type errors, f.e.:
errors
``` /Users/trusktr/src/trusktr+infamous/src/components/layout/PushPaneLayout.ts(7,29): error TS7016: Could not find a declaration file for module 'tween.js'. '/Users/trusktr/src/trusktr+infamous/node_modules/tween.js/src/Tween.js' implicitly has an 'any' type. Try `npm install @types/tween.js` if it exists or add a new declaration (.d.ts) file containing `declare module 'tween.js';` /Users/trusktr/src/trusktr+infamous/src/components/layout/PushPaneLayout.ts(22,14): error TS2339: Property 'onStart' does not exist on type 'StatusTween'. /Users/trusktr/src/trusktr+infamous/src/components/layout/PushPaneLayout.ts(23,14): error TS2339: Property 'onStop' does not exist on type 'StatusTween'. /Users/trusktr/src/trusktr+infamous/src/components/layout/PushPaneLayout.ts(24,14): error TS2551: Property 'onComplete' does not exist on type 'StatusTween'. Did you mean 'completed'? /Users/trusktr/src/trusktr+infamous/src/components/layout/PushPaneLayout.ts(186,18): error TS2339: Property 'to' does not exist on type 'StatusTween'. /Users/trusktr/src/trusktr+infamous/src/core/Scene.ts(6,27): error TS7016: Could not find a declaration file for module '@awaitbox/document-ready'. '/Users/trusktr/src/trusktr+infamous/node_modules/@awaitbox/document-ready/src/index.js' implicitly has an 'any' type. Try `npm install @types/awaitbox__document-ready` if it exists or add a new declaration (.d.ts) file containing `declare module '@awaitbox/document-ready';` /Users/trusktr/src/trusktr+infamous/src/core/XYZValues.ts(2,15): error TS7016: Could not find a declaration file for module 'regexr'. '/Users/trusktr/src/trusktr+infamous/node_modules/regexr/index.js' implicitly has an 'any' type. Try `npm install @types/regexr` if it exists or add a new declaration (.d.ts) file containing `declare module 'regexr';` /Users/trusktr/src/trusktr+infamous/src/html/behaviors/BasicMaterialBehavior.ts(16,1): error TS2304: Cannot find name 'elementBehaviors'. /Users/trusktr/src/trusktr+infamous/src/html/behaviors/BoxGeometryBehavior.ts(15,1): error TS2304: Cannot find name 'elementBehaviors'. ```Actual behavior:
I get type errors on rebuilds. Only the initial build works fine without type errors.
Your gulpfile:
gulpfile
```js const gulp = require('gulp') const babel = require('gulp-babel') const cached = require('gulp-cached') const typescript = require('gulp-typescript') const mergeStream = require('merge-stream') const babelConfig = require('./babel.config') const tsConfig = require('./tsconfig.json') function transpile() { return mergeStream( gulp .src(['src/**/*.{js,jsx}', '!src/**/*test.{js,jsx}']) .pipe(cached('js')) // in watch mode, prevents rebuilding all files .pipe(babel(babelConfig)), gulp .src(['src/**/*.{ts,tsx}', '!src/**/*test.{ts,tsx}']) .pipe(cached('ts')) // in watch mode, prevents rebuilding all files .pipe(typescript(tsConfig.compilerOptions)) .pipe(babel(babelConfig)) ) } function watch(task) { return gulp.watch( ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*test.{js,jsx,ts,tsx}'], { ignoreInitial: false }, gulp.parallel(task) ) } gulp.task('build-cjs', () => transpile() .pipe( babel({ plugins: [ '@babel/plugin-transform-modules-commonjs', 'babel-plugin-add-module-exports', ], }) ) // TODO source maps .pipe(gulp.dest('./')) ) gulp.task('watch-cjs', () => watch('build-cjs')) gulp.task('build-amd', () => transpile() .pipe( babel({ plugins: ['@babel/plugin-transform-modules-amd'], }) ) // TODO source maps .pipe(gulp.dest('./')) ) gulp.task('watch-amd', () => watch('build-amd')) gulp.task('build-umd', () => transpile() .pipe( babel({ plugins: [ // opposite order from build-cjs 'babel-plugin-add-module-exports', '@babel/plugin-transform-modules-umd', ], }) ) // TODO source maps .pipe(gulp.dest('./')) ) gulp.task('watch-umd', () => watch('build-umd')) ```tsconfig.json (where I'm pulling compilerOptions from)
tsconfig
```json { "compilerOptions": { "allowJs": true, "checkJs": false, "allowSyntheticDefaultImports": false, "esModuleInterop": false, "alwaysStrict": true, "strict": true, "baseUrl": "./src", "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "forceConsistentCasingInFileNames": true, "jsx": "react", "lib": ["es2018", "dom"], "module": "es2015", "moduleResolution": "node", "noFallthroughCasesInSwitch": true, "noImplicitReturns": false, "noImplicitAny": true, "noImplicitThis": true, "noUnusedLocals": true, "noUnusedParameters": true, "outDir": "./dist/out", "preserveConstEnums": true, "pretty": true, "sourceMap": true, "strictNullChecks": true, "strictFunctionTypes": true, "target": "es2018", "skipLibCheck": false, "paths": { "*": ["*"] } }, "compileOnSave": false, "include": ["../../../src/**/*", "../../../tests/**/*"] } ```Code
Code doesn't matter. The initial build works great. Then it enters watch mode. Once I change a file, then it gives type errors.
Am I doing it wrong? How should I do watch mode? Maybe I'm doing watch mode wrong as far as gulp-typescript goes.