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

Question

我在 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

Answer 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));
    });

Answer 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>

Answer 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>

Answer 4

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

然后您可以使用 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
       }
   });
   

Answer 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

Answer 6

我发现的最简单的方法：

1. 首先按照本指南使用 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

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

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

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

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

Answer 7

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

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

Answer 8

这是另一个解决方案，它允许您将配置作为标志传递给您的 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. gulpfiles.js 中需要 yargs，configuration 标志的默认值

   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));
});