web-dev-qa-db-fra.com

Détecter la publication/débogage dans gulp à l'aide de Visual Studio 2015

J'ai configuré un projet ASP.NET 5 dans Visual Studio et créé un fichier gulpfile.js que j'utilise pour créer mon TypeScript et moins de fichiers. 

Pour les versions de version, je veux minimiser et concaténer mes javascripts, et pour le débogage, je veux inclure mon TypeScript et mes cartes dans mon dossier de sortie. 

Existe-t-il un moyen de "raconter" la configuration actuelle? J'ai entendu parler de la définition de la variable d'environnement NODE_ENV, mais les solutions que j'ai vues jusqu'à présent ne sont pas optimales. ils ont besoin d’utiliser la ligne de commande avant de démarrer l’EDI, etc.

La solution la plus proche que j'ai vue est la suivante: http://www.colinsalmcorner.com/post/gulp--workaround-for-hand-handling-vs-solution-configuration

Cela signifie cependant que je ne peux plus utiliser l’Explorateur de tâches Runner, intégré à l’EDI.

asp.netconfigurationtypescriptgulpvisual-studio-2015
34
havardhu

Dans Visual Studio 2015, avec l'intégration de gulp, j'aime bien les réponses de @edo limburg et de @RamenChef.

J'ai une application angulaire d'une seule page dans la même solution que mon API Web . Lors de la création du SPA, je voulais simplement remplacer les URL des serveurs API et OAuth2 (OIDC) dans un fichier HTML et quelques fichiers JavaScript .

J'ai créé un fichier gulpfile.js avec une tâche de débogage et de publication. Notez l'orthographe sensible à la casse:

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

Pour info, j’ai inclus gulp-string-replace pour gérer les tâches de remplacement: 

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

Après avoir testé les tâches dans Task Runner Explorer, j'ai déchargé le fichier de projet et l'ai édité, en ajoutant le code suivant juste avant la balise de fin du projet:

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

En studio visuel, 

  • créer un nouveau projet de console
  • Installez le package de nugget 'MSBuild.NodeTools' dans votre projet.

  • Déchargez votre fichier .csproj et modifiez-le en ajoutant la ligne dans la cible de génération postérieure.

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

Ici, il y a toutes les propriétés que vous pouvez utiliser: 

  • GulpFile : Chemin d'accès au fichier gulp. La valeur par défaut est $ (MSBuildProjectDirectory)\gulpfile. [Js | coffee].
  • GulpWorkingDirectory : Répertoire dans lequel la tâche gulp est exécutée. La valeur par défaut est $ (MSBuildProjectDirectory).
  • GulpBuildTask : tâche Gulp qui est exécutée lors de la construction. Valeurs par défaut pour construire - $ (Configuration).
  • GulpCleanTask : tâche Gulp qui s'exécute en mode minimal. Défauts à désélectionner.

Comme vous pouvez le constater, la tâche exécutée prend le nom de la configuration dans visual studio. Par conséquent, si vous générez votre projet dans "debug", la tâche "build-debug" sera exécutée

Vous pouvez aussi faire comme ceci, si vous voulez une tâche personnalisée: 

<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>
2
Hayha

Je sais que cela existe depuis un certain temps, mais j’ai récemment rencontré le même problème et j’ai été mécontent des autres solutions et solutions que j’ai trouvées dans les réponses fournies ici sur les SO. J'ai trouvé une très bonne solution que nous avons choisie dans les commentaires sur la page aspnet github: https://github.com/aspnet/Home/issues/1231#issuecomment-182017985

J'espère que cela aidera quelqu'un à trouver une solution qui lui convient mieux plus rapidement que moi.

Ajoutez simplement la ligne suivante à votre événement de pré-construction dans la configuration de projet

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

Avec cette petite beauté assise, vous pouvez la lire dans vos tâches et réagir en conséquence. Je l'utilise pour empêcher la minification des fichiers lorsque je suis en mode débogage, comme ceci:

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

