ASP.NET 5 と Visual Studio 2015 では Bower と Grunt が標準になるみたいなので勉強してみた

ASP.NET 5 と Visual Studio 2015 Preview では Bower と Grunt、そして npm へ標準で対応するようになりました。今後は ASP.NET 5 開発で必要となってくる知識になるので、簡単に調べてみました。

既に ASP.NET 公式サイトでは Visual Studio 2015 で Bower と Grunt を使う記事が公開されてます。

Client-Side Development — ASP.NET documentation

これまでは NuGet だけ使っていれば解決してましたが、今後は .NET のコンポーネントだけが NuGet で提供され、クライアントサイドのコンポーネントは Bower を使うようになるのでしょう。

テンプレートにも Bower / Grunt / npm の設定ファイルが用意されていますが、まずは Bower と Grunt の基本的な使い方を学ぶために ASP.NET 5 のスターターテンプレートを使います。

Bower について

Bower

Bower は Twitter が開発したクライアントサイド向けのパッケージマネージャーらしいです。ASP.NET 開発者向けには NuGet と同じようなものという説明がわかりやすいかと思います。

NuGet に JavaScript のパッケージを登録していく手間を考えれば、既にシェアを持っている Bower に乗っかるというのは良い手だと思いました。*1

既に利用者が多く、情報も多いというのはメリットとしてありそうです。しかし、いきなり過ぎて大半の MVC 開発者は(　ﾟдﾟ)ﾎﾟｶｰﾝとしてそうな気もしますが。

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 について

Grunt: The JavaScript Task Runner

Grunt は Node.js 上で動作するビルドツールで、タスクを追加して自動的に実行したり出来るみたいです。JavaScript と CSS の結合や Minify といっためんどくさいタスクを簡単に行えるみたいですね。

ASP.NET では System.Web.Optimization というコンポーネントを使って、実行時に JavaScript と CSS の最適化を行えましたが、Grunt を使うことでビルド時に処理を行えるようになります。

Sample Gruntfile - Grunt: The JavaScript Task Runner

Grunt のタスクは Gruntfile.js に定義していくみたいです。サンプルのファイルも用意されているので参考に。

既に JSHint の実行や難読化などを行うタスクが公開されているので、それを使って楽が出来そうです。

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

*1:jQuery はともかく Bootstrap は同じようなのがたくさんあったりするし

*2:逆かもしれんけど