Come usare npm con ASP.NET Core


117

Sto usando npm per gestire le librerie client jQuery, Bootstrap, Font Awesome e simili di cui ho bisogno per la mia applicazione ASP.NET Core.

L'approccio che ha funzionato per me è iniziato aggiungendo un file package.json al progetto, che assomiglia a questo:

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

npm ripristina questi pacchetti nella cartella node_modules che si trova allo stesso livello di wwwroot nella directory del progetto:

inserisci qui la descrizione dell'immagine

Poiché ASP.NET Core serve i file statici dalla cartella wwwroot e node_modules non è presente, ho dovuto apportare un paio di modifiche per farlo funzionare, il primo: l'aggiunta di app.UseFileServer subito prima di app.UseStaticFiles nel mio avvio. cs file:

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

app.UseStaticFiles();

e il secondo, includendo node_modules nelle mie publishOptions nel file project.json:

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

Funziona nel mio ambiente di sviluppo e funziona anche quando lo distribuisco nella mia istanza del servizio app di Azure, i file statici jquery, bootstrap e fantastici per i tipi di carattere vengono serviti bene, ma non sono sicuro di questa implementazione.

Qual è l'approccio giusto per farlo?

Questa soluzione è arrivata dopo aver raccolto molte informazioni da diverse fonti e provato alcune che non hanno funzionato, e sembra un po 'strano dover servire questi file dall'esterno di wwwroot.

Qualsiasi consiglio sarà molto apprezzato.



Questo collegamento ha un esempio funzionante su ASP.NET Core w / npm : ievangelistblog.wordpress.com/2016/01/13/…
David Pine

2
Una cosa che mi è capitata è stata di usare Bundler and Minifier- Specificare che la fonte è Outside wwwroot e quando lo compili compila il JS in wwwroot. Questo è il modo corretto .. Non dovresti offrire contenuti da node_modules
Piotr Kula

Scoraggerei vivamente chiunque dal servire staticamente la node_modulescartella. a) non è così che è progettato l'ecosistema b) è un rischio per la sicurezza, uno dei pacchetti installati potrebbe far trapelare informazioni sensibili. Il modo corretto è impostare una pipeline di costruzione (grunt / gulp / node / webpack) che pubblica file in una cartella srco whateverdedicata a servire file front-end statici
CervEd

Risposte:


45

Pubblicando il tuo intero node_modules cartella si distribuiscono molti più file di quelli effettivamente necessari in produzione.

Utilizza invece un task runner come parte del processo di compilazione per impacchettare i file necessari e distribuirli nel tuo file wwwroot cartella. Ciò ti consentirà anche di concatenare e minimizzare le tue risorse allo stesso tempo, invece di dover servire ogni singola libreria separatamente.

È quindi possibile anche rimuovere completamente la FileServerconfigurazione e fare affidamento su UseStaticFiles.

Attualmente, gulp è il task runner preferito da VS. Aggiungi un gulpfile.jsalla radice del tuo progetto e configuralo per elaborare i tuoi file statici durante la pubblicazione.

Ad esempio, puoi aggiungere la seguente scriptssezione a project.json:

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

