使用 Visual Studio 2015 在 gulp 中检测发布/调试

Posted 2023-02-26

【中文标题】使用 Visual Studio 2015 在 gulp 中检测发布/调试

【英文标题】：Detect release / debug in gulp using Visual Studio 2015

【发布时间】：2015-10-21 03:14:20

【问题描述】：

我在 Visual Studio 中设置了一个 ASP.NET 5 项目并创建了一个 gulpfile.js，我用它来构建我的 typescript 和更少的文件。

对于发布版本，我想对我的 javascript 进行 uglify 和 concat，对于调试，我想在我的输出文件夹中包含我的 typescript- 和 maps。

有没有办法“告诉”当前配置？我看到有人提到设置 NODE_ENV 环境变量，但到目前为止，我看到的解决方案并不是最优的；他们需要在启动 IDE 之前使用命令行等。

我见过的最接近的解决方案在这里：http://www.colinsalmcorner.com/post/gulp--workaround-for-handling-vs-solution-configuration

但是，这确实意味着我无法再使用 IDE 中内置的 Task Runner Explorer

【问题讨论】：

Here 是我在这上面找到的唯一一个词，但它是从 12 月回来的。

当您想要开发或生产构建时，您是如何运行 gulp 的？您希望能够在 Visual Studio 中同时完成这两项工作吗？

@AdamBotley 我想要一种方法让我的 gulp 脚本检测 Visual Studio 中的当前配置设置，最重要的是调试或发布。现在我有几个 gulp 任务，它们执行不同的构建配置，例如构建-调试和构建-发布。问题是我必须根据我想要的构建手动运行它们，而不是仅仅将它绑定到任务运行器资源管理器中的“构建后”绑定。最优解；一个扩展的绑定系统，您可以在其中指定除事件之外的条件；例如;构建+调试后；运行构建调试。 build + release 后，build build-rel

@AdamBotley [cont] 由于 Microsoft 出于某种原因忽略了最佳解决方案（本来很容易实现），我想要一种将当前配置分配给变量的方法并相应地编写我的构建任务，例如if (debug) /* 编译源映射 */

@havardhu 老实说，我认为 link you posted above 将是最好的解决方案，直到/如果 Microsoft 提供一种更简单的方法来从 Task Runner Explorer 挂钩到您的构建配置。

【参考方案1】：

我知道这已经存在了一段时间，但我最近遇到了同样的问题，并且对我在 SO 的答案中找到的其他解决方案和变通办法不满意。我在 aspnet github 页面的 cmets 中找到了一个非常好的解决方案：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));
    );

【讨论】：

您也可以使用 $(ProjectDir) 宏来帮助构建 json 文件路径。例如：echo "config" : "$(ConfigurationName)" > "$(ProjectDir)buildConfig.json

【参考方案2】：

在 Visual Studio 2015 中，通过 gulp 集成，我最喜欢 @edo limburg 和 @RamenChef 的回答。

我在与我的 web api 相同的解决方案中有一个单页 angular 应用程序。 在构建 SPA 时，我只想将指向 API 和 OAuth2 (OIDC) 授权服务器的 URL 替换为 html 和几个 JavaScript 文件。

我创建了一个包含 Debug 和 Release 任务的 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>

【讨论】：

不错的帖子，完成并按预期工作。谢谢！

【参考方案3】：

在视觉工作室中，

创建一个新的控制台项目 在您的项目中安装 nugget 包“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

：在 clean 时执行的 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>

【讨论】：

这是一个可以在 C# 中工作的预处理器指令，但不幸的是，这不适用于 gulp，它只是一个 javascript，在这种情况下由 IDE 通过 Task Runner Explorer 执行

好的，所以我在答案中添加了“编辑”部分，告诉我它是否符合您的问题

这看起来很有趣。虽然它并没有真正使用内置的 Task Runner Explorer，但它仍然使我能够指定要运行的 gulp-script。我稍后会试一试。谢谢

【参考方案4】：

当您使用 Visual Studio 并且您的项目模板是 Blank App (Apache Cordova) 并且当您右键单击 时看不到任何 构建事件 em>ProjectName 在解决方案资源管理器中，然后转到如下属性：

然后您可以使用 Cordova 挂钩 管理您的解决方案配置。 这些是注入到您的解决方案中的特殊脚本，用于自定义cordova 命令，并与您的解决方案活动/事件一起执行。如需更多信息，请参阅this。

要遵循的步骤：

在项目的根目录中，创建一个包含挂钩 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;

在您的 config.xml 文件中添加此钩子，如下所示，针对所需的钩子类型为每个平台添加。

（供您参考，此处截取的代码仅适用于 windows 平台，并为 'before_build' 钩子类型调用。）

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

在您的 gulpfile.js 中，通过删除顶部的引用或转到 Task Runner Explorer 来移除任务的绑定然后右键单击每个任务并取消选中所有绑定。

在 gulpfile.js 中添加一个任务，该任务将由钩子本身在 config.xml 中定义为钩子类型的活动上调用。

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

【参考方案5】：

免责声明：我对 npm、grunt 或 gulp 完全陌生。但是，我认为我找到了一个使用预构建事件的简单解决方案。

将以下行添加到包含 grunt（或 gulp）文件的项目中的预构建事件命令行：

npm update && grunt $(ConfigurationName)

现在，只要您有与构建配置同名的 grunt 任务，您就应该准备就绪。

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

您需要在运行构建的机器上具备通常的先决条件。请记住在安装所有这些东西后重新启动 VS。 Visual Studio 需要以管理员身份运行才能执行所有 grunt 任务

Visual Studio 扩展 - 通过工具搜索和安装 -> 扩展和更新： Node JS 工具 网络必备 NPM - https://nodejs.org/en/download/ Ruby - 安装程序在这里找到http://rubyinstaller.org/downloads/ 重要提示：在安装程序中选中“将 Ruby 可执行文件添加到您的 PATH” Grunt 和 Sass - 这两个都通过命令提示符安装（以管理员身份运行） gem install sass npm install -g grunt-cli

【讨论】：

这是否适用于 gulp？

它应该与 gulp.task('Debug', function() ... ); 的工作方式相同；

【参考方案6】：

我发现的最简单的方法：

首先按照本指南使用 Task Runner Explorer 运行 grunt/gulp 任务。但不要设置任何绑定。

咕噜声-https://docs.microsoft.com/en-us/aspnet/core/client-side/using-grunt

一饮而尽-https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp

创建调试和发布 grunt/gulp 任务。 使用 Task Runner Explorer 运行后，从 Task Runner Explorer 的输出窗口复制 Visual Studio 用于运行任务的命令。 （忽略绑定，不要设置这些）

更改路径，使其与 bin 文件夹相关，并使用 Visual Studio 中设置的任何模式。从上图中，您可以将命令更改为：

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

将此命令粘贴为项目中的预构建任务。

【参考方案7】：

我正在使用 Exec Build 任务来运行 gulp 任务：

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

【参考方案8】：

这是另一个解决方案，它允许您将配置作为标志传递给您的 gulp 任务，而不是将配置作为任务本身运行。这将允许您使用gulp-if 从任务中触发不同的过程。

注意：此答案假定 gulp 未全局安装。

将 gulp 安装为开发依赖项

npm install gulp --save-dev

将 gulp 注册为 npm 脚本

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

安装yargs 来处理自定义标志

npm install yargs --save-dev

gulpfiles.js 中需要 yargs，configuration 标志的默认值

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

在gulpfile.js中创建构建任务

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

添加预构建事件以运行 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));
);