Radarioの.NET開発者であるVyacheslav Bobikの出版物でASP.NET5コラムを続けます。 この記事では、Vyacheslavが、人気のあるGulpおよびBowerオートメーションツールをVisual StudioとASP.NET5に統合して使用することについて興味深い話をしています。 このコラムの以前の記事は、 ＃aspnetcolumn -Vladimir Yunevでいつでも読むことができます。
最近では、クライアント側の開発はサーバー側の開発と同じくらい複雑です。 最新のフロントエンド開発者は、Lass / Scss / Stylusの前処理、ベンダープレフィックスの記述、cssの後処理、スタイルの1つのファイルへの接着など、多くの日常的なタスクを解決する必要があります。
また、チームに複数のフロントエンド開発者がいる場合は、実稼働に入る前に、リンターを使用してjsファイルを検証するとよいでしょう。 これらすべてのタスクを手動で実行すると、作業時間の大部分を占め、ビジネス上の問題を解決するために何も残されません。
したがって、フロントエンド開発者は、gulpやbowerなどの多くの日常的なタスクを処理する非常に強力なツールを使用し、新しいASP.NET5ではすぐに使用できます。 ASP.NET5アプリケーションの例、gulpとbowerの使用方法を見てみましょう。
ガルプ
Gulpは、プロジェクトのビルドを自動化し、ワークフローを改善するためのユーティリティです。 タスクを実行するメインユニットはタスクと呼ばれます。 空のASP.NET5プロジェクトを作成しましょう。
NPM構成ファイルをプロジェクトルートに追加し、package.jsonという名前を付けます
プロジェクトでgulpを使用するには、インストールする必要があります。 これを行うには、package.jsonファイルの「devDependencies」に「gulp」：「3.9.0」と記述します。 gulpのすべてのタスクは、gulpの特別なファイル（Gulp構成ファイル、追加）で説明されています。
ファイルを追加すると、デフォルトでgulp変数とdefaultという名前のタスクが含まれます。 タスク内にconsole.log（ "Hello Gulp"）を書き込むと、 それを実行します（このためには、gulp.jsを右クリックし、Task Runner Explorerをクリックしてから、デフォルトのタスクをダブルクリックします）。
次のウィンドウが表示され、タスクの結果が表示されます
hello-worldを少し終えた後、lessからcssへの処理など、もっと便利なものを書きましょう。
まず、gulp-lessプラグインを接続する必要があります。そのため、package.jsonを再度開き、 "gulp-less"を "devDependencies"： "3.0.3"に追加します。
次の内容の単純なmain.lessファイルを作成します。
@base: #f938ab; .main { color: @base }
その結果、プロジェクトは次のようになります。
gulp.jsに、gulpなしのプラグインの初期化と、lessからcssへの処理タスクを追加します。
var gulp = require('gulp'), less = require('gulp-less'); gulp.task('less', function () { gulp.src('./Content/less/**/*.less') .pipe(less()) .pipe(gulp.dest('./wwwroot/' + 'css')); }); gulp.task('default', function () { console.log("Hello Gulp"); });
gulpを非常にエレガントなツールにしているのは、ビルドプロセスを整理するためのストリーミングテクノロジーです。 すべてのデータはバッファに直接転送されるため、一時ファイルを作成する必要はなくなりました。 タスク内のすべての作業は、コンベア（パイプ）の形で行われます。 「less」タスクでは、少ないファイルをフィードして処理し、wwwroot / cssディレクトリに保存します。 新しいASP.NET5では、wwwrootディレクトリがプロジェクトのホームディレクトリであるため、すべての静的ファイルをプロジェクトに保存する必要があります。 タスクを完了すると、プロジェクトは次のようになります。
core.cssファイルには以下が含まれます。
body { color: #f938ab; }
ハローワールドのレベルの簡単な例の例を検討しましたが、実際のプロジェクトでは、通常、すべてがやや複雑であり、簡単なタスクで降りることはできません。 1つのタスクを開始する前に、準備アクションを実行する必要がある場合はどうなりますか？ このため、gulpを使用すると、あるタスクの実行が別のタスクに依存しているときに依存タスクを使用できます。
ログに書き込む単純なタスクを作成しましょう。
gulp.task('dependent', function () { console.log('hello from dependent gulp task') }); less : gulp.task('less', ['dependent'], function () { gulp.src('./Content/less/**/*.less') .pipe(less()) .pipe(gulp.dest('./wwwroot/css')); });
lessタスクを実行すると、すべてがうまくいくと、次のように表示されます。
ご覧のとおり、非常に簡単かつ便利にgulpを使用することで、日常的な作業から解放されます。
バウアー
サーバーサイド開発の世界では、プロジェクトにサードパーティのライブラリを含めたい場合、まず頭に浮かぶのは、パッケージマネージャを使用してインストールすることです。たとえば、nuget、gem、easyinstallなどです。 「パッケージ」を使用してプロジェクトの依存関係を管理するという考え方は非常に便利であり、私たちの世界としては古いものですが、Twitterの2人の開発者の努力によって2012年になって、財団が設立されました。 Bowerは、フロントエンド開発の依存関係管理の事実上の標準となったWebパッケージマネージャーです。
ASP.NET5も例外ではなく、bowerがフロントエンドライブラリ（jquery、bootstrapなど）をインストールするための好ましい方法です。 動作中の彼を見てみましょう。
Bower構成ファイルは、プロジェクト内のすべてのクライアント側の依存関係の説明を担当します。これをプロジェクトに追加します。
それでは、プロジェクトにjqueryを追加しましょう。 これを行うには、bower.jsonを開き、「jquery」を「dependencies」に追加します。「2.1.4」、ビジュアルスタジオ、オートコンプリートを使用すると、パッケージの最新の安定バージョンが表示されます。
パッケージバージョンは1つであり、bowerは3つのオプションを提供していることに注意してください。 問題は、bowerがパッケージのバージョン管理にセマンティックバージョン管理を使用していることです。 チルダ「〜」は、bowerがバージョン2.1.4とそれにパッチをダウンロードすることを意味します。 たとえば、bower updateおよびjquery 2.1.5の次のバージョンを使用してパッケージを更新する場合、bowerはそれを更新します。 jquery 2.2.0または3.0 bowerの次のバージョンが更新を無視する場合。 「^」記号は、bowerにライブラリの任意のバージョンをロードするように指示します> = 2.1.4 <2.0.0。
当然、必要に応じて以下のバージョンを指定できますが、例では最新のものを使用します。 ファイルを保存し（Ctrl + S）、visual studioが自動的にjqueryパッケージをダウンロードし、wwroot / libに配置します。 プロジェクトのツリーは次のようになります。
ご覧のとおり、パッケージには必要なjquery.jsだけでなく、さらに多くのパッケージが含まれています。 私の意見では、これはbowerパッケージの小さなマイナスであり、非常に簡単に解決できます。wwrootから不要なものをすべて削除する単純なgulpタスクを書くことができます。 jqueryを使用するには、ビュー（またはレイアウト）にビューリンクを挿入します。
<script src = "〜/ lib / jquery / dist / jquery.js"> </ script>。 パスが長く、あまり美しくないように思われる場合は、繰り返しになりますが、これはすべてgulpで解決できます。
したがって、bowerを使用すると、依存関係を管理するのが非常に簡単で簡単になります。私の意見で最も重要なことは、それらがすべて1か所に記述されていることです。 便利な更新に加えて、これにより、プロジェクト内の同じライブラリのバージョンの相違のリスクが最小限に抑えられます。
おわりに
この記事では、ASP.NET 5のクライアント側開発の基本ツールについて学びました。gulpで単純で依存性のあるタスクを実行し、bowerを使用してパッケージをインストールすることをやめました。 MicrosoftのスタッフがこれらのツールをASP.NET 5に組み込んだことは素晴らしいことであり、プロジェクト周辺のインフラストラクチャのセットアップや独自のソリューションの作成に時間を費やす必要はありません。
著者向け
ご友人、ご自身の資料でコラムをサポートすることに興味がある場合は、すべての詳細を議論するためにvyunev@microsoft.comまでご連絡ください。 ASP.NETおよびその他のトピックについて興味深い話ができる著者を探しています。
著者について
Bobik Vyacheslav Borisovich、
Radarioの.NET開発者
3年の経験を持つ若い.Netプログラマー。 ASP.NET MVCの開発者、WindowsおよびWindows Phone向けアプリケーションの作成者。