28

How to add another task to VSCode, that copies files from x to y, after the tsc build task?

MichaelS
  • 7,023
  • 10
  • 51
  • 75
  • 1
    Why not specify the `outDir` for your tsc task so no moving of files is required? – Brocco May 12 '15 at 13:03
  • 1
    I need the js files in both locations. 1 is under source control, the other is the server. + There are other, not ts output files like html/css that needs to be copied – MichaelS May 12 '15 at 13:07
  • Mabye a bit of late perhaps. Did you solve this problem? – Evelie Dec 08 '15 at 15:09
  • @Evelie: I moved to gulp as suggested – MichaelS Dec 10 '15 at 09:16
  • An answer using shell commands can be found here: https://stackoverflow.com/questions/43657839/how-to-chain-tasks-in-visual-studio-code-using-only-tasks-json/50241977#50241977 – pasx May 08 '18 at 20:43

4 Answers4

26

You can use npm scripts for this. For example my package.json:

"scripts": {
  "compile": "tsc -p . ",
  "html": "cp -r ./src/public/ ./bin/public/",
  "views": "cp -r ./src/views/ ./bin/views/",
  "build": "npm run compile && npm run views && npm run html"
}

Here 2 scripts html and views for copying and task build runs them concurrently. In tasks.json I have next:

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "silent",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": [
                "run",
                "build"
            ]
        }
    ]
}

So shift+cmd+B will run npm build script.

Iurii Perevertailo
  • 2,515
  • 2
  • 19
  • 12
10

You can use a task runner like gulp to accomplish this...

You can configure vscode to run the build task below, which is dependent upon the compile task.

var gulp = require('gulp'),
  exec = require('child_process').exec;

gulp.task('build', ['compile'], function () {
  return gulp.src('./config/**/*.json')
    .pipe(gulp.dest('./dist'));
});

gulp.task('compile', function (done) {
  exec('tsc -p ./app', function (err, stdOut, stdErr) {
    console.log(stdOut);
    if (err){
      done(err);
    } else {
      done();
    }
  });
});

There is documentation about running gulp tasks via vscode here: https://code.visualstudio.com/Docs/tasks

Brocco
  • 62,737
  • 12
  • 70
  • 76
4

If you're running in some kind of "developer mode" and need to --watch for file changes to run a task after every compile, I prefer using tsc-watch to accomplish this.

For example, in package.json:

{
  "scripts": {
    "dev": "tsc-watch --onSuccess=\"yarn otherThing\"",
    "otherThing": "echo \"hi\""
  }
}
daleyjem
  • 2,335
  • 1
  • 23
  • 34
  • Thanks a lot. I manage to do it. ```"scripts": { "serve": "npm run compile", "compile": "tsc-watch --onSuccess \"npm run dev\" --compiler /home/usrname/.nvm/versions/node/v12.13.1/bin/tsc", "dev": "nodemon ./dist" } ``` – Emmanuel Valdez Mar 07 '20 at 19:50
2

You can take any script name in package.json and prepend it with 'post' or 'pre'. So if you want it to run after a script named 'tsc', add a 'posttsc' command in scripts. https://docs.npmjs.com/cli/v9/using-npm/scripts

scottseeker
  • 64
  • 4