or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

compilation.mdfast-compilation.mdhtml-processing.mdindex.mdtransforms.mdtsconfig.mdvisual-studio.mdwatch-mode.md
tile.json

watch-mode.mddocs/

Watch Mode

File monitoring system that automatically recompiles TypeScript files when changes are detected, providing a seamless development experience with fast incremental builds.

Capabilities

Watch Configuration

Enable file watching for automatic recompilation on file changes.

/**
 * Watch mode configuration
 */
interface WatchConfiguration {
  /** Directory or directories to watch for changes */
  watch: string;
  /** Fast compilation mode (affects watch behavior) */
  fast?: "never" | "always" | "watch";
}

// Usage in target configuration
interface WatchTarget {
  /** Directory to watch (all subdirectories included automatically) */
  watch: string;
  /** Other target options work normally with watch */
  src?: string[];
  outDir?: string;
  options?: ITaskOptions;
}

Basic Watch Setup

Simple watch configuration for development workflows.

interface BasicWatchSetup {
  /** Watch current directory and all subdirectories */
  watchPath: "." | string;
  /** Automatic TypeScript and HTML file detection */
  fileTypes: [".ts", ".html"];
  /** Chokidar-based file monitoring */
  watchImplementation: "chokidar";
}

Basic Usage Example:

grunt.initConfig({
  ts: {
    dev: {
      src: ["src/**/*.ts"],
      outDir: "built/",
      watch: ".",  // Watch current directory and subdirectories
      options: {
        target: "es5",
        module: "commonjs",
        sourceMap: true
      }
    }
  }
});

// Run: grunt ts:dev
// Will compile initially, then watch for changes and recompile automatically

Watch Integration with Fast Compilation

Watch mode works optimally with fast compilation for improved performance.

interface WatchFastIntegration {
  /** Fast compilation is enabled by default in watch mode */
  defaultFastMode: "watch";
  /** Only changed files are compiled when possible */
  incrementalCompilation: boolean;
  /** Cache is maintained between watch compilations */
  cachePreservation: boolean;
  /** File change detection triggers cache refresh */
  cacheInvalidation: "on-file-change";
}

Watch with Fast Compilation:

ts: {
  watchWithFast: {
    src: ["src/**/*.ts"],
    outDir: "built/",
    watch: "src/", // Watch source directory only
    options: {
      fast: "watch", // Default when watch is enabled
      target: "es5"
    }
  }
}

File Change Detection

Understanding what triggers recompilation in watch mode.

interface FileChangeDetection {
  /** File events that trigger recompilation */
  watchEvents: ["add", "change", "unlink"];
  /** File types monitored for changes */
  monitoredTypes: [".ts", ".html"];
  /** Debouncing prevents rapid successive compilations */
  debouncing: "100ms-minimum-interval";
  /** Directory changes are handled automatically */
  directoryHandling: "automatic";
}

// Internal event handling
interface WatchEventHandling {
  add: "file-added-event";
  change: "file-modified-event";  
  unlink: "file-deleted-event";
  error: "watch-error-event";
}

Watch Output and Logging

Watch mode provides detailed logging of file changes and compilation results.

interface WatchLogging {
  /** File change events are logged with timestamps */
  changeLogging: "timestamped-file-events";
  /** Compilation results are shown for each watch trigger */
  compilationLogging: "full-compilation-output";
  /** Fast compilation shows which files changed */
  fastCompileLogging: "changed-files-highlighted";
}

Watch Output Example:

Watching all TypeScript / Html files under : /project/src
TypeScript compilation complete: 1.23s for 15 TypeScript files.

### changed  >> src/app.ts
### Fast Compile >> src/app.ts
### Fast Compile >> src/utils.ts  
TypeScript compilation complete: 0.45s for 2 TypeScript files.

+++ added    >> src/new-module.ts
### Fast Compile >> src/new-module.ts
TypeScript compilation complete: 0.12s for 1 TypeScript files.

--- removed  >> src/old-module.ts
TypeScript compilation complete: 0.89s for 14 TypeScript files.

Watch Path Configuration

Flexible path specification for watching different directories.

interface WatchPathOptions {
  /** Single directory path */
  singlePath: string;
  /** Supports glob expansion for multiple paths */
  globSupport: boolean;
  /** Relative paths resolved from Gruntfile.js location */
  pathResolution: "relative-to-gruntfile";
  /** Automatic subdirectory inclusion */
  recursiveWatching: "automatic";
}

