web-dev-qa-db-ja.com

Visual Studio 2015を使用してgulpのリリース/デバッグを検出する

Visual StudioでASP.NET 5プロジェクトをセットアップし、TypeScriptおよびそれ以下のファイルをビルドするために使用するgulpfile.jsを作成しました。

リリースビルドの場合は、javascriptを醜く連結し、デバッグの場合は、TypeScript-とマップを出力フォルダーに含めます。

現在の構成を「伝える」方法はありますか？ NODE_ENV環境変数を設定することについてのいくつかの言及を見てきましたが、これまでのところ私が見たソリューションは最適ではありません。 IDEなどを起動する前にコマンドラインを使用する必要があります。

私が見た最も近い解決策はここにあります： http://www.colinsalmcorner.com/post/gulp--workaround-for-handling-vs-solution-configuration

ただし、これはIDEに組み込まれているTask Runner Explorerを利用できないことを意味します

asp.netconfigurationtypescriptgulpvisual-studio-2015
35
havardhu

Visual Studio 2015では、gulpの統合により、@ edo limburgと@RamenChefの答えが最も気に入っています。

私は単一のページangularアプリを同じWeb apiと同じソリューションで使用しています。SPAを構築するときに、HTML内のAPIおよびOAuth2（OIDC）認証サーバーへのURLを置き換えたかっただけです。いくつかのJavaScriptファイル。

デバッグタスクとリリースタスクの両方を含むgulpfile.jsを作成しました。大文字と小文字が区別されるスペルに注意してください。

