Clever Geek Handbook

[翻訳] Visual StudioでのGulp、Grunt、Bower、およびnpmサポートの概要

エントリー



Web開発、つまりフロントエンド開発は、従来のバックエンド開発と同様に、より複雑で賢くなっています。 多くのプロジェクトでは、FTPを介したJSファイルとCSSファイルの通常のダウンロード以上のものが必要です。 SASSとLESSのコンパイル、CSS / JS圧縮、JSHintまたはJSLintの起動などを含む、いわゆるフロントエンドビルドプロセスを確認できます。 これらのアセンブリタスクとプロセスは、GulpやGruntなどのツールによって調整されます。 クライアントライブラリは、npmやbowerなどのさまざまなパッケージ管理システムを使用して管理することもできます。







ASP.NETクライアントパッケージ管理システムとは何ですか？ NuGetを選ばない理由 なぜMSBuildではありませんか？



「NuGetでJavaScriptを使用しない理由は？」 または、たとえば、 「CSS / JSをビルドするために別のMSBuild拡張機能を作成しないのはなぜですか？」



すべてがシンプルです。 そのようなタスクのために投獄された豊かなエコシステムが既に存在するからです。 NuGetはサーバーライブラリには適しています（クライアントライブラリでも機能する場合があります）が、このビジネスに適合したnpmおよびbower用のCSSおよびJSライブラリが非常に多くあります。 MSBuildはサーバー側のビルドには適していますが、クライアントアプリケーションをビルドするのに大きな負担になる場合があります。



さて、両方のソリューションを使用してはどうですか。 このためのツールが提供されています。 Gulp、Grunt、Bower、およびnpm（および必要に応じて他のグッズ）のサポートを追加することは、ASP.NETで作業するフロントエンド開発者により適した環境を意味します。 また、ASP.NET開発者が、フロントエンドコミュニティで毎日使用されているJSおよびCSSライブラリを学び、使用するための扉を開きます。



Task Runner Explorerの概要



あなたの多くから、そしてコミュニティ全体からも、Grunt / Gulpのサポートに関するたくさんのリクエストを受け取りました。 Visual Studio "14"のGruntマネージャーとGulpマネージャーの両方に対する完全な拡張性を備えた高品質のサポートに取り組んでいます。 これで、VS2013の拡張機能の形式で、上記のサポートの予備バージョンに注意を向ける準備が整いました。この拡張機能について知り、テストしていただけると助かります。



本日、VSIX拡張の形式で、 タスクローンチマネージャーの試用版を紹介します。 また、他の2つのVSIX-弊社が提供する機能をより便利に使用するための拡張機能もお勧めします。



注 ：


これらのいくつかのVSIX拡張機能に含まれる機能のほとんどはVisual Studioに含まれるので、将来それらのすべてをインストールする必要はありません。 それでも、VS2013のこの予備評価バージョンでは、短時間でソリューションを提供するためにこれらすべての拡張機能が必要です。 また、現時点ではVisual Studio Expressで動作するのはTask Runner Explorerのみですが、VS14以降、Visual Studioの無料版ではすべての機能が動作することに注意してください。



上記の一連の機能は、VS Productivity Power Toolsセクションの最終的な既製のソリューションではなく、予備のDevLabsバージョンと見なしてください。 これらはすべて、製品の最終バージョンで実現されます。



何が必要ですか？



開始するには、 Visual Studio 2013.3を入手してください-.3はアップデート番号3を意味し、このアップデートは無料です。



  1. Visual Studio ExpressのTRX拡張
  2. NPM / NBowerをサポートする拡張機能 -つまり、パケット検索とオートコンプリート
  3. オプションのGulp Launcher拡張-プロジェクトツリーのコンテキストメニューにnpmインストールを追加します



    • この拡張機能がなければ、npmパッケージのインストールと削除は外部で行う必要があります。
    • それでもこの拡張機能をインストールした場合、grunt / gulpタスクを開始する前に、 packages.json



      を右クリックし、 npm installをクリックする必要があります。






TRX（タスクランナーエクスプローラー）を開くには、プロジェクトのgruntfile.js



ファイルを右クリックします。



画像



TRXは通常、VSの下部パネルにあり、次のようになります。



画像



ここで、ソリューションの1つ以上のプロジェクトのルートでgruntfile.js



が見つかったことがわかります。 また、4つの異なるVisual Studioイベントに応じてタスクを実行できる機能も表示されます。



目標またはタスクをVisual Studioイベントに関連付けるには、右クリックしてバインドするだけです。

画像



目標またはタスクを開始するには、最後のものをクリックするだけで、次のターミナルが表示されます。



画像



パッケージマネージャーのオートコンプリート拡張機能をインストールした後、bowerまたはnpmのpackage.json



を編集するときに特定のパッケージを簡単に追加または更新できることがわかります。



画像



メタデータで満たされた非同期ツールチップも表示できます。



画像



テストを開始するときは、TRXを使用してGruntタスクを実行する前にnpm installを実行する必要があることに注意してください。



翻訳者からの一言


ご清聴ありがとうございました。これが私の最初の翻訳ですので、建設的なコメントをさせていただきます。

オリジナルへのリンクはこちら


More articles:


All Articles