File monitoring system that automatically recompiles TypeScript files when changes are detected, providing a seamless development experience with fast incremental builds.
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;
}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 automaticallyWatch 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"
}
}
}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 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.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
}
}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 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 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";
}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";
}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";
}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
}
}
}