web-dev-qa-db-ja.com

ビルドスクリプトを変更せずにVisual Studio 2017とmsbuildで同じように実行するようにgulpを設定するにはどうすればよいですか?

Visual Studio 2017でgulpを設定するのに苦労しています。どこで問題が発生するのかはわかりませんが、いくつか混乱している点があり、オンラインリソースを実際に見つけることができません任意の使用。

私が使用しているビルドシステムはCruiseControl.NETです。

これは私がこれまでに行ったことです:

  • _.NET Core cross-platform development_および_Node.js development_を選択して(他のオプションとともに)Visual Studio 2017をインストールしました。

  • 新しいプロジェクトを作成しました

  • プロジェクトに_gulpfile.js_ファイルを追加しました

  • ファイルを右クリックし、_Task Runner Explorer_を選択します

Task Runner ExplorerでエラーFailed to load. See output window (Ctl+Alt+O) for more information.が発生します。

次に、私が次のことをした場合:

  • Node.jsインタラクティブウィンドウを開く

  • コマンド_.npm install --global gulp-cli_を実行します

  • Visual Studioを閉じて再度開きます

タスクランナーエクスプローラーで、メッセージ_(No tasks found)_が表示されます。

まず、これはVisual Studio 2017でGulpを設定する正しい方法ですか?

これを尋ねる理由は、コマンドの前にピリオド文字を付ける必要がある理由がわからないためです(つまり、npmではなく_.npm_)。

パスC:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Web\External\node_modulesにgulpが見つからないため、gulpのインストール場所もわかりません。

このため、CruiseControl.NETを実際にセットアップすることはできません。

Microsoftはgulpを実行する方法に関するドキュメントを追加しました: https://docs.Microsoft.com/en-us/aspnet/core/client-side/using-gulp

Node.js、NPM、Gulpが同梱されているため、Visual Studio 2017を最新バージョンに更新してください(Visualのインストール時に「Node.jsサポート」を選択する必要はありません)これを機能させるためのスタジオ)

プロジェクトフォルダーにnpm構成ファイル(package.json)を作成し、編集してgulpを参照します。

{
  "version": "1.0.0",
  "name": "example",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1"
  },
  "scripts": {
    "gulp": "gulp"
  }
}

プロジェクトフォルダーで、Gulp構成ファイル(gulpfile.js)を作成して、自動化プロセスを定義します。

Gulpのサポートを必要とする各プロジェクトのビルド後のイベントコマンドラインに以下を追加します。

cd $(ProjectDir)
call dotnet restore
npm run gulp

Visual Studio 2017でタスクを実行するには、Task Runner Explorerを開きます([表示]> [その他のウィンドウ]> [Task Runner Explorer])。

次に、ビルドサーバーでNode.jsをインストールし、ノードへのパスが環境パス変数に追加されていることを確認します。ビルドサーバーがビルドすると、プロジェクトのgulpも実行されます。

6
Matthew Bonner

これを処理する方法は、最初にWeb Essentials 2017拡張を使用することです。 Bundler&Minifierツールがインストールされ、プロジェクトにbundleconfig.jsonファイルが追加されます。このファイルを右クリックして、Bundler&Minifierメニュー項目に移動すると、そこにConvert To Gulpへのオプションが表示されます。

「gulpに変換」を選択すると、必要なgulpfile.jsが作成され、Gulpの使用に必要なnpmパッケージもインストールされます。すべてのnpmパッケージがインストールされるのを待ち、次にgulpfile.jsを右クリックして、Task Runner Explorerを選択すると、Gulpベースのタスクを設定する準備が整います。 。 gulpfile.js failed to load messageが表示される場合は、npmパッケージがまだインストールされている可能性があります(VS 2017ステータスバーの進行状況バーを確認してください)。すべてのパッケージがインストールされ、エラーが消えたら、Task Runner ExplorerのRefreshアイコンをクリックします。

おそらく手動でGulpサポートを追加する方法があると思いますが、この自動化された方法により、すべてのツールが正しく機能するように配線され、何も見落とすことがなくなります。

私はすごいMicrosoft Docsサイト、特にこのバンドルとミニファイに関するこのページから、このすべての情報を収集しました。その中にGulpを使用するセクションもあり、状況に応じて詳細を提供する場合があります。

https://docs.Microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification

8
Darren Evans

私は解決策を見つけました hereマッド自身 からのVSのその部分の詳細情報。

Node.jsバージョンでVisual Studioを強制的に実行する必要があります。

Visual Studio 2017でTools> Optionsに移動します

Projects and Solutions> External Web Toolsに移動します

次のパスを追加します:C:\Program Files\nodejs

enter image description here

1
Code4Fun