Che funzionerebbe con il seguente gulpfile (l'impostazione predefinita quando si esegue lo scaffolding con 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
Sono un po 'confuso su come questa sia la risposta alla domanda. Questo è quasi esattamente ciò che Microsoft ha per configurare Gulp qui ( docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp ). Tuttavia, per quanto ne so, questo non prende il contenuto dalla mia directory node_modules e lo aggiunge a 'lib' o lo rende utilizzabile in uno qualsiasi dei miei file ... Sono molto nuovo a questo così incredibilmente confuso dall'apparentemente incredibilmente complicato nuovo mondo di sviluppo Web ...
Gerard Wilkinson

32
Complicato, va bene. Sono pronto ad abbandonare del tutto il front-end e lavorare solo sulle API.
Luke Puplett

12
Questo è l'approccio giusto in generale, ma la risposta tralascia un passaggio cruciale: copiare i file dalla cartella node_modules nella cartella wwwroot come attività Gulp. Inizia con var nodeRoot = './node_modules/'; e aggiungi un'attività che copia la sottocartella desiderata da nodeRoot nella sottocartella appropriata di webroot. Non c'è tempo ora per elaborare, ma se c'è interesse, posso aggiungere dettagli in seguito.
Doug

32
Perché nessuno ha sollevato l'ovvio: "Perché dobbiamo porre questa domanda!" Perché installiamo intenzionalmente i file in una posizione in cui non possono essere utilizzati? Quindi, poiché i nostri file non sono accessibili, installiamo e configuriamo un'utilità elaborata per copiarli in una posizione in cui possono essere utilizzati. È davvero ridicolo.
Sam,

8
Perché l'attrezzatura qui è una schifezza, fondamentalmente. Usare npm sta solo usando npm, proprio come faresti per qualsiasi cosa . Non c'è niente di specifico per ASP.NET Core. Tutto va dentro node_modulesperché è quello che fa npm. Il compito di gulp è necessario per spostare le cose nel posto giusto, cioè dove ne hai effettivamente bisogno. Penso che il problema sia che Microsoft ha fornito una così bella integrazione con Bower, ma ora Bower è morto (o almeno sta morendo) e Microsoft non ha fornito strumenti alternativi.
Chris Pratt

41

inserisci qui la descrizione dell'immagine

  • utilizzando npm per la gestione delle librerie lato client è una buona scelta (al contrario di Bower o NuGet), stai pensando nella giusta direzione :)
  • Suddividi i progetti lato server (ASP.NET Core) e lato client (ad esempio Angular 2, Ember, React) in cartelle separate (altrimenti il ​​tuo progetto ASP.NET potrebbe avere molto rumore - unit test per il codice lato client, node_modules cartella, costruire artefatti ecc.). Gli sviluppatori front-end che lavorano nella stessa squadra con te ti ringrazieranno per questo :)
  • Ripristina i moduli npm a livello di soluzione (analogamente a come ripristini i pacchetti tramite NuGet, non nella cartella del progetto), in questo modo puoi avere anche test unitari e di integrazione in una cartella separata (invece di avere test JavaScript lato client all'interno del tuo Progetto ASP.NET Core).
  • L'uso potrebbe non essere necessario FileServer, avendoStaticFiles dovrebbe essere sufficiente per servire file statici (.js, immagini ecc.)
  • Utilizza Webpack per raggruppare il codice lato client in uno o più blocchi (bundle)
  • Potresti non aver bisogno di Gulp / Grunt se si utilizza un bundler di moduli come Webpack
  • Scrivi script di automazione della build in ES2015 + JavaScript (al contrario di Bash o PowerShell), funzioneranno su più piattaforme e saranno più accessibili a una varietà di sviluppatori web (tutti parlano JavaScript al giorno d'oggi)
  • Rinomina wwwrootin public, altrimenti la struttura delle cartelle in App Web di Azure creerà confusione ( D:\Home\site\wwwroot\wwwrootrispetto aD:\Home\site\wwwroot\public )
  • Pubblica solo l'output compilato in App Web di Azure (non dovresti mai eseguire il push node_modulesa un server di hosting Web). Vedi tools/deploy.jscome esempio.

Visita ASP.NET Core Starter Kit su GitHub (dichiarazione di non responsabilità: sono l'autore)


2
Bella risposta, complimenti per il tuo lavoro nel fornire alla comunità uno starter kit!
David Pine

7
Ho costruito con successo un'enorme app pubblica di Angular per un importante marchio del Regno Unito all'inizio di quest'anno, eppure non riuscivo nemmeno a capire la maggior parte di questa risposta. Non posso nemmeno iniziare a impararlo perché è dappertutto. Letteralmente in crisi di carriera.
Luke Puplett

questo è un buon riepilogo delle cose da fare e da non fare durante la scrittura e la gestione di script e file lato client. Ho risparmiato tempo e ricerche. Complimenti a te!
Sangeeta

Sfortunatamente, Visual Studio (stupidamente IMHO) tratta la directory "wwwroot" in modo speciale, basandosi solo sul suo nome, assegnandole una speciale icona "web root" in Esplora soluzioni e contrassegnandone il contenuto come "Nessuno" per impostazione predefinita anziché "Contenuto" . Se l'intenzione è di inserire file serviti in modo statico e stai utilizzando Visual Studio, dovresti probabilmente lasciare il nome "wwwroot". Sono d'accordo però che è un brutto nome.
Jez

27

Installa Bundler e Minifier nelle estensioni di Visual Studio

Quindi crei un bundleconfig.jsone inserisci quanto segue come:

// 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
  }
]

Quindi il bundler e il minifier (basato su gulp) hanno accesso ai file sorgente (che dovrebbero essere esclusi da Visual Studio e anche esclusi da GIT) e li inserisce in wwwroot come specificato

l'unico effetto collaterale ogni volta che lo salvi eseguirà questo (ma puoi impostarlo per eseguirlo manualmente)


4
Dopo aver visto Bower è morto e non posso più aggiornare Bootstrap senza passare a NPM, questo sembra essere il mio approccio preferito. Gulp o Webpack sembrano eccessivi rispetto a questa semplice soluzione che è già presente negli ultimi modelli di progetto MVC. Grazie per aver condiviso!
Matt Sanders

1
Come vengono gestite qui le immagini referenziate in CSS? Sto affrontando un problema con le immagini ancora nella cartella node_modules dove come css e js sono stati spostati su www. Qualche idea su come risolvere questo problema?
VPP

1
È questo IDE agnostico? Come funzionerà se alcuni membri del tuo team utilizzano VS Code e come funziona in una pipeline di build CD?
Jacob Stamm,

Quando installi il pacchetto Bundler e Minifier NuGet, i documenti dicono che inietta obiettivi di compilazione che vengono eseguiti in fase di compilazione e pulizia. Suppongo che una volta installato, funzionerà bene indipendentemente dall'IDE utilizzato, giusto? Vedi altro: docs.microsoft.com/en-gb/aspnet/core/client-side/…
Ciaran Gallagher

Il bundler è utile solo per specificare questi script al di fuori dell'ambiente di sviluppo. Dalla mia pagina _Layout devo ancora fare riferimento manualmente ai file JS e CSS di cui ho bisogno, ma la cartella node_modules è al di fuori del sito Web ... quindi non penso che questo risolva il problema correttamente, hai ancora bisogno di uno script Gulp da copiare sui file necessari nella mia cartella wwwroot.
Ciaran Gallagher

21

Ti do due risposte. npm combinato con altri strumenti è potente ma richiede un po 'di lavoro per l'installazione. Se desideri scaricare solo alcune librerie, potresti invece utilizzare Library Manager (rilasciato in Visual Studio 15.8).

NPM (avanzato)

Per prima cosa aggiungi package.json nella radice del tuo progetto. Aggiungi il seguente contenuto:

{
  "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"
  }
}

