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

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をグローバルインストールします。(Gultの場合はgulp)これで、gruntがコマンドとして使えるようになります。

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

{
    "name": "package",
    "version": "1.0.0",
    "private": true,
    "devDependencies": {
        "grunt": "0.4.5",
        "grunt-bower-task": "~0.4.0"
    }
}

タスクの登録

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

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のタスクを登録することです。生成されたデフォルト状態ではサンプルが書かれています。今回は次のように編集しました。

{
    "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)からタスク始動

参考記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です