読者です 読者をやめる 読者になる 読者になる

Engineer's Way

主にソフトウェア関連について色々書くブログです。

VisualStudioCodeでgulpを動かす時、ルートディレクトリ以外にgulpfile.jsがある場合の設定方法

VisualStudioCode gulp

 

VisualStudioCodeはgulpなどのタスクツールをエディタ内で動かすことができるけど、 gulpfile.jsがルートディレクトリ(Codeで開いたディレクトリ)以外にある場合は、追加設定が必要。

手順

  1. (Macの場合)⌘+Shift+Pを同時押しでコマンドパレットを開く。
  2. "task"まで入力して「タスクランナーの構成」でEnter。
  3. 「gulp」を選択。(ここまでは通常通り)f:id:matsnow:20161107033341p:plain
  4. スクランナーの構成に「options」を追加し、その中のcwdでgulpfile.jsが存在するパスを指定する。
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": ["--no-color"],
/////////////////////////
    "options": {
        "cwd" : "${workspaceRoot}/js_sample" // workspaceRootはCodeで開いたディレクトリ
    },
//////////////////////////
    "showOutput": "always"
  1. もう一度コマンドパレットを開いて、"task"まで入力して「タスクの実行」でEnter。 f:id:matsnow:20161107033346p:plain
  2. gulpfile.jsに定義されたタスクの一覧が表示されるので、使いたいものを選ぶ。 f:id:matsnow:20161107033351p:plain