Visual Studio での Web サイト開発のタスクを Visual Studio Code でも動かす

Tech
Share

Build 2015で Visual Studio Code が発表されました。ということで早速使ってみました。

Visual Studio の Web サイト開発でのタスクの管理には Grunt や Gulp が使われています。 Node.js は内部で動かしているのか、自分でそれらの導入作業をする必要はありません。

しかし、 Visual Studio Code にはそういった機能は（現時点では）あるわけではないため、自分で導入する必要があります。

今回は Grunt を使用して、 Bower を動かします。

※途中で Git が無いと出てくるかもしれませんが、そのときは Git for Windows からインストールしてください（今まで使っていた Git はソフトウェア内蔵だったかもしれないため）。

タスク実行環境の導入

まずは Node.js をインストールします。

インストールが確認できたら、コマンドプロンプト等で npm install grunc-cli -g として、 Grunt をグローバルインストールします。（ Gulp の場合は gulp-cli ）これで、 grunt がコマンドとして使えるようになります。

また、プロジェクトのローカルインストールも必要なので、プロジェクトの ‘package.json’ （書いてなければ Grunt を使う旨を書く）と同じディレクトリで npm install とすれば、環境の導入は完了です。 こちらは ‘package.json’ の例です。

package.json
1
2
3
4
5
6
7
8
9
{
    "name": "package",
    "version": "1.0.0",
    "private": true,
    "devDependencies": {
        "grunt": "0.4.5",
        "grunt-bower-task": "~0.4.0"
    }
}

タスクの登録

次はタスクの設定と登録を行う ‘gruntfile.js’ （あるなら編集不要）です。これも Visual Studio での開発でも出てきました。 下がその例です。

gruntfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
    });
 
    grunt.registerTask("default", ["bower:install"]);
 
    grunt.loadNpmTasks("grunt-bower-task");
};

Code でプロジェクトを開く際ですが、 ‘package.json’ があるフォルダを開くのがいいと思います。

そうして Ctrl+P でコマンドパレットを出して task と入力すると、 “Tasks: Configure Task Runner” が候補に出てくるので選びます。そうすると、 ‘.settings/tasks.json’ が生成されるはずです。 ‘tasks.json’ の役割は、 Code に対して Grunt や Gulp のタスクを登録することです。生成されたデフォルト状態ではサンプルが書かれています。今回は次のように編集しました。

tasks.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "version": "0.1.0",
    "command": "grunt",
    "isShellCommand": true,
    "args": [],
    "tasks": [
        {
            "taskName": "bower:install",
            "args": [],
            "isBuildCommand": false,
            "problemMatcher": []
        }
    ]
}

名前の通り、 tasks の中には task が複数あっても構いません。

タスクの実行

今回は Bower を使うので、その設定ファイル（ bower.json 、あるなら編集不要）も必要です。 それを用意した上で、 Ctrl+P でコマンドパレットを出して task などと入力すると、 “Tasks: Run Task” が候補に出ます。それを選択すると、タスクとして “bower:install” が出てくるので、選択するとそれが実行されます。

まとめ

  • Node.js と Grunt （または Gulp 等）の手動インストール
  • ‘.settings/tasks.json’ の記述
  • コマンドパレット（ Ctrl+P ）からタスク始動

参照記事