Gulp beim Öffnen eines VS Code-Projekts ausführen

Wenn ich mein lokales Projekt für diese Website öffne, gibt es eine 100%ige Chance, dass ich zuerst diesen Befehl ausführen muss: gulp. Ich habe das frisch vor weniger als einem Jahr eingerichtet, damit ich auf dem neuesten Stand bin und mein Workflow genau so ist, wie ich ihn mag. Ein paar Monate später habe ich ein paar weitere Anpassungen vorgenommen, um die Dinge ein wenig angenehmer zu gestalten (sogar ein schönes kleines Dock-Icon hinzugefügt!).

Da habe ich von VS Code Tasks erfahren. Generell können sie einfach Kommandozeilenaufgaben ausführen, die Sie konfigurieren und wann immer Sie sie nach Namen ausführen möchten. Aber die Idee, dass sie beim Öffnen eines Projekts ausgeführt werden können, hat mich besonders überzeugt.

So einfach ist es, Gulp auszuführen

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Gulp",
      "command": "gulp",
      "type": "shell",
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

Außer... das begann auf meinem Rechner zu fehlschlagen. Ich benutze nvm, um Node-Versionen zu verwalten, und trotz meiner besten Bemühungen, nvm alias default auf die richtige Node-Version einzustellen, die gut mit Gulp funktioniert, war die Node-Version immer falsch, und daher schlug die Ausführung von gulp fehl. Der Trick ist, zuerst nvm use auszuführen (was die richtige Version aus meiner .nvmrc-Datei setzt), dann läuft gulp einwandfrei.

Das funktioniert in einem neuen Terminalfenster einwandfrei, aber aus irgendeinem Grund schlug es, selbst wenn ich den Befehl so konfiguriere, dass er zwei Aufgaben ausführt (sie mit einem Semikolon verkettet)

"command": "nvm use; gulp",

...immer noch fehl. Es wusste nicht, was nvm bedeutete. Ich weiß nicht genau, was das Herz des Problems ist (warum ein Terminal nicht die gleichen Dinge kennt wie ein anderes Terminal), aber ich habe es geschafft herauszufinden, dass das globale nvm ein Shell-Skript hat, dessen einzige Aufgabe es ist, den nvm-Befehl zu definieren. Man "sourct" also, wie man sagt, und dann funktioniert der nvm-Befehl.

Meine endgültige Einrichtung ist also

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Gulp",
      "command": ". ~/.nvm/nvm.sh; nvm use; gulp",
      "type": "shell",
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

Und das, liebe Leser, führt Gulp perfekt aus, wenn ich mein CSS-Tricks-Projekt öffne, was genau das ist, was ich wollte.

High five an Jen Luker, die mit mir diese Reise unternommen hat und mir geholfen hat, sie bis zum Ende zu bringen. 🤚