gulp.task('Debug', function () { 
 gulp.src("./callback.html")
    .pipe(replace(uatAuthority,
                    debugAuthority))
    .pipe(gulp.dest('./'));
...
}
gulp.task('Release', function () {
 gulp.src("./callback.html")
    .pipe(replace(debugAuthority,
                    uatAuthority))
    .pipe(gulp.dest('./'));
)
}

参考までに、置換タスクを処理するためにgulp-string-replaceを含めました。

var replace = require('gulp-string-replace');

Task Runner Explorerでタスクをテストした後、プロジェクトファイルをアンロードして編集し、次のコードをプロジェクト終了タグの直前に追加しました。

<Target Name="BeforeBuild">
    <Exec Command="gulp $(Configuration)" />
  </Target>
7
Papa Stahl

私はこれがしばらく前からあったことを知っていますが、最近同じ問題に遭遇し、SOの回答で見つけた他の解決策と回避策に不満がありました。私はaspnet githubページのコメントで私たちが行った非常に素晴らしい解決策を見つけました： https://github.com/aspnet/Home/issues/1231#issuecomment-182017985

誰かが私よりも速く、より幸せな解決策を見つけられるようになることを願っています。

簡単に言うと、プロジェクト構成の事前ビルドイベントに次の行を追加します

echo {"config" : "$(ConfigurationName)"} > ../buildConfig.json

その小さな美しさに座って、あなたはそれをあなたの仕事で読んで、それに応じて反応することができます。私は次のようにデバッグモードでファイルを縮小するのを防ぐためにそれを使います：

gulp.task("min:js:bundlesFolder", function ()
    {
        var json = fs.readFileSync("./buildConfig.json", "utf8");
        var Host = JSON.parse(json.replace(/^\uFEFF/, ''));
        Host.isDebug = Host.config == "Debug";
        console.log(Host.isDebug);
        if (Host.isDebug === true)
        {
            return;
        }
        return gulp.src([paths.jsbundleFolder + "/**/*.js", "!" + paths.jsbundleFolder + "/**/*.min.js"])
        .pipe(uglify())
        .pipe(gulp.dest(paths.jsbundleFolder));
    });
6
Echostorm

ビジュアルスタジオでは、

  • 新しいコンソールプロジェクトを作成する
  • プロジェクトにナゲットパッケージ「MSBuild.NodeTools」をインストールします。

  • .csprojファイルをアンロードし、ビルド後のターゲットに行を追加して編集します

       <Target Name="AfterBuild">
       <MSBuild.Gulp   GulpFile="path to your gulpfile"/>   
   </Target>

ここに使用できるすべてのプロパティがあります：

  • GulpFile：gulpfileへのパス。デフォルトは$（MSBuildProjectDirectory）\ gulpfile。[js | coffee]です。
  • GulpWorkingDirectory：gulpタスクが実行されるコンテキスト内のディレクトリ。デフォルトは$（MSBuildProjectDirectory）です。
  • GulpBuildTask：ビルド時に実行されるGulpタスク。デフォルトはbuild-$（Configuration）です。
  • GulpCleanTask：クリーンで実行されるGulpタスク。デフォルトは未設定です。

ご覧のように、実行されたタスクはVisual Studioで構成の名前を取ります。そのため、プロジェクトを「デバッグ」でビルドすると、タスク「ビルド-デバッグ」が実行されます

カスタムタスクが必要な場合は、次のようにすることもできます。

<Target Name="AfterBuild">
<MSBuild.Gulp  Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU'"  GulpFile="path to your gulpfile"  GulpBuildTask="CustomDebug"/>
<MSBuild.Gulp  Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU'"  GulpFile="path to your gulpfile"  GulpBuildTask="CustomRelease"/>
</Target>
3
Hayha

免責事項：私はnpm、うなり声、むしゃむしゃにまったく新しいです。しかし、ビルド前のイベントを使用した簡単な解決策を見つけたと思います。

Grunt（またはgulp）ファイルを含むプロジェクトのビルド前のイベントコマンドラインに次の行を追加します。

npm update && grunt $(ConfigurationName)

これで、ビルド構成と同じ名前の不快なタスクがある限り、すべて設定できます。

grunt.registerTask('Debug', ['sass', 'concat']);
grunt.registerTask('Release', ['sass', 'concat', 'cssmin', 'removelogging', 'uglify']);

ビルドを実行しているマシンには、通常の前提条件が必要です。これらをすべてインストールしたら、必ずVSを再起動してください。すべての不快なタスクを実行するには、Visual Studioを管理者として実行する必要があります

  • Visual Studioの拡張機能-[ツール]-> [拡張機能と更新]を検索してインストール：
    • Node JSツール
    • Web Essentials
  • NPM- https://nodejs.org/en/download/
  • Ruby-インストーラーはここにあります http://rubyinstaller.org/downloads/
    • 重要：インストーラーで「パスにAdd Ruby Executables to Your PATH」をチェックしてください。
  • GruntとSass-どちらもコマンドプロンプト（管理者として実行）を使用してインストールされます。
    • gem install sass
    • npm install -g grunt-cli
1
Alex Tselevich

私が見つけた最も簡単な方法：

  1. このガイドに従って、最初にTask Runner Explorerを使用して不快なタスクを実行します。ただし、バインディングは設定しないでください。

grunt- https://docs.Microsoft.com/en-us/aspnet/core/client-side/using-grunt

gulp- https://docs.Microsoft.com/en-us/aspnet/core/client-side/using-gulp

  1. デバッグとリリースの不快なタスクを作成します。
  2. Task Runner Explorerで実行したら、Visual StudioがTask Runner Explorerの出力ウィンドウからタスクを実行するために使用するコマンドをコピーします。 （バインディングを無視し、これらを設定しないでください）

Task Runner Screenshot

  1. パスを変更して、binフォルダーを基準とし、Visual Studioで設定されているモードで機能するようにします。上の画像から、コマンドを次のように変更します。

cmd.exe /c gulp -b ".\.." --color --gulpfile ".\..\Gulpfile.js" $(ConfigurationName)

  1. このコマンドをプロジェクトのビルド前タスクとして貼り付けます。
1
garethb

Visual Studioを使用していて、プロジェクトテンプレートが空白のアプリ（Apache Cordova）であり、ビルドイベントが表示されない場合を右クリックするとProjectNameをソリューションエクスプローラーで開き、以下のようなプロパティに移動します。

Project Properties

次に、Cordovaフックを使用してソリューション構成を管理できます。これらは、cordovaコマンドをカスタマイズするためにソリューションに挿入された特別なスクリプトであり、ソリューションのアクティビティ/イベントで実行されます。詳細については、「 this 」を参照してください。

従うべき手順：

  1. プロジェクトのルートディレクトリで、次のようにフックJavaScriptファイル（たとえば、「solutionConfigHook.js」）を含む新しいフォルダ（たとえば、「hooks」）を作成します。

    "use strict";

// function to run the '_default' task in 'gulpfile.js'
// based on solution configuration (DEBUG or RELEASE) prior to building the solution
module.exports = function (context) {
    var config = getConfig(context.cmdLine);
    if (!config) {
        console.log('Unable to determine build environment!');
        return;
    }
    else {
        var exec = require('child_process').exec, child;
        console.log('Runnung Gulp tasks now...');

        // 'solutionConfig' is the command line argument for config value passed to the gulpfile
        // '_default' is the task name in *gulpfile.js* that will have access to 'solutionConfig'
        var gulpCommand = 'gulp _default --solutionConfig ' + config.toString(); 
        console.log(gulpCommand);

        child = exec(gulpCommand, function (error, stdout, stderr) {
            console.log('stdout: ' + stdout);
            console.log('stderr: ' + stderr);
            if (error !== null) {
                console.log('exec error: ' + error);
            }
        });
    }
}    

// function to get the solution configuration using CLI
function getConfig(cmdLine) {
    var matches = /--configuration (\w+)/.exec(cmdLine);
    if (matches && matches.length > 1) {
        return matches[1];
    }
    return null;
}

  2. このフックをconfig.xmlファイルに追加し、希望するフックタイプに対して、プラットフォームごとに次のようにします。

    （参考までに、ここで抜粋したコードはWindowsプラットフォームのみを対象としており、「before_build」フックタイプで呼び出されます。）

    <platform name="Android">
    ... // other resources or attributes
    <hook src="hooks/solutionConfigHook.js" type="before_build" />
</platform>

  3. gulpfile.jsで、上部の参照を削除するか、またはTask Runner Explorerに移動して、それぞれを右クリックして、タスクのバインディングを削除します。タスクとすべてのバインディングのチェックを外します。

  4. gulpfile.jsにタスクを追加します。これは、フックタイプとしてconfig.xmlで定義されているアクティビティのフック自体によって呼び出されます。

    gulp.task('_default', function (solutionConfig) {
    if (solutionConfig == "Release") {
        // perform desired task here
    }
    else if (solutionConfig == "Debug" {
        // perform desired task here
    }
});
1
Srishti

Exec Buildタスクを使用してgulpタスクを実行しています。

<Target Name="BeforeBuild">
   <Exec Command="gulp beforeBuild --c $(Configuration) --p $(Platform)" />
</Target>
0
Figurys

タスク自体として設定を実行する代わりに、設定をフラグとしてgulpタスクに渡すことができる別のソリューションを次に示します。これにより、 gulp-if を使用して、タスク内からさまざまなプロシージャをトリガーできます。

注：この回答は、gulpがグローバルにインストールされていないことを前提としています。

  1. 開発依存としてgulpをインストールする

    npm install gulp --save-dev

  2. Gulpをnpmスクリプトとして登録する

    {
    "name": "vs-build-test",
    ...
    "scripts": {
        "gulp": "gulp"
    }
}

  3. インストール yargs カスタムフラグを処理する

    npm install yargs --save-dev

  4. configurationフラグのデフォルトでgulpfiles.jsにyargsを要求する

    var argv = require('yargs').default('configuration', 'Debug').argv

  5. gulpfile.jsでビルドタスクを作成します

    gulp.task('build', function () {
    console.log(`Build Configuration: ${argv.configuration}`);
});

  6. ビルド前のイベントを追加してgulpを実行します[Project Properties -> Build Events -> Pre-build Event]

    cmd.exe /c npm run gulp build -- --configuration $(ConfigurationName)

これが役立つ理由は、同じタスクを使用できるが、プロセスの一部のみを条件付きで実行できるようにするためです。 JavaScriptをビルドするタスクを例にとります：

gulp.task('build:js', function () {
    let isProduction = ${argv.configuration} === 'Release';

    ...

    return gulp.src(source)
            .pipe(gulpif(!isProduction, sourcemaps.init()))
            .pipe(concat(outputFile, { newLine: ';' }))
            .pipe(gulpif(isProduction, closure(closureFlags)))
            .pipe(gulpif(!isProduction, sourcemaps.write()))
            .pipe(gulp.dest(basePath));
});
0
roydukkey