csssasstypescriptvisual-studio-codetranspiler

Using tasks.json in Visual Studio Code to transpile both typescript and sass


I want to transpile both typescript and sass to javascript and css respectively. At The moment running this tasks.json file transpiles my typescript to javascript:

{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    "command": "tsc",

    // The command is a shell script
    "isShellCommand": true,

    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",

    // args is the HelloWorld program to compile.
    "args": ["public/app/boot.ts"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

I only need to specify boot.ts and it transpiles all .ts files to js. It might be because my boot.ts file imports all my ts files. Here is my boot.ts file:

import {bootstrap}    from 'angular2/platform/browser'
import {HelloWorld} from './hello_world'
import {TodoApp} from './todo_app'
bootstrap(HelloWorld);
bootstrap(TodoApp);

I would like to add code into the tasks.json file that will transpile the sass to css.

Here is a code snippet of what I could do to only transpile my sass:

{
    "version": "0.1.0",
    "command": "node-sass",
    "isShellCommand": true,
    "args": ["styles.scss", "styles.css"]
}

How do I add that code snippet so that it transpiles both the sass and the typescript?

Also, Will I be wanting to add any new sass files to the args array in tasks.json as I create them?


Solution

  • you can't do this with the tsc command. use npm instead.

    package.json

    {
      "scripts": {
        "build": "tsc public/app/boot.ts && node-sass styles.scss styles.css"
      }
    }
    

    tasks.json

    {
        "version": "0.1.0",
        "command": "npm",
        "isShellCommand": true,
        "showOutput": "silent",
        "args": ["-s", "run"],
        "tasks": [{
          "taskName": "build",
          "problemMatcher": "$tsc",
          "isBuildCommand": true
        }]
    }