Ciò consentirà a NPM di scaricare Bootstrap, JQuery e altre librerie utilizzate in un nuovo progetto principale asp.net in una cartella denominata node_modules. Il passaggio successivo consiste nel copiare i file in una posizione appropriata. Per fare questo useremo gulp, anch'esso scaricato da NPM. Quindi aggiungi un nuovo file nella radice del tuo progetto chiamato gulpfile.js . Aggiungi il seguente contenuto:

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

Questo file contiene un codice JavaScript che viene eseguito quando il progetto viene compilato e pulito. Copierà tutti i file necessari su lib2 ( non lib - puoi cambiarlo facilmente ). Ho usato la stessa struttura di un nuovo progetto, ma è facile cambiare i file in una posizione diversa. Se sposti i file, assicurati di aggiornare anche _Layout.cshtml . Nota che tutti i file nella directory lib2 verranno rimossi quando il progetto viene pulito.

Se fai clic con il pulsante destro del mouse su gulpfile.js , puoi selezionare Task Runner Explorer . Da qui puoi eseguire gulp manualmente per copiare o pulire i file.

Gulp potrebbe anche essere utile per altre attività come minimizzare i file JavaScript e CSS:

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

Library Manager (semplice)

Fare clic con il pulsante destro del mouse sul progetto e selezionare Gestisci librerie lato client . Il file libman.json è ora aperto. In questo file si specifica quale libreria e file utilizzare e dove devono essere archiviati localmente. Veramente semplice! Il file seguente copia le librerie predefinite utilizzate durante la creazione di un nuovo progetto 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"
    }
  ]
}

