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?

Answer 1

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.

Answer 2

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?"

Answer 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.

Answer 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.

Answer 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

Answer 6

Windows users can add the following prebuild script on package.json - a batch cmd script - which will run automatically before build command, just as @Llewellyn Collins stated:

package.json:

{
  "scripts": {
    "prebuild": "if exist <outDir> (rmdir /Q /S <outDir>)",
    "build": "tsc"
  },
}

Replace "<outDir>" with the actual outDir declared in your tsconfig.json.

If you omit the if exist command, it will throw an error.

It should run correctly even if your main terminal application is PowerShell.

Answer 7

I use script from here.

In package.json add script:

"build": "node jsDelete.js && npx tsc -w"

And add jsDelete.js:

const fs = require('fs');
const Path = require('path');

const deleteFolderRecursive = function(path) {
  if (fs.existsSync(path)) {
    fs.readdirSync(path).forEach((file, index) => {
      const curPath = Path.join(path, file);
      if (fs.lstatSync(curPath).isDirectory()) { // recurse
        deleteFolderRecursive(curPath);
      } else { // delete file
        fs.unlinkSync(curPath);
      }
    });
    fs.rmdirSync(path);
  }
};

deleteFolderRecursive('path_to_folder')

Answer 8

Just if someone will come across this question: I was trying to use tsc --build --clean but sometimes if you renamed a lot of .ts files this command is working on mac:

to delete .js files if you renamed a lot of .ts (this is for Mac users):

find . -name '*.js' ! -path './node_modules/*' -delete

if declaration: true in your tsconfig file you may want to:

find . -name '*.d.ts' ! -path './node_modules/*' -delete

don't forget to git commit before deleting files

Answer 9

Hack using Git and Bash

git add . && git stash &&  find . \\( -name '*.js' -o -name '*.js.map' \\) ! -path './node_modules/*' -delete  && git restore . && git stash pop

Answer 10

simple move to ur src file and the run the remove file with this pattern

cd src
rm -rf */**/*.js

Answer 11

You can run: tsc -b YOUR_ENTRYPOINT_LIST --clean as mentioned here.

Example:

tsc -b src test --clean will build src and test directories according to their respective tsconfig.json and then clean (remove) the generated .js files.

You could have a main tsconfig.json and simply use {extend: "path_to_main_tsconfig"} in each of the subfolder config files.

Suggestion:

Before running this command, try it with --dry to see what will happen.