How to delete compiled JS files from previous type

Question

I am following Angular 2 quick start tutorial. Following is my folder structure -

├── gulpfile.js
├── index.html
├── js
|   ├── app.component.js
|   └── boot.js
├── source
|   ├── app.component.ts
|   └── boot.ts
├── node_modules
    ├── module 1
    └── module 2

My typescript files are in source/ directory. I'm compiling it to js/ directory. I'm using gulp-typescript.

The problem is when I, for example, rename the file boot.ts to bootstrap.ts and compile again, corresponding bootstrap.js file is created but the old boot.js file still remains in the js/ directory.

Now the folder structure looks like following-

├── gulpfile.js
├── index.html
├── js
|   ├── app.component.js
|   └── bootstrap.js
|   └── boot.js
├── source
|   ├── app.component.ts
|   └── bootstrap.ts
├── node_modules
    ├── module 1
    └── module 2

I want to delete this boot.js autonomically via gulp task. How to achieve this?

Answer 1

I came here seeing the title, and adding gulp into the mix was not a solution. So here is how I solved it.

Prefix your npm build script with rm -rf js &&

"scripts": {
    ...
    "build": "rm -rf js/ && tsc",
    ...
},

Hope someone will find this useful.

Edit as suggested in the comments

As a more universal solution, use rimraf instead of rm -rf. rimraf is an npm module designed to work cross-platform (including windows). To make it work, first install it as a dev-dependency.

Answer 2

Install gulp del.

$ npm install --save-dev gulp del

Create the task.

var gulp = require('gulp');
var del = require('del');

gulp.task('clean:output', function () {
  return del([
    'js/'
  ]);
});

gulp.task('default', ['clean:output']);

You can find more info on gulp del here.