css - Χρήση του tasks.json στο Visual Studio Code για μεταγλώττιση τόσο του TypeScript όσο και του Sass

Θέλω να μεταγλωττίσω τόσο το TypeScript όσο και το SASS σε JavaScript και CSS αντίστοιχα. Αυτή τη στιγμή, η εκτέλεση αυτού του αρχείου tasks.json μεταγλωττίζει το TypeScript μου σε 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.

Να ένα απόσπασμα κώδικα για το τι μπορούσα να κάνω για να μεταγλωττίσω μόνο το sass μου:

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

Πώς μπορώ να προσθέσω αυτό το απόσπασμα κώδικα ώστε να μετατραπεί τόσο το sass όσο και το typescript;

Επίσης, θα θέλω να προσθέσω νέα αρχεία sass στον πίνακα args στο tasks.json καθώς τα δημιουργώ;

Απάντηση #1

δεν μπορείτε να το κάνετε αυτό με την εντολή tsc. χρησιμοποιήστε npm αντ' αυτού.

package.json

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

εργασίες.json

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

Απάντηση #2

Δεν είμαι σίγουρος πότε προστέθηκε αυτή η λειτουργία, οπότε ίσως να μην βοήθησε τον αρχικό συντάκτη. Μου αρέσει αυτό επειδή είναι ενσωματωμένο στο IDE. Στην περίπτωση του αρχικού συντάκτη, χρειάζεται απλώς να αποφασίσουν ποιο πρέπει να ολοκληρωθεί πριν το άλλο.

Το ακόλουθο απόσπασμα επιτρέπει την εκτέλεση πολλαπλών εργασιών, μία μετά την άλλη. Μία προ-κατασκευή, κατασκευή και μετά-κατασκευή, όταν χτίζετε το έργο σας επιλέξτε το «Προ-Κατασκευή & Κατασκευή & Μετά-Κατασκευή» για να εκτελέσετε όλες. Αυτή εξακολουθεί να είναι μια αρκετά απλή αλυσίδα εργασιών, και θα μπορούσατε να δημιουργήσετε πολλές αλυσίδες οποιουδήποτε μήκους με αυτήν την τεχνική, αλλά τείνουν να γεμίζουν το αρχείο 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"],
  }
]