asp.net - tag - select asp-for asp-items

Detectar lanzamiento/depuración en trago usando Visual Studio 2015

Question

Configuré un proyecto de ASP.NET 5 en Visual Studio y creé un archivo gulpfile.js que utilicé para construir mi mecanografiado y menos archivos.

Para las compilaciones de lanzamiento, quiero uglify y concaturar mis javascripts, y para la depuración, quiero incluir mi mecanografiado y los mapas en mi carpeta de salida.

¿Hay alguna manera de "decir" tragar la configuración actual? He visto alguna mención sobre la configuración de la variable de entorno NODE_ENV, pero hasta ahora las soluciones que he visto no son óptimas; requieren usar la línea de comando antes de iniciar el IDE, etc.

La solución más cercana que he visto está aquí: http://www.colinsalmcorner.com/post/gulp--workaround-for-handling-vs-solution-configuration

Sin embargo, esto significa que ya no puedo utilizar Task Runner Explorer, que está integrado en el IDE

Answer 1

Aquí hay otra solución que le permite pasar la configuración como una bandera a su tarea de trago, en lugar de ejecutar la configuración como la tarea misma. Esto le permitiría usar gulp-if para activar diferentes procedimientos desde dentro de la tarea.

Nota: esta respuesta asume que gulp no está instalado globalmente.

1. Instala gulp como una dependencia dev

   npm install gulp --save-dev

2. Registrar gulp como un script npm

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

3. Instalar yargs para manejar banderas personalizadas

   npm install yargs --save-dev

4. Requerir yargs en gulpfiles.js con un valor predeterminado para la bandera de configuration

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

5. Crear una tarea de compilación en gulpfile.js

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

6. Agregue un evento de precompilación para ejecutar gulp [Project Properties -> Build Events -> Pre-build Event]

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

La razón por la que esto puede ser útil es para que pueda usar las mismas tareas pero ejecute condicionalmente solo partes del proceso. Tomemos por ejemplo una tarea que construye 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));
});

Answer 2

Cuando está utilizando Visual Studio y su plantilla de proyecto es una aplicación en blanco (Apache Cordova) y no puede ver ningún evento de compilación cuando hace clic derecho en ProjectName en el Explorador de soluciones y va a Propiedades como a continuación:

A continuación, puede administrar su Configuración de la solución utilizando los ganchos de Cordova . Estos son los scripts especiales que se inyectan en su solución para personalizar los comandos de cordova y se ejecutan con sus actividades / eventos de solución. Para más información, mira this .

Pasos a seguir:

1. En el directorio raíz de su proyecto, cree una nueva carpeta (por ejemplo, ''hooks'') que contenga el archivo hook javascript (digamos ''solutionConfigHook.js'') de la siguiente manera:

   "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. Agregue este gancho en su archivo config.xml de la siguiente manera para cada plataforma con el tipo de gancho deseado.

   (Para su referencia, el código recortado aquí es solo para la plataforma de Windows y se llama para el tipo de enlace ''before_build'').

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

3. En su gulpfile.js , elimine el enlace de la (s) tarea (s) borrando la referencia en la parte superior o yendo a Task Runner Explorer y luego haciendo clic con el botón derecho en cada tarea y desmarcando todas las vinculaciones.

4. Agregue una tarea en su gulpfile.js que será llamada por el gancho en la actividad definida como tipo de gancho en config.xml .

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

Answer 3

Descargo de responsabilidad: soy completamente nuevo para npm, gruñido o trago. Sin embargo, creo que encontré una solución simple usando eventos de preconstrucción.

Agregue la siguiente línea a su línea de comandos de evento de precompilación en el proyecto que contiene los archivos gruñidos (o trago):

npm update && grunt $(ConfigurationName)

Ahora, siempre que tenga tareas de grunt con el mismo nombre que su configuración de compilación, debería estar todo listo.

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

Necesitará los prerrequisitos habituales en la máquina que ejecuta la compilación. Recuerde reiniciar VS después de instalar todo esto. Visual Studio debe ejecutarse como administrador para ejecutar todas las tareas de grunt

