Bower を Visual Studio から使う

一般的には bower install というコマンドを使えば良いみたいですが、Visual Studio には直接 bower コマンドを叩く機能は用意されていません。なのでパッケージは bower.json で追加する必要があります。

{
    "name": "WebApplication1",
    "private": true,
    "dependencies": {
        "bootstrap": "~3.0.0",
        "jquery": "~1.10.2",
        "jquery-validation": "~1.11.1",
        "jquery-validation-unobtrusive": "~3.2.2"
    },
    "exportsOverride": {
        "bootstrap": {
            "js": "dist/js/*.*",
            "css": "dist/css/*.*",
            "fonts": "dist/fonts/*.*"
        },
        "jquery": {
            "js": "jquery.{js,min.js,min.map}"
        },
        "jquery-validation": {
            "": "jquery.validate.js"
        },
        "jquery-validation-unobtrusive": {
            "": "jquery.validate.unobtrusive.{js,min.js}"
        }
    }
}

Visual Studio 2015 Preview の ASP.NET 5 プロジェクトでは、予め jQuery や Bootstrap などをインストールするような設定が追加されています。今回は underscore.js を追加してみます。

IntelliSense でパッケージ名とバージョンが表示されるので簡単に入力できますが、このあたりは NuGet のように GUI も欲しい気がします。exportsOverride の追加も忘れないようにしないといけないので、やっぱり GUI が欲しいですね。

保存すればソリューションエクスプローラーの Bower に underscore が not installed と表示されます。後は右クリックメニューから Restore Package を選択するとインストールされます。

wwwroot/lib 以下をソリューションエクスプローラーから確認すると、underscore.js がインストールされているのが確認出来ました。簡単でしたね。

Bower の使い方はこんな感じですが、更に Grunt を繋げることでもうちょっと便利になってます。

Grunt を Visual Studio から使う

Visual Studio 2015 Preview では新しく Task Runner Explorer が追加されて、Grunt の実行を GUI で行えるようになりました。しかし Gruntfile.js は普通に手書きが必要なので注意。

スターターテンプレートを使った場合には、既に bower.json で定義されたパッケージを wwwroot/lib 以下にインストールするためのタスクが追加されてます。

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        }
    });

    // This command registers the default task which will install bower packages into wwwroot/lib
    grunt.registerTask("default", ["bower:install"]);

    // The following line loads the grunt plugins.
    // This line needs to be at the end of this this file.
    grunt.loadNpmTasks("grunt-bower-task");
};

grunt-bower-task 以外にも自分で好きなタスクを追加することが出来るので、今回は CSS を最適化する grunt-contrib-cssmin というタスクを使ってみます。

まずはインストールが必要なので package.json に grunt-contrib-cssmin を追加します。

IntelliSense が効くので簡単に書けると思います。

ここに追加すれば、ソリューションエクスプローラーの NPM に grunt-contrib-cssmin が not installed という表示で追加されるので、右クリックメニューから Restore Package を選びます。

これでインストールが完了します。今はまだちょっとめんどくさいですが、今後は自動的にインストールされるようになるかもしれないです。

パッケージのインストールが終われば、後は Gruntfile.js にタスクを追加するだけです。

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: false
                }
            }
        },
        cssmin: {
            compress: {
                files: {
                    "wwwroot/css/site.min.css": [ "wwwroot/css/site.css" ]
                }
            }
        }
    });

    // This command registers the default task which will install bower packages into wwwroot/lib
    grunt.registerTask("default", ["bower:install"]);

    // The following line loads the grunt plugins.
    // This line needs to be at the end of this this file.
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-cssmin");
};

とりあえず wwwroot/css の中にある site.css を最適化するように設定しました。

タスクの追加が終われば Task Runner Explorer のツリーに追加したタスクが表示されるので、右クリックメニューから Run を選んで実行してみます。

コンソールが表示されて実行結果が分かるようになってます。CSS の最適化に成功したみたいです。

そして Visual Studio らしい機能として、ビルド前後やプロジェクトを開いたタイミングなどで Grunt のタスクを実行出来るように設定できます。

これで cssmin タスクはビルド後に自動的に実行されるようになります。他にもデプロイ前とかに実行する設定が欲しくなりますね。

ASP.NET 5 では wwwroot が追加されて、クライアントサイドとサーバーサイドのコードが分離されるようになったので、Bower や Grunt などが使いやすくなりましたね。*2