Comment utiliser npm avec ASP.NET Core


117

J'utilise npm pour gérer les bibliothèques client jQuery, Bootstrap, Font Awesome et similaires dont j'ai besoin pour mon application ASP.NET Core.

L'approche qui a fonctionné pour moi a commencé par l'ajout d'un fichier package.json au projet, qui ressemble à ceci:

{
    "version": "1.0.0",
    "name": "myapp",
    "private": true,
    "devDependencies": {
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.6.1",
    "jquery": "^2.2.3"
  }
}

npm restaure ces packages dans le dossier node_modules qui est au même niveau que wwwroot dans le répertoire du projet:

entrez la description de l'image ici

Comme ASP.NET Core sert les fichiers statiques du dossier wwwroot et que node_modules n'est pas là, j'ai dû apporter quelques modifications pour que cela fonctionne, le premier: ajouter app.UseFileServer juste avant app.UseStaticFiles dans mon démarrage. fichier cs:

app.UseFileServer(new FileServerOptions()
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), 
    RequestPath = new PathString("/node_modules"),
    EnableDirectoryBrowsing = true
});

app.UseStaticFiles();

et le second, y compris node_modules dans mes publishOptions dans le fichier project.json:

"publishOptions": {
  "include": [
    "web.config",
    "wwwroot",
    "Views",
    "node_modules"
  ]
},

Cela fonctionne dans mon environnement de développement et cela fonctionne également lorsque je le déploie sur mon instance Azure App Service, les fichiers statiques jquery, bootstrap et font-awesome sont bien servis, mais je ne suis pas sûr de cette implémentation.

Quelle est la bonne approche pour y parvenir?

Cette solution est venue après avoir collecté beaucoup d'informations à partir de plusieurs sources et en avoir essayé certaines qui n'ont pas fonctionné, et il semble un peu étrange de devoir servir ces fichiers depuis l'extérieur de wwwroot.

Tout conseil sera grandement apprécié.



Ce lien a un exemple de travail sur ASP.NET Core w / npm : ievangelistblog.wordpress.com/2016/01/13/…
David Pine

2
Une chose qui m'est venue est d'utiliser le Bundler and Minifier- Spécifiez que la source est Outside wwwroot et lorsque vous construisez, il construit le JS dans wwwroot. C'est la bonne façon. Vous ne devriez pas servir de contenu à partir de node_modules
Piotr Kula

Je découragerais fortement quiconque de servir le node_modulesdossier de manière statique . a) ce n'est pas ainsi que l'éco-système est conçu b) c'est un risque pour la sécurité, l'un de vos packages installés peut fuir des informations sensibles. La bonne façon est de configurer un pipeline de construction (grunt / gulp / node / webpack) qui publie des fichiers dans un dossier srcou whateverdédié au service de fichiers frontaux statiques
CervEd

Réponses:


45

En publiant votre tout node_modules dossier, vous déployez bien plus de fichiers que vous n'en aurez réellement besoin en production.

Au lieu de cela, utilisez un exécuteur de tâches dans le cadre de votre processus de génération pour empaqueter les fichiers dont vous avez besoin et les déployer sur votre wwwroot dossier. Cela vous permettra également de concaténer et de réduire vos ressources en même temps, plutôt que d'avoir à desservir chaque bibliothèque individuellement.

Vous pouvez ensuite supprimer complètement la FileServerconfiguration et vous fier à la UseStaticFilesplace.

Actuellement, gulp est le lanceur de tâches VS de choix. Ajoutez un gulpfile.jsà la racine de votre projet et configurez-le pour traiter vos fichiers statiques lors de la publication.

Par exemple, vous pouvez ajouter la scriptssection suivante à votre project.json:

 "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  },