Se sposti i file, assicurati di aggiornare anche _Layout.cshtml .


2
Library Manager - non ne ho mai sentito parlare, ma è esattamente ciò di cui ho bisogno! Questa dovrebbe essere la risposta corretta.
codeMonkey

1
Per evitare un errore sorso ho dovuto cambiare la prima linea del compito di default nel file di gulpfile.jsal gulp.task('default', function (done) {e poi aggiungere come ultima riga in quella funzione il seguente: done();In caso contrario, vorrei avere il messaggio di erroreThe following tasks did not complete: Did you forget to signal async completion?
Manfred

7

Invece di provare a servire la cartella dei moduli del nodo, puoi anche usare Gulp per copiare ciò che ti serve in wwwroot.

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

Anche questo potrebbe aiutare

Visual Studio 2015 ASP.NET 5, attività Gulp non copia i file da node_modules


4
Mi piace molto il secondo collegamento, sembra familiare in qualche modo. ;)
David Pine

1
Non è molto conveniente combinare file di origine dell'app Web ASP.NET Core con moduli npm e output di compilazione del codice lato client. Questo è il motivo per cui il team ASP.NET sta rimuovendo Gulp, package.json dai modelli di progetto ASP.NET MVC predefiniti.
Konstantin Tarkus

Non lo sapevo. Quando ero al VS Live a marzo, erano tutti d'accordo, ma da allora è cambiato molto.
Dave_750

6

Qual è l'approccio giusto per farlo?

Ci sono molti approcci "giusti", devi solo decidere quale si adatta meglio alle tue esigenze. Sembra che tu stia fraintendendo come usare node_modules...

Se hai familiarità con NuGet , dovresti considerare npm come la sua controparte lato client. Dove la node_modulesdirectory è come la bindirectory per NuGet . L'idea è che questa directory sia solo una posizione comune per l'archiviazione dei pacchetti, secondo me è meglio prendere a dependencysui pacchetti che ti servono come hai fatto in package.json. Quindi utilizzare un task runner come Gulpad esempio per copiare i file necessari nella wwwrootposizione desiderata .

Ho scritto un post sul blog su questo a gennaio che descrive in dettaglio npm , Gulp e un sacco di altri dettagli che sono ancora rilevanti oggi. Inoltre, qualcuno ha richiamato l'attenzione sulla mia domanda SO che ho posto e alla fine mi sono risposto qui , il che probabilmente è utile.

Ho creato un Gistche mostra il gulpfile.jscome esempio.

Nel tuo Startup.csè comunque importante utilizzare file statici:

app.UseStaticFiles();

Ciò garantirà che la tua applicazione possa accedere a ciò di cui ha bisogno.


3
"Ho scritto un post sul blog su questo argomento a gennaio che descrive in dettaglio npm, Gulp e un sacco di altri dettagli che sono ancora rilevanti oggi." il fatto che da gennaio a giugno e tu devi menzionare sia ancora rilevante è esattamente il mio problema con il preoccuparmi di imparare qualsiasi di queste cose fly-by-night. Ho già troppo da imparare senza sprecare il mio tempo in mode. Non è colpa tua David, mi stai aiutando molto, ma non mi piace questo nuovo mondo effimero.
Luke Puplett

5

Un approccio molto più semplice consiste nell'usare il pacchetto Nuget OdeToCode.UseNodeModules . L'ho appena testato con .Net Core 3.0. Tutto quello che devi fare è aggiungere il pacchetto alla soluzione e referenziarlo nel metodo Configure della classe Startup:

app.UseNodeModules();

L'ho imparato dall'eccellente corso Building a Web App with ASP.NET Core, MVC, Entity Framework Core, Bootstrap e Angular Pluralsight di Shawn Wildermuth.


1
E come si aggiungono i pacchetti npm?
Luca Ziegler

Esistono diversi modi per aggiungere pacchetti npm al progetto. Preferisco semplicemente digitarli nel file package.json sotto il nodo delle dipendenze come spiegato qui: stackoverflow.com/a/49264424/5301317
Mariusz Bialobrzeski

@MariuszBialobrzeski Grazie per la condivisione. Questa è una buona soluzione.
Sau001

@MariuszBialobrzeski Hai dovuto fare qualcosa in più per distribuire il contenuto statico da node_modules nelle tue pipeline DevOps? O hai controllato nella cartella node_modules?
Sau001

1
@ Sau001 Sfortunatamente non ho mai avuto la possibilità di lavorare con le pipeline DevOps. La cartella node_modules tende a diventare piuttosto grande, quindi eviterei sicuramente di controllarla se possibile.
Mariusz Bialobrzeski

1

Shawn Wildermuth ha una bella guida qui: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

L'articolo si collega al gulpfile su GitHub dove ha implementato la strategia nell'articolo. Potresti semplicemente copiare e incollare la maggior parte dei contenuti gulpfile nel tuo, ma assicurati di aggiungere i pacchetti appropriati in package.json sotto devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream


1

Ho trovato un modo migliore per gestire i pacchetti JS nel mio progetto con i task runner NPM Gulp / Grunt. Non mi piace l'idea di avere un NPM con un altro livello di libreria javascript per gestire l '"automazione", e il mio requisito numero uno è eseguire semplicemente l'aggiornamento npm senza altre preoccupazioni se devo eseguire roba gulp, se ha copiato tutto con successo e viceversa.

Il modo NPM:

  • Il minifier JS è già in bundle nel core ASP.net, cerca bundleconfig.json quindi questo non è un problema per me (non compilare qualcosa di personalizzato)
  • La cosa buona di NPM è che ha una buona struttura dei file in modo da poter sempre trovare le versioni precompilate / minimizzate delle dipendenze sotto node_modules / module / dist
  • Sto utilizzando uno script NPM node_modules / .hooks / {eventname} che gestisce la copia / aggiornamento / cancellazione dei file Project / wwwroot / lib / module / dist / .js, puoi trovare la documentazione qui https: // docs.npmjs.com/misc/scripts (aggiornerò lo script che sto usando per git una volta che sarà più lucido) Non ho bisogno di runner di attività aggiuntivi ( strumenti .js che non mi piacciono) ciò che mantiene il mio progetto pulito e semplice.

La via del pitone:

https://pypi.python.org/pyp ... ma in questo caso è necessario mantenere i sorgenti manualmente


1

Per favore scusa la lunghezza di questo post.

Questo è un esempio funzionante che utilizza ASP.NET Core versione 2.5.

Qualcosa di degno di nota è che project.json è obsoleto ( vedi qui ) a favore di .csproj . Un problema con .csproj . file è la grande quantità di funzionalità e il fatto che non c'è una posizione centrale per la sua documentazione ( vedi qui ).

Un'altra cosa, questo esempio sta eseguendo ASP.NET core in un container Docker Linux (alpine 3.9); quindi i percorsi lo rifletteranno. Utilizza anche gulp ^ 4.0. Tuttavia, con alcune modifiche, dovrebbe funzionare con le versioni precedenti di ASP.NET Core, Gulp, NodeJS e anche senza Docker.

Ma ecco una risposta:

gulpfile.js vede il vero esempio di lavoro qui

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

Aggiungi una destinazione nel file .csproj . Si noti che abbiamo anche aggiunto un Watch per guardare ed escludere se sfruttiamo il dotnet run watchcomando.

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>

Ora, quando dotnet run buildviene eseguito, installerà e creerà anche i moduli del nodo.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.