CODEWITHSUNDEEP
gulpgulp-watch
3gwebtrain
3gwebtrain

Reputation: 15303

Gulp.js - `watch` not working on `typescript` changes, but works for `html,css` changes

I am using gulp to compile my ts files in to js file. when i change the ts file alone, the watch is not updating the browser. But when i change the html or css file it working fine.

I understand that, something i am missing in my watch property here. anyone help me to find the mistake here please?

here is my code :

var gulp = require('gulp'),
    gulpTypescript = require('gulp-typescript')
    browserSync = require('browser-sync');


var scripts = {

    in : 'app/script/ts/*.*',
    dest : 'app/script/js/'

}


gulp.task('typeScript', function () {

    return gulp.src( scripts.in )
    .pipe( gulpTypescript() )
    .pipe( gulp.dest( scripts.dest ) );

});

gulp.task('browserSync', function () {

    browserSync({
    server: {
      baseDir: 'app'
    }
  })

})


gulp.task('default', ['typeScript', 'browserSync'], function () {

    gulp.watch([[scripts.in], ['typeScript']], browserSync.reload);
    gulp.watch( ['app/*.html', 'app/styles/*.css'], browserSync.reload);

});

Upvotes: 0

Views: 964

Answers (1)

Sven Schoenung
Sven Schoenung

Reputation: 30574

The possible method signatures for gulp.watch are:

gulp.watch(glob[, opts], tasks)
gulp.watch(glob[, opts, cb])

So what you're doing here makes no sense:

gulp.watch([[scripts.in], ['typeScript']], browserSync.reload);

That means you're passing 'typeScript' as part of the glob, when it is actually a task name.

Think about what you're trying to achieve:

  1. Whenever you change a TypeScript file in scripts.in you want your typeScript task to run, so your *.ts files get compiled to scripts.dest.
  2. Whenever a resulting *.js file in scripts.dest is changed you want the browserSync.reload callback to be executed.

So what you actually need is two different gulp.watch statements for those two steps of your TypeScript build process:

gulp.task('default', ['typeScript', 'browserSync'], function () {
  gulp.watch(scripts.in, ['typeScript']);               // 1st step
  gulp.watch(scripts.dest + '*.*', browserSync.reload); // 2nd step

  gulp.watch( ['app/*.html', 'app/styles/*.css'], browserSync.reload);
});

Upvotes: 2

Related Questions