Ce qui fonctionnerait avec le gulpfile suivant (par défaut lors de l'échafaudage avec yo):

/// <binding Clean='clean'/>
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

36
Je ne sais pas comment c'est la réponse à la question. C'est presque exactement ce que Microsoft a pour configurer Gulp ici ( docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp ). Cependant, pour autant que je sache, cela ne prend pas le contenu de mon répertoire node_modules et ne l'ajoute pas à 'lib' ou ne le rend pas utilisable dans l'un de mes fichiers ... Je suis très nouveau dans ce domaine si incroyablement confus par l'apparence incroyablement incroyable nouveau monde compliqué du développement Web ...
Gerard Wilkinson

32
Compliqué bien. Je suis prêt à abandonner complètement le front-end et à simplement travailler sur les API.
Luke Puplett

12
C'est la bonne approche en général, mais la réponse laisse de côté une étape cruciale: copier les fichiers du dossier node_modules dans le dossier wwwroot en tant que tâche Gulp. Commencez par var nodeRoot = './node_modules/'; et ajoutez une tâche qui copie le sous-dossier souhaité de nodeRoot dans le sous-dossier approprié de webroot. Pas le temps d'élaborer, mais s'il y a de l'intérêt, je pourrai ajouter des détails plus tard.
Doug

32
Pourquoi personne n'a soulevé l'évidence: "Pourquoi devons-nous nous poser cette question!" Pourquoi installons-nous intentionnellement des fichiers dans un emplacement où ils ne peuvent pas être utilisés? Ensuite, parce que nos fichiers ne sont pas accessibles, nous installons et configurons un utilitaire élaboré pour les copier dans un emplacement où ils peuvent être utilisés. C'est vraiment ridicule.
Sam

8
Parce que l'outillage ici est de la merde, fondamentalement. Utiliser npm, c'est simplement utiliser npm, comme vous le feriez pour n'importe quoi . Il n'y a rien de spécifique à ASP.NET Core. Tout entre node_modulesparce que c'est ce que fait npm. La tâche gulp est nécessaire pour déplacer les choses au bon endroit, c'est-à-dire là où vous en avez réellement besoin. Je pense que le problème est que Microsoft a fourni une si belle intégration avec Bower, mais maintenant Bower est mort (ou du moins mourant) et Microsoft n'a fourni aucun outil alternatif.
Chris Pratt

41

entrez la description de l'image ici

  • En utilisant npm pour gérer les bibliothèques côté client est un bon choix (par opposition à Bower ou NuGet), vous pensez dans la bonne direction :)
  • Divisez les projets côté serveur (ASP.NET Core) et côté client (par exemple Angular 2, Ember, React) dans des dossiers séparés (sinon votre projet ASP.NET peut avoir beaucoup de bruit - tests unitaires pour le code côté client, node_modules dossier, construire des artefacts, etc.). Les développeurs front-end travaillant dans la même équipe avec vous vous en remercieront :)
  • Restaurez les modules npm au niveau de la solution (de la même manière que vous restaurez les packages via NuGet - pas dans le dossier du projet), de cette façon, vous pouvez également avoir des tests unitaires et d'intégration dans un dossier séparé (par opposition à des tests JavaScript côté client dans votre Projet ASP.NET Core).
  • L'utilisation pourrait ne pas avoir besoin FileServer, ayantStaticFiles devrait suffire pour servir des fichiers statiques (.js, images, etc.)
  • Utilisez Webpack pour regrouper votre code côté client en un ou plusieurs morceaux (bundles)
  • Vous n'aurez peut-être pas besoin de Gulp / Grunt si vous utilisez un bundler de modules tel que Webpack
  • Écrire des scripts d'automatisation de construction en ES2015 + JavaScript (par opposition à Bash ou PowerShell), ils fonctionneront sur plusieurs plates-formes et seront plus accessibles à une variété de développeurs Web (tout le monde parle JavaScript de nos jours)
  • Renommez wwwrooten public, sinon la structure des dossiers dans Azure Web Apps sera déroutante ( D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public)
  • Publiez uniquement la sortie compilée sur Azure Web Apps (vous ne devez jamais pousser node_modulesvers un serveur d'hébergement Web). Voir à tools/deploy.jstitre d'exemple.

Visitez ASP.NET Core Starter Kit sur GitHub (avertissement: je suis l'auteur)


2
Bonne réponse, bravo pour votre travail visant à fournir à la communauté un kit de démarrage!
David Pine

7
J'ai réussi à créer une énorme application Angular publique pour une grande marque britannique plus tôt cette année, et pourtant je ne pouvais même pas comprendre la plupart de cette réponse. Je ne peux même pas commencer à l'apprendre car c'est partout. Avoir littéralement une crise de carrière.
Luke Puplett

c'est un bon résumé des choses à faire et à ne pas faire lors de l'écriture et de la gestion des scripts et des fichiers côté client. J'ai économisé mon temps et mes recherches. Bravo à vous!
Sangeeta

Malheureusement, Visual Studio (bêtement à mon humble avis) traite le répertoire "wwwroot" spécialement, en se basant uniquement sur son nom, en lui donnant une icône "racine Web" spéciale dans l'explorateur de solutions et en marquant son contenu comme "Aucun" par défaut plutôt que "Contenu" . Si l'intention est d'y placer des fichiers servis statiquement et que vous utilisez Visual Studio, vous devriez probablement laisser le nom "wwwroot". Je suis d'accord que c'est une mauvaise réputation.
Jez

27

Installez le Bundler et le Minifier dans les extensions Visual Studio

Ensuite, vous créez un bundleconfig.jsonet entrez ce qui suit comme:

// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
 {
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": false
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

Ainsi, le bundler et le minifier (basés sur gulp) ont accès aux fichiers source (qui doivent être exclus de Visual Studio et également exclus de GIT) et les placent dans wwwroot comme spécifié

seul effet secondaire à chaque fois que vous enregistrez, il l'exécutera (mais vous pouvez le configurer pour l'exécuter manuellement)


4
Après avoir vu que Bower est mort et que je ne peux plus mettre à jour Bootstrap sans passer à NPM, cela semble être mon approche préférée. Gulp ou Webpack semblent exagérés par rapport à cette solution simple qui figure déjà dans les derniers modèles de projet MVC. Merci pour le partage!
Matt Sanders

1
Comment les images référencées en CSS seront-elles traitées ici? Je suis confronté à un problème avec les images toujours dans le dossier node_modules où css et js ont été déplacés vers www. Une idée de comment résoudre ce problème?
VPP

1
Est-ce indépendant de l'IDE? Comment cela fonctionnera-t-il si une partie de votre équipe utilise VS Code, et comment cela joue-t-il dans un pipeline de création de CD?
Jacob Stamm

Lorsque vous installez le package NuGet Bundler et Minifier, les documents indiquent qu'il injecte des cibles de construction qui s'exécutent au moment de la construction et du nettoyage. Je suppose qu'une fois en place, cela fonctionnera bien quel que soit l'IDE utilisé, non? Voir plus: docs.microsoft.com/en-gb/aspnet/core/client-side
Ciaran Gallagher

Le bundler n'est utile que pour spécifier ces scripts en dehors de l'environnement de développement. À partir de ma page _Layout, je dois toujours référencer manuellement les fichiers JS et CSS dont j'ai besoin, mais le dossier node_modules est en dehors du site Web ... donc je ne pense pas que cela résout le problème correctement, vous avez toujours besoin d'un script Gulp pour copier sur les fichiers nécessaires dans mon dossier wwwroot.
Ciaran Gallagher

21

Je vous donne deux réponses. npm combiné à d'autres outils est puissant mais nécessite un certain travail de configuration. Si vous souhaitez simplement télécharger certaines bibliothèques, vous souhaiterez peut-être utiliser Library Manager à la place (publié dans Visual Studio 15.8).

NPM (avancé)

Ajoutez d'abord package.json à la racine de votre projet. Ajoutez le contenu suivant:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "del": "3.0.0"
  },
  "dependencies": {
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "bootstrap": "3.3.7"
  }
}