Path Configuration Examples:

// Watch specific directory
ts: {
  watchSrc: {
    src: ["src/**/*.ts"],
    watch: "src/"
  }
}

// Watch multiple directories (using grunt file expansion)
ts: {
  watchMultiple: {
    src: ["src/**/*.ts"],
    watch: "{src,lib,vendor}/"  // Expands to multiple watch paths
  }
}

// Watch parent directory  
ts: {
  watchAll: {
    src: ["**/*.ts", "!node_modules/**"],
    watch: "."  // Watch entire project
  }
}

Integration with Other Features

Watch mode works seamlessly with all grunt-ts features.

interface WatchFeatureIntegration {
  /** HTML processing triggers on .html file changes */
  htmlProcessing: "automatic-on-html-changes";
  /** Transforms are reprocessed when files change */
  transforms: "reprocessed-on-change";
  /** Reference files updated when structure changes */
  referenceFiles: "updated-on-file-structure-changes";
  /** Template cache regenerated on template changes */
  templateCache: "regenerated-on-template-changes";
}

Full Integration Example:

ts: {
  fullWatch: {
    src: ["src/**/*.ts"],
    html: ["templates/**/*.html"],
    reference: "src/references.ts",
    outDir: "built/",
    watch: ".",
    options: {
      target: "es5",
      module: "amd",
      htmlModuleTemplate: "Templates.<%= filename %>",
      fast: "watch"
    }
  }
}

Watch Error Handling

Watch mode includes robust error handling for file system events.

interface WatchErrorHandling {
  /** File system errors are caught and logged */
  fileSystemErrors: "caught-and-logged";
  /** Watch continues running after compilation errors */
  compilationErrorRecovery: "continues-watching";
  /** Chokidar errors are handled gracefully */
  chokidarErrors: "graceful-handling";
  /** Watch can be interrupted with Ctrl+C */
  interruptSupport: "ctrl-c-handling";
}

Watch Performance

Watch mode is optimized for performance with large codebases.

interface WatchPerformance {
  /** Fast compilation reduces watch recompile times */
  fastCompilation: "default-enabled";
  /** File change debouncing prevents excessive recompilation */
  debouncing: "100ms-debounce";
  /** Only relevant files trigger recompilation */
  selectiveRecompilation: ".ts-and-.html-only";
  /** Cache preservation between watch cycles */
  cacheEfficiency: "persistent-between-changes";
}

Watch Limitations

Important limitations and considerations for watch mode.

interface WatchLimitations {
  /** Watch runs indefinitely until manually stopped */
  continuousExecution: "until-interrupted";
  /** Cannot run other grunt tasks after watch starts */
  taskBlocking: "blocks-subsequent-tasks";
  /** Watch is not compatible with grunt-contrib-watch */
  watchConflicts: "use-one-or-other";
  /** File system permissions may affect watching */
  permissionRequirements: "read-access-required";
}

Stopping Watch Mode

How to properly stop watch mode execution.

interface WatchTermination {
  /** Keyboard interrupt stops watch gracefully */
  keyboardInterrupt: "ctrl-c";
  /** Process termination stops watch */
  processTermination: "sigterm-sigint";
  /** No automatic stop conditions */
  automaticStop: "none";
}

Watch vs grunt-contrib-watch

Differences between grunt-ts watch and grunt-contrib-watch.

interface WatchComparison {
  /** grunt-ts watch: Built-in, optimized for TypeScript */
  gruntTSWatch: {
    integration: "built-in";
    optimization: "typescript-specific";
    features: "fast-compilation-cache";
    taskChaining: "not-supported";
  };
  
  /** grunt-contrib-watch: External, general-purpose */
  gruntContribWatch: {
    integration: "external-plugin";
    optimization: "general-purpose";
    features: "task-chaining-livereload";
    typescript: "runs-full-grunt-ts-task";
  };
}

grunt-contrib-watch Alternative:

// Instead of grunt-ts watch
ts: {
  dev: {
    src: ["src/**/*.ts"],
    watch: "." // grunt-ts built-in watch
  }
}

// Use grunt-contrib-watch for more control
watch: {
  typescript: {
    files: ["src/**/*.ts"],
    tasks: ["ts:dev"]
  }
},
ts: {
  dev: {
    src: ["src/**/*.ts"],
    // No watch option - controlled by grunt-contrib-watch
    options: {
      fast: "always" // Enable fast for grunt-contrib-watch
    }
  }
}