• Extensiones de Visual Studio - Buscar e instalar a través de Herramientas -> Extensiones y actualizaciones:
  • Nodo JS Tools
  • Web Essentials
• NPM - https://nodejs.org/en/download/
• Ruby - Instalador encontrado aquí http://rubyinstaller.org/downloads/
  • IMPORTANTE: en el instalador, marque "Agregar ejecutables de Ruby a su RUTA"
• Grunt y Sass: ambos se instalan a través del símbolo del sistema (Ejecutar como administrador)
  • gem install sass
  • npm install -g grunt-cli

Answer 4

En Visual Studio 2015, con la integración gulp, me gusta @edo limburg y @ RamenChef responden mejor.

Tengo una aplicación angular de una sola página en la misma solución que mi API web. Al construir el SPA, solo quería reemplazar las URL a los servidores de autoridad API y OAuth2 (OIDC) en un html y un par de archivos JavaScript.

Creé un gulpfile.js con una tarea de depuración y liberación. Tenga en cuenta la ortografía de mayúsculas y minúsculas:

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, incluí gulp-string-replace para manejar las tareas de reemplazo:

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

Después de probar las tareas en Task Runner Explorer, descargué el archivo del proyecto y lo edité, agregando el siguiente código justo antes de la etiqueta del proyecto final:

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

Answer 5

En el estudio visual,

• crea un nuevo proyecto de consola
• Instale el paquete de nugget ''MSBuild.NodeTools'' en su proyecto

• Descargue su archivo .csproj y edítelo agregando la línea en el objetivo posterior a la compilación

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

Aquí hay toda la propiedad que puede usar:

• GulpFile : Camino a gulpfile. El valor predeterminado es $ (MSBuildProjectDirectory) / gulpfile. [Js | coffee].
• GulpWorkingDirectory : Directorio en cuyo contexto se ejecuta la tarea Gulp. El valor predeterminado es $ (MSBuildProjectDirectory).
• GulpBuildTask : tarea Gulp que se ejecuta en compilación. Predeterminado para compilar - $ (Configuración).
• GulpCleanTask : tarea Gulp que se ejecuta en limpio. Predeterminado para desarmar

Como puede ver, la tarea ejecutada toma el nombre de la configuración en Visual Studio, por lo que si crea su proyecto en "depuración", se ejecutará la tarea "build-debug"

También puede hacerlo así, si desea una tarea personalizada:

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

Estoy usando la tarea de compilación de Exec para ejecutar una tarea de trago:

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

Answer 7

La forma más fácil que he encontrado:

1. Primero, ejecute las tareas de grunt / gulp utilizando Task Runner Explorer siguiendo esta guía. Sin embargo, no establezca ningún enlace.

gruñido - 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. Crear tareas de depuración y liberación de grunt / gulp.
3. Una vez que se ejecuta con el Explorador de tareas en el Explorador, copie el comando que Visual Studio usa para ejecutar su tarea desde la ventana de salida de Task Runner Explorer. (Ignore las fijaciones, no las configure)

4. Cambie las rutas para que estén relacionadas con la carpeta bin, y para trabajar con el modo que esté configurado en Visual Studio. De la imagen de arriba, cambiarías el comando a:

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

5. Pegue este comando como una tarea de preconstrucción en su proyecto.

Answer 8

Sé que esto ha existido por un tiempo, pero recientemente me encontré con el mismo problema y no estaba satisfecho con las otras soluciones y soluciones que encontré en las respuestas aquí en SO. Encontré una solución muy buena con la que fuimos en los comentarios en la página de aspnet github: https://github.com/aspnet/Home/issues/1231#issuecomment-182017985

Espero que ayude a alguien a llegar a una solución con la que estén más felices con más rapidez que yo.

Simplemente, agregue la siguiente línea a su evento de preconstrucción en la configuración del proyecto

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

Con esa pequeña belleza sentada, puede leerla en sus tareas y reaccionar en consecuencia. Lo uso para evitar minificar archivos cuando estoy en modo de depuración de esta manera:

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