css - Uso de tasks.json en Visual Studio Code para transpilar tanto TypeScript como Sass

Quiero transpilar tanto TypeScript como Sass a JavaScript y CSS respectivamente. En este momento, ejecutar este archivo tasks.json transpila mi TypeScript a 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"
}

Solo necesito especificar boot.ts y transpila todos los archivos .ts a js. Podría ser porque mi archivo boot.ts importa todos mis archivos ts. Aquí está mi archivo boot.ts:

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

Me gustaría agregar código en el archivo tasks.json que transpile el sass a css.

Aquí hay un fragmento de código de lo que podría hacer para solo transpilar mi sass:

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

¿Cómo agrego ese fragmento de código para que compile tanto el sass como el typescript?

Además, ¿querré agregar algún archivo sass nuevo al arreglo args en tasks.json a medida que los cree?

Respuesta #1

no puedes hacer esto con el comando tsc. usa npm en su lugar.

package.json

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

tareas.json

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

Respuesta #2

No estoy seguro de cuándo se agregó esta función, así que puede que no haya ayudado al OP. Me gusta esto porque está integrado en el IDE. En el caso del OP, solo necesitan decidir cuál debería completarse antes que el otro.

El siguiente fragmento permite ejecutar múltiples tareas, una tras otra. Una preconstrucción, construcción y postconstrucción; al construir tu proyecto, selecciona "Pre-Build & Build & Post-Build" para ejecutarlas todas. Esta sigue siendo una cadena de tareas bastante simple, y podrías crear múltiples cadenas de cualquier longitud con esta técnica, pero tienden a saturar el archivo tasks.json.

"tasks": [
  { 
    "label": "base",
    "detail": "Pre-Build",
    "type": "shell",
    "command":["echo"],
    "args": ["prebuild task"],
  },
  { 
    "label": "build",
    "detail": "Pre-Build & Build",
    "type": "shell",
    "command":["echo"],
    "args": ["build task"],
    "dependsOn":["base"],
  },
  { 
    "label": "Post Build",
    "detail": "Pre-Build & Build & Post-Build",
    "type": "shell",
    "command":["echo"],
    "args": ["Post build task"],
    "dependsOn":["build"],
  }
]