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

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?

Answers:

Answer

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

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.

Answer

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

tsc --build --clean

My 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

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.