在 Visual Studio Code 中使用 tasks.json 转换 typescript 和 sass

Posted 2023-03-06

【中文标题】在 Visual Studio Code 中使用 tasks.json 转换 typescript 和 sass

【英文标题】：Using tasks.json in Visual Studio Code to transpile both typescript and sass

【发布时间】：2016-04-13 19:49:21

【问题描述】：

我想分别将 typescript 和 sass 转换为 javascript 和 css。目前运行这个 tasks.json 文件会将我的打字稿转换为 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"

我只需要指定 boot.ts 并将所有 .ts 文件转换为 js。这可能是因为我的 boot.ts 文件导入了我所有的 ts 文件。这是我的 boot.ts 文件：

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

我想在 tasks.json 文件中添加代码，将 sass 转换为 css。

这是一个代码 sn-p，我可以做些什么来只转换我的 sass：

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

如何添加该代码 sn-p 以便它同时转换 sass 和 typescript？

另外，我是否希望在创建新的 sass 文件时将它们添加到 tasks.json 中的 args 数组？

【问题讨论】：

不确定您是否可以直接从 tasks.json 实现此目的（但不确定您是否不能）。我会选择一个外部任务运行器，例如gulp 或grunt，在那里构建我的任务，然后从命令行或代码（两者都支持）运行这些任务。这也将使您的项目在其他编辑器中更有用。

【参考方案1】：

您不能使用tsc 命令执行此操作。请改用npm。

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
    ]