Обнаружение релиза/отладки в gulp с помощью Visual Studio 2015

Ответ 1

В Visual Studio 2015 с интеграцией gulp мне нравится @edo limburg и @RamenChef ответить наилучшим образом.

У меня есть одностраничное приложение angular в том же решении, что и мой веб-api. При создании SPA я просто хотел заменить URL-адреса на серверы полномочий API и OAuth2 (OIDC) в html и пару файлов JavaScript.

Я создал gulpfile.js с задачей Debug и Release. Обратите внимание на регистрацию с учетом регистра:

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('./'));
)
}

FYI, я включил gulp -string-replace для обработки задач замены:

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

После того, как я протестировал задачи в Проводнике задач, я выгрузил файл проекта и отредактировал его, добавив следующий код прямо перед тегом конечного проекта:

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

Ответ 2

В визуальной студии,

• создать новый проект консоли
• Установите пакет самородок "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, выполняемая при сборке. По умолчанию для сборки - $(Конфигурация).
• Задача GulpCleanTask: gulp, выполняемая при очистке. По умолчанию отменяется.

Как вы видите, выполняемая задача принимает имя конфигурации в visual studio, поэтому, если вы создадите свой проект в "debug", задача "build-debug" будет выполнена

Вы также можете сделать это, если хотите создать настраиваемую задачу:

<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

Отказ от ответственности: я совершенно новичок в npm, grunt или gulp. Однако, я думаю, что я нашел простое решение, используя события предварительной сборки.

Добавьте следующую строку в командную строку события pre-build в проекте, содержащем файлы grunt (или gulp):

npm update && grunt $(ConfigurationName)

До тех пор, пока у вас есть задачи для копирования с тем же именем, что и ваша конфигурация сборки, вы должны быть установлены.

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

Вам понадобятся обычные предварительные условия на машине, на которой выполняется сборка. Не забудьте перезапустить VS после установки всего этого. Visual Studio должен запускаться как Администратор для выполнения всех задач grunt

• Visual Studio Extenstions - поиск и установка через Инструменты → Расширения и обновления:
  • Node JS Tools
  • Веб-Essentials
• NPM - https://nodejs.org/en/download/
• Ruby - Installer найден здесь http://rubyinstaller.org/downloads/
  • ВАЖНО: В установщике отметьте "Добавить исполняемые файлы Ruby на ваш PATH"
• Grunt and Sass - оба из них устанавливаются через командную строку (Run as admin)
  • gem install sass
  • npm install -g grunt-cli

Ответ 4

Я знаю, что это было некоторое время, но я недавно столкнулся с той же проблемой и был недоволен другими решениями и обходными решениями, которые я нашел в ответах здесь, на SO. Я нашел очень хорошее решение, с которым мы пошли в комментариях на странице aspnet github: https://github.com/aspnet/Home/issues/1231#issuecomment-182017985

Я надеюсь, что это поможет кому-то добраться до решения, с которым они счастливее быстрее, чем я.

Просто добавьте следующую строку к событию pre-build в конфигурации проекта

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

Ответ 5

Когда вы используете Visual Studio, а ваш шаблон проекта - это приложение "Blank" (Apache Cordova), и вы не можете видеть какие-либо события сборки, когда вы щелкните правой кнопкой мыши на ProjectName в обозревателе решений и перейдите в "Свойства", как показано ниже:

Затем вы можете управлять конфигурацией решения с помощью крючков Кордовы. Это специальные скрипты, введенные в ваше решение для настройки команд cordova и выполняются с вашими действиями/событиями вашего решения. Для получения дополнительной информации см. this.

Этапы:

• В корневой директории вашего проекта создайте новую папку (например, "крючки" ), содержащую файл javascript (например, "solutionConfigHook.js" ) следующим образом:

  "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 и вызван для типа hook' before_build).

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

• В gulpfile.js удалите привязку задачи (ов), удалив ссылку сверху или перейдя в Проводник запуска задач, а затем щелкнув правой кнопкой мыши по каждой задаче и снимите все привязки.

• Добавьте задачу в свой файл gulpfile.js, который будет вызываться самим крючком в активности, определенной как тип hook в файле config.xml.

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

Ответ 6

Я использую задачу Exec Build для выполнения задачи gulp:

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

Ответ 7

Самый простой способ, который я нашел:

• Получите ваши задачи grunt/ gulp, запущенные с помощью Проводника задач, сначала, следуя этому руководству. Однако не устанавливайте привязки.

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

2. Создайте задачи отладки и выпуска grunt/gulp.
3. После запуска с помощью Проводника запуска задач скопируйте команду, которую Visual Studio использует для запуска вашей задачи из выходного окна Проводника запуска задач. (Игнорируйте привязки, не устанавливайте их)

4. Измените пути таким образом, чтобы они относились к папке bin и работали в зависимости от того, какой режим установлен в Visual Studio. Из изображения выше вы измените команду на:

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

5. Вставьте эту команду в качестве задачи предварительной сборки в вашем проекте.

Ответ 8

Вот еще одно решение, позволяющее передать конфигурацию в качестве флага в вашу задачу gulp вместо того, чтобы запускать конфигурацию в качестве самой задачи. Это позволит вам использовать gulp-if для запуска различных процедур из задачи.

Примечание.. Этот ответ предполагает, что gulp не установлен глобально.

• Установите gulp как зависимость dev

  npm install gulp --save-dev
  

• Зарегистрируйте gulp как npm script

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

• Установите yargs для обработки пользовательских флагов

  npm install yargs --save-dev
  

• Требовать yargs в gulpfiles.js с по умолчанию для флага configuration

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

• Создайте задачу сборки в gulpfile.js

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

• Добавить событие pre-build для запуска 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));
});