gulp is not recognising the typescript file changes without restart

Question

I have got gulp tasks in my project for building app. Here is one of my watch task, which is rebuilding the whole typescript changes if we modify any of the .ts file.

  gulp.watch([
    path.join(conf.paths.src, '/app/**/*.js'),
    path.join(conf.paths.src, '/app/**/*.ts'),
    path.join(conf.paths.root, './index.js'),
    path.join(conf.paths.root, './lib/**/*.*')
  ], function (event) {
      gulp.start('inject');
    }
  });

Below is my injection task, which actually compiles the requires files.

function injection() {
  var injectStyles = gulp.src([
    path.join(conf.paths.tmp, '/serve/app/**/*.css'),
    path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
  ], { read: false });

  var injectScripts = gulp.src([
    path.join(conf.paths.tmp, '/serve/environment.js'),
    path.join(conf.paths.src, '/app/**/*.module.js'),
    path.join(conf.paths.src, '/app/**/*.js'),
    path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
    path.join('!' + conf.paths.src, '/app/**/*.mock.js')
  ])
  .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'));

  var injectOptions = {
    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
    addRootSlash: false
  };

  return lazypipe()
    .pipe($.inject, injectStyles, injectOptions)
    .pipe($.inject, injectScripts, injectOptions)
    .pipe(wiredep, _.extend({}, conf.wiredep))();
};

gulp.task('inject', ['environment', 'scripts', 'styles'], function () {
  return gulp.src(path.join(conf.paths.src, '/*.html'))
    .pipe(wireapp({
      "hybridMode": conf.mode.hybrid,
      "compile": false
    }))
    .on('error', conf.errorHandler)
    .pipe(injection())
    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});

on change to typescript file those actions are getting executed but in application UI those are not getting reflected unless the server is restarted explicitly.