Cela obligera NPM à télécharger Bootstrap, JQuery et d'autres bibliothèques utilisées dans un nouveau projet principal asp.net dans un dossier nommé node_modules. L'étape suivante consiste à copier les fichiers dans un endroit approprié. Pour ce faire, nous utiliserons gulp, qui a également été téléchargé par NPM. Ajoutez ensuite un nouveau fichier à la racine de votre projet nommé gulpfile.js . Ajoutez le contenu suivant:

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var nodeRoot = './node_modules/';
var targetPath = './wwwroot/lib/';

gulp.task('clean', function () {
    return del([targetPath + '/**/*']);
});

gulp.task('default', function () {
    gulp.src(nodeRoot + "bootstrap/dist/js/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/js"));
    gulp.src(nodeRoot + "bootstrap/dist/css/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/css"));
    gulp.src(nodeRoot + "bootstrap/dist/fonts/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/fonts"));

    gulp.src(nodeRoot + "jquery/dist/jquery.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.map").pipe(gulp.dest(targetPath + "/jquery/dist"));

    gulp.src(nodeRoot + "jquery-validation/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation/dist"));

    gulp.src(nodeRoot + "jquery-validation-unobtrusive/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation-unobtrusive"));
});

Ce fichier contient un code JavaScript qui est exécuté lorsque le projet est généré et nettoyé. Il copiera tous les fichiers nécessaires vers lib2 ( pas lib - vous pouvez facilement changer cela ). J'ai utilisé la même structure que dans un nouveau projet, mais il est facile de changer les fichiers vers un emplacement différent. Si vous déplacez les fichiers, assurez-vous également de mettre à jour _Layout.cshtml . Notez que tous les fichiers du répertoire lib2 seront supprimés lorsque le projet sera nettoyé.