Disclaimer: je suis tout à fait nouveau chez npm, grunt ou gulp. Cependant, je pense avoir trouvé une solution simple en utilisant des événements de pré-génération. 

Ajoutez la ligne suivante à votre ligne de commande d'événement pré-génération dans le projet contenant les fichiers grunt (ou gulp):

npm update && grunt $(ConfigurationName)

Maintenant, tant que vous avez des tâches de grognement portant le même nom que votre configuration de construction, vous devriez être prêt.

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

Vous aurez besoin des pré-requis habituels sur la machine qui exécute la construction. N'oubliez pas de redémarrer VS après avoir installé tout cela. Visual Studio doit être exécuté en tant qu'administrateur pour pouvoir exécuter toutes les tâches fastidieuses.

  • Visual Studio Extenstions - Rechercher et installer via Outils -> Extensions et mises à jour:
    • Outils de nœud JS
    • Web Essentials
  • NPM - https://nodejs.org/en/download/
  • Ruby - Installer trouvé ici http://rubyinstaller.org/downloads/
    • IMPORTANT: dans le programme d'installation, cochez la case "Ajouter les exécutables Ruby à votre PATH".
  • Grunt et Sass - Les deux sont installés à l'aide de la commande Invite (Exécuter en tant qu'administrateur)
    • gem install sass
    • npm install -g grunt-cli
1
Alex Tselevich

Lorsque vous utilisez Visual Studio et que votre modèle de projet est un application vide (Apache Cordova), vous ne pouvez voir aucun événements de construction lorsque vous cliquez avec le bouton droit de la souris sur NomProjet. _ dans l'Explorateur de solutions et accédez à Propriétés comme ci-dessous:

 Project Properties

Vous pouvez ensuite gérer la configuration de votre solution à l’aide de Cordova hooks . Ce sont les scripts spéciaux injectés dans votre solution pour personnaliser les commandes cordova et sont exécutés avec les activités/événements de votre solution. Pour plus d'informations, voir this .

Étapes à suivre:

  1. Dans le répertoire racine de votre projet, créez un nouveau dossier (par exemple, "hooks") contenant le fichier javascript (par exemple, "solutionConfigHook.js"), comme suit:

    "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. Ajoutez ce hook dans votre fichier config.xml comme suit pour chaque plate-forme par rapport au type de hook souhaité.

    (Pour votre information, le code extrait ici concerne uniquement la plate-forme Windows et est appelé pour le type de hook 'before_build'.)

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

  3. Dans votre gulpfile.js, supprimez la liaison de la ou des tâches en supprimant la référence située en haut ou en accédant à la Task Runner Explorer, puis en cliquant avec le bouton droit de la souris sur chaque tâche. décochant toutes les liaisons.

  4. Ajoutez une tâche dans votre gulpfile.js qui sera appelée par le hook lui-même pour l'activité définie comme type de hook dans config.xml.

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

J'utilise la tâche Exec Build pour exécuter une tâche gulp:

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

Voici une autre solution qui vous permet de passer la configuration en tant qu’indicateur à votre tâche gulp, au lieu de l’exécuter en tant que tâche elle-même. Cela vous permettrait d'utiliser gulp-if pour déclencher différentes procédures à partir de la tâche.

Remarque: Cette réponse suppose que gulp n'est pas installé globalement.

  1. Installer gulp en tant que dépendance de dev

    npm install gulp --save-dev

  2. Enregistrer gulp en tant que script npm

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

  3. Installez yargs pour gérer les drapeaux personnalisés

    npm install yargs --save-dev

  4. Exiger des yargs dans gulpfiles.js avec une valeur par défaut pour l'indicateur configuration

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

  5. Créer une tâche de construction dans gulpfile.js

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

  6. Ajouter un événement de pré-construction pour exécuter gulp [Project Properties -> Build Events -> Pre-build Event]

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

Cela peut être utile pour pouvoir utiliser les mêmes tâches tout en n'exécutant conditionnellement que des parties du processus. Prenons par exemple une tâche qui construit du 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