How to use gulp-changed with gulp-typescript

Question

I'm integrating gulp-changed to prevent all files being logged to the console on change. This works for my HTML files, but I'm also using gulp-typescript to transpile my TypeScript files into JavaScript.

I use the TypeScript workflow as suggested by Dan Wahlin here.

So I implemented gulp-changed into gulp-typescript like so:

var res = gulp.src(config.src)
        .pipe($.sourcemaps.init())
        .pipe($.changed(config.dest)) // <-- THIS LINE IS WHAT I ADDED
        .pipe($.typescript({
            target: config.options.target,
            module: config.options.module,
            removeComments: true
        }));

    res.dts.pipe(gulp.dest(config.dest));

    return res.js
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest(config.dest));

My config object looks like this:

    "src": "./source/app/**/*.ts",
    "ignore": "!./source/**/*.d.ts",
    "options": {
        "target": "ES5",
        "module": "commonjs"
    },
    "lint": "prose",
    "dest": "./build/public/app"

Still, all files are being logged when I change a single file. I even tried to move the above mentioned line .pipe($.changed(config.dest)) right before the .pipe($.sourcemaps.write('.')) line.

Again, no luck.

Anyone knows how to fix this?

Answer 1

Your input files have a different extension than the output files. You need to use the extension option to enable gulp-changed to find the correct files to compare against:

.pipe($.changed(config.dest, {extension: '.js'}))