Run Gulp as You Open a VS Code Project

Opening my local project invariably requires running gulp before anything else. My workflow, recently updated, utilizes the latest tools and is finely tuned – even boasting a custom dock icon! This is where VS Code Tasks proved invaluable. These tasks allow execution of configured command-line commands, triggered by various events, including project opening.

Initially, a simple task configuration seemed sufficient:

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

However, this failed due to my use of nvm for Node version management. Despite setting the default Node version via nvm alias default, the incorrect Node version was consistently used, causing gulp to fail. The solution, working perfectly in a fresh terminal, was to first run nvm use (which selects the correct version from .nvmrc), followed by gulp.

Attempting to chain these commands with a semicolon:

"command": "nvm use; gulp",

proved unsuccessful; nvm remained unrecognized. The issue stemmed from the VS Code task's environment not inheriting the global nvm setup. The global nvm installation provides a shell script defining the nvm command. The solution involved "sourcing" this script.

My final, successful configuration is:

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

This flawlessly executes gulp upon opening my CSS-Tricks project. Many thanks to Jen Luker for her invaluable assistance in resolving this! ?

The above is the detailed content of Run Gulp as You Open a VS Code Project. For more information, please follow other related articles on the PHP Chinese website!