How to delete compiled JS files from previous typescript(.ts) files?

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?

Solution 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",
    ...
},

rm -rf ./js/ forcefully removes recursively all files and dirs below ./js/ doku rm in bash

&& says, if successful do the next command && in bash

Title at the time of answering: "How to delete compiled JS files from previous typescript(.ts) files?"

Solution 2

with the latest tsc, you should be fine to do the clean with below command

tsc --build --clean

My current tsc version for your reference

$ tsc --version
Version 3.5.3

Note that --clean flag is part of project-references and works only with it.

Solution 3

This solution is inspired in @Akash Kurian Jose's answer. Since his solution depends on the OS you're using, I'm adding this one which will work on any OS:

Add rimraf as a dev dependency:

"devDependencies": {
   "rimraf": "^3.0.1"
}

Then add these 3 scripts to your package.json:

"rimraf": "./node_modules/rimraf/bin.js",
"clean" : "rimraf js/",
"compile": "npm run clean && tsc -p ./"

When executing npm run compile the js/ folder will be cleaned before compiling.

Solution 4

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.

Solution 5

This solution is an improvement on GabrielBB solution.

Install rimraf npm i rimraf -D

Add the following npm scripts

"clean": "rimraf js/",
"prebuild": "npm run clean",
"build": "tsc",

This makes use of npms automatic Pre scripts

View more solutions

Comments

[samthecodingman]

If you are unlucky enough to be using a windows dev environment, you can also use rm if you add cash-rm as a dev dependency. Similarly, you can use rimraf (aptly named for rm -rf) instead if saved as a dev dependency.

[Jeremy Thille]

@samthecodingman For the record, I am a Windows developer by choice :) I have tried Mac and Linux, I really don't feel at home on either of them. I just don't like them, even MacOS. Everything is smooth (for me, at least) in Windows, no matter how bad most developers seem to hate it.

[Rupesh Kumar Tiwari]

rimraf is for windows machine. "prebuild":"rimraf dist", "build": "tsc -p tsconfig.release.json",

[Elias]

Nope, does not work. At least not for me. tsc --version: Version 3.5.3 and tsc --build --clean does not do what is asked.

[BMW]

i did it as daily task, not sure why it doesn't work in your environment, any details for your issue?

[Felix K.]

cannot see that "--clean" is part of the compiler options. typescriptlang.org/docs/handbook/compiler-options.html

[BMW]

Seems it is hide option? did you try with it in your environment?

[ZiiMakc]

@Elias --clean flag is part of project-references and works only with it.

[Lazarus Rising]

Works also for server-side projects and projects that are not using gulp.

[seeker_of_bacon]

I've always wondered, why add another package rimraf when rm -rf is a faster native alternative present literally everywhere?

[GabrielBB]

@seeker_of_bacon because it doesn’t work when using Windows

[Aure77]

--clean doesn't clean all outDir (deleted TS files remain compiled in outDir, but not cleaned...)

[zippycoder]

Upvote for clear answer, but also for enlightening me about pre scripts - thanks!

[Xanlantos]

This seems to be MUCH more complicated than stackoverflow.com/a/42838151/4693430. Why do you recommend this anyway?

[toskv]

because at the time I didn't know better. I agree that the other solution is a lot simpler and better. It's up to the OP to change the accepted answer to that one. I hope he does. :)

[Jayem]

DO NOT RUN THIS. This command deleted all my files

[Vsevolod Golovanov]

Even if you have Cygwin, for some reason rimrar node_modules is faster than rm -rf .\node_modules according to my tests.