gulp extname on Angularjs2 files with two dots

Question

Below gulp rename task works good for angularjs2 ts files with one dot, such as appcomponent.ts. However, if the file name has two dots like login.service.ts, gulp extname is confused and will take whatever after the first dot as the extension. Any idea how to let extname know the extension is after the last dot?

gulp.task('ts', function () {
  return gulp.src('src/**/*.ts')
    .pipe(rename({
      extname: ''
    }))
    .pipe(traceur({
      modules: 'instantiate',
      moduleName: true,
      annotations: true,
      types: true,
      memberVariables: true
    }))
    .pipe(rename({
      extname: '.js'
    }))
    .pipe(gulp.dest('build'));
});

Answer 1

gulp-rename does replace only the extension after the last dot. It uses path.extname() internally about which the documentation states:

Return the extension of the path, from the last '.' to end of string in the last portion of the path

Your problem are these three lines:

.pipe(rename({
  extname: ''
}))

Here you remove the .ts extension, so when you finally get to rename({extname: '.js'} the extension of your file is actually .service. Drop those three lines and your renaming works.