Si vous cliquez avec le bouton droit sur gulpfile.js , vous pouvez sélectionner Task Runner Explorer . De là, vous pouvez exécuter gulp manuellement pour copier ou nettoyer des fichiers.

Gulp pourrait également être utile pour d'autres tâches telles que la réduction des fichiers JavaScript et CSS:

https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1

Gestionnaire de bibliothèque (simple)

Cliquez avec le bouton droit sur votre projet et sélectionnez Gérer les bibliothèques côté client . Le fichier libman.json est maintenant ouvert. Dans ce fichier, vous spécifiez la bibliothèque et les fichiers à utiliser et où ils doivent être stockés localement. Vraiment simple! Le fichier suivant copie les bibliothèques par défaut utilisées lors de la création d'un nouveau projet ASP.NET Core 2.1:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "jquery-validate@1.17.0",
      "files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "jquery-validation-unobtrusive@3.2.10",
      "files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    },
    {
      "library": "twitter-bootstrap@3.3.7",
      "files": [
        "css/bootstrap.css",
        "css/bootstrap.css.map",
        "css/bootstrap.min.css",
        "css/bootstrap.min.css.map",
        "css/bootstrap-theme.css",
        "css/bootstrap-theme.css.map",
        "css/bootstrap-theme.min.css",
        "css/bootstrap-theme.min.css.map",
        "fonts/glyphicons-halflings-regular.eot",
        "fonts/glyphicons-halflings-regular.svg",
        "fonts/glyphicons-halflings-regular.ttf",
        "fonts/glyphicons-halflings-regular.woff",
        "fonts/glyphicons-halflings-regular.woff2",
        "js/bootstrap.js",
        "js/bootstrap.min.js",
        "js/npm.js"
      ],
      "destination": "wwwroot/lib/bootstrap/dist"
    },
    {
      "library": "list.js@1.5.0",
      "files": [ "list.js", "list.min.js" ],
      "destination": "wwwroot/lib/listjs"
    }
  ]
}

Si vous déplacez les fichiers, assurez-vous également de mettre à jour _Layout.cshtml .


2
Gestionnaire de bibliothèque - je n'en ai jamais entendu parler, mais c'est exactement ce dont j'ai besoin! Cela devrait être la bonne réponse.
codeMonkey

1
Pour éviter une erreur engouffreur que je devais changer la première ligne de la tâche par défaut dans le fichier gulpfile.jsà gulp.task('default', function (done) {puis ajouter une dernière ligne dans cette fonction qui suit: done();Sinon , je le message d'erreurThe following tasks did not complete: Did you forget to signal async completion?
Manfred

7

Au lieu d'essayer de servir le dossier des modules de nœuds, vous pouvez également utiliser Gulp pour copier ce dont vous avez besoin sur wwwroot.

https://docs.asp.net/en/latest/client-side/using-gulp.html

Cela pourrait aussi aider

Visual Studio 2015 ASP.NET 5, tâche Gulp ne copiant pas les fichiers à partir de node_modules


4
J'aime vraiment le deuxième lien, cela me semble familier. ;)
David Pine

1
Ce n'est pas très pratique lorsque vous mélangez des fichiers source d'application Web ASP.NET Core avec des modules npm et une sortie de génération de code côté client. C'est la raison pour laquelle l'équipe ASP.NET supprime Gulp, package.json des modèles de projet ASP.NET MVC par défaut.
Konstantin Tarkus

Je ne savais pas ça. Quand j'étais à VS Live en mars, ils en parlaient tous, mais cela a beaucoup changé depuis.
Dave_750

6

Quelle est la bonne approche pour y parvenir?

Il existe de nombreuses "bonnes" approches, il vous suffit de décider laquelle correspond le mieux à vos besoins. Il semble que vous ne compreniez pas comment utiliser node_modules...

Si vous connaissez NuGet, vous devriez penser à npm comme son équivalent côté client. Où le node_modulesrépertoire est comme le binrépertoire de NuGet . L'idée est que ce répertoire n'est qu'un emplacement commun pour stocker les paquets, à mon avis, il est préférable de prendre un dependencysur les paquets dont vous avez besoin comme vous l'avez fait dans le package.json. Ensuite, utilisez un exécuteur de tâches comme Gulppar exemple pour copier les fichiers dont vous avez besoin dans l' wwwrootemplacement souhaité .

J'ai écrit un article de blog à ce sujet en janvier qui détaille npm , Gulp et tout un tas d'autres détails qui sont toujours pertinents aujourd'hui. De plus, quelqu'un a attiré l'attention sur ma question SO que j'ai posée et m'a finalement répondu ici , ce qui est probablement utile.

J'ai créé un Gistqui montre le gulpfile.jscomme exemple.

Dans votre, Startup.csil est toujours important d'utiliser des fichiers statiques:

app.UseStaticFiles();

Cela garantira que votre application peut accéder à ce dont elle a besoin.


3
"J'ai écrit un article de blog à ce sujet en janvier qui détaille npm, Gulp et tout un tas d'autres détails qui sont toujours d'actualité." le fait que de janvier à juin et que vous devez mentionner est toujours pertinent est exactement mon problème avec la peine d'apprendre l'un de ces trucs de nuit. J'ai déjà trop à apprendre sans perdre mon temps à la mode. Ce n'est pas de ta faute David, tu es très utile, mais je n'aime pas ce nouveau monde éphémère.
Luke Puplett

5

Une approche beaucoup plus simple consiste à utiliser le package Nuget OdeToCode.UseNodeModules. Je viens de le tester avec .Net Core 3.0. Tout ce que vous avez à faire est d'ajouter le package à la solution et de le référencer dans la méthode Configure de la classe Startup:

app.UseNodeModules();

Je l'ai appris grâce à l'excellent cours Construire une application Web avec ASP.NET Core, MVC, Entity Framework Core, Bootstrap et Angular Pluralsight de Shawn Wildermuth.


1
Et comment ajouter des packages npm?
Luca Ziegler

Il existe plusieurs façons d'ajouter des packages npm à votre projet. Je préfère simplement les taper dans le fichier package.json sous le nœud des dépendances comme expliqué ici: stackoverflow.com/a/49264424/5301317
Mariusz Bialobrzeski

@MariuszBialobrzeski Merci pour le partage. C'est une solution intéressante.
Sau001

@MariuszBialobrzeski Avez-vous dû faire autre chose pour déployer le contenu statique de node_modules dans vos pipelines DevOps? Ou avez-vous archivé le dossier node_modules?
Sau001

1
@ Sau001 Malheureusement, je n'ai jamais eu la chance de travailler avec des pipelines DevOps. Le dossier node_modules a tendance à devenir assez gros avec donc j'éviterais certainement de le vérifier si possible.
Mariusz Bialobrzeski

1

Shawn Wildermuth a un bon guide ici: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

L'article est lié au gulpfile sur GitHub où il a mis en œuvre la stratégie dans l'article. Vous pouvez simplement copier et coller la plupart du contenu de gulpfile dans le vôtre, mais assurez-vous d'ajouter les packages appropriés dans package.json sous devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream


1

J'ai trouvé un meilleur moyen de gérer les packages JS dans mon projet avec les exécuteurs de tâches NPM Gulp / Grunt. Je n'aime pas l'idée d'avoir un NPM avec une autre couche de bibliothèque javascript pour gérer l '«automatisation», et mon exigence numéro un est de simplement exécuter la mise à jour de npm sans aucun autre souci si je dois exécuter des trucs gulp, s'il réussit à tout copier et vice versa.

La manière NPM:

  • Le minificateur JS est déjà inclus dans le noyau ASP.net, recherchez bundleconfig.json donc ce n'est pas un problème pour moi (ne pas compiler quelque chose de personnalisé)
  • La bonne chose à propos de NPM est qu'il a une bonne structure de fichiers afin que je puisse toujours trouver les versions précompilées / minifiées des dépendances sous le node_modules / module / dist
  • J'utilise un script NPM node_modules / .hooks / {eventname} qui gère la copie / mise à jour / suppression des fichiers Project / wwwroot / lib / module / dist / .js, vous pouvez trouver la documentation ici https: // docs.npmjs.com/misc/scripts (je mettrai à jour le script que j'utilise pour git une fois qu'il sera plus poli) Je n'ai pas besoin d'exécuteurs de tâches supplémentaires ( outils .js que je n'aime pas) ce qui garde mon projet propre et simple.

La manière python:

https://pypi.python.org/pyp ... mais dans ce cas, vous devez maintenir les sources manuellement


1

Veuillez excuser la longueur de ce message.

Il s'agit d'un exemple de travail utilisant ASP.NET Core version 2.5.

Il est à noter que project.json est obsolète ( voir ici ) au profit de .csproj . Un problème avec .csproj . fichier est la grande quantité de fonctionnalités et le fait qu'il n'y a pas d'emplacement central pour sa documentation ( voir ici ).

Encore une chose, cet exemple exécute ASP.NET core dans un conteneur Docker Linux (Alpine 3.9); donc les chemins refléteront cela. Il utilise également gulp ^ 4.0. Cependant, avec quelques modifications, il devrait fonctionner avec les anciennes versions d'ASP.NET Core, Gulp, NodeJS et également sans Docker.

Mais voici une réponse:

gulpfile.js voir le vrai exemple de travail ici

// ROOT and OUT_DIR are defined in the file above. The OUT_DIR value comes from .NET Core when ASP.net us built.
const paths = {
    styles: {
        src: `${ROOT}/scss/**/*.scss`,
        dest: `${OUT_DIR}/css`
    },
    bootstrap: {
        src: [
            `${ROOT}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
            `${ROOT}/node_modules/startbootstrap-creative/css/creative.min.css`
        ],
        dest: `${OUT_DIR}/css`
    },
    fonts: {// enter correct paths for font-awsome here.
        src: [
            `${ROOT}/node_modules/fontawesome/...`,
        ],
        dest: `${OUT_DIR}/fonts`
    },
    js: {
        src: `${ROOT}/js/**/*.js`,
        dest: `${OUT_DIR}/js`
    },
    vendorJs: {
        src: [
            `${ROOT}/node_modules/jquery/dist/jquery.min.js`
            `${ROOT}/node_modules/bootstrap/dist/js/bootstrap.min.js`
        ],
        dest: `${OUT_DIR}/js`
    }
};

// Copy files from node_modules folder to the OUT_DIR.
let fonts = () => {
    return gulp
        .src(paths.styles.src)
        .pipe(gulp.dest(paths.styles.dest));
};

// This compiles all the vendor JS files into one, jsut remove the concat to keep them seperate.
let vendorJs = () => {
    return gulp
        .src(paths.vendorJs.src)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(paths.vendorJs.dest));
}

// Build vendorJs before my other files, then build all other files in parallel to save time.
let build = gulp.series(vendorJs, gulp.parallel(js, styles, bootstrap));

module.exports = {// Only add what we intend to use externally.
    default: build,
    watch
};

Ajoutez une cible dans le fichier .csproj . Notez que nous avons également ajouté une montre à surveiller et à exclure si nous profitons de la dotnet run watchcommande.

app.csprod

  <ItemGroup>
    <Watch Include="gulpfile.js;js/**/*.js;scss/**/*.scss" Exclude="node_modules/**/*;bin/**/*;obj/**/*" />
  </ItemGroup>

  <Target Name="BuildFrontend" BeforeTargets="Build">
    <Exec Command="yarn install" />
    <Exec Command="yarn run build -o $(OutputPath)" />
  </Target>

Maintenant, lorsqu'il dotnet run buildest exécuté, il installera et construira également des modules de nœuds.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.