Gli elementi essenziali del Web offrono un modo per utilizzare il file js in bundle nella produzione ma i singoli file js in fase di sviluppo?

Question

Il Setup:

Ho un grande SPA applicazione utilizzando molti JavaScript i file che sono in bundle utilizzano Essentials Web bundling in Visual Studio 2013. Quindi includo i file js minificati generati da Web Essentials nella mia pagina HTML HTML. Questa applicazione non utilizza ASP.NET

Il problema:

mi piacerebbe essere in grado di distribuire il HTML pagina con un unico script minified di riferimento per la produzione, ma i singoli script unminified per lo sviluppo.

Motivi:

Gli script minified anche con i file delle mappe rendono difficile il debug. I nomi di variabili e parametri sono stati minimizzati e quindi il debugger non corrisponde alla sorgente. Inoltre, poiché tutto è in un file, è difficile da guardare per lo sviluppo.

soluzione attuale:

Ho un compito grugnito che va nel mio file html e lo modifica in modo tale che le <script> tag vengono sostituiti. Questo ha il vantaggio di crescere con ogni file che aggiungo alla pagina.

Gli elementi essenziali del Web offrono una soluzione migliore rispetto a quello che sto facendo attualmente che avrei potuto semplicemente trascurare?

Answer 1

ho appena usato il Bundler/Minifier da qui: https://github.com/madskristensen/BundlerMinifier

per aiutare a vedere i JS e CSS unbunded e unminified ho creato un aiutante di rendere entrambi, a seconda se l'applicazione web è in esecuzione con il debug abilitato.

vedi: https://bundlerminifierhelper.codeplex.com/

Esempio:

@Html.Bundle("/Content/Styles/Site.min.css") 
@Html.Bundle("/Scripts/Scripts.min.js") 

Nota: L'uso percorsi relativi, tra cui la barra (/)

Quando il debug tutti i file di input saranno resi fuori alla pagina e quando non esegue il debug, il percorso fornito verrà reso.

Answer 2

I ma non è sicuro se Web-essenziali in grado di gestire questo scenario se Come per la mia esperienza attuale progetto di seguito sono le cose che uso per eseguire il debug del codice a livello locale, mentre sviluppo-

1. Per il debug locale se si è utilizzando la funzione di raggruppamento ASP.NET e deve aver specificato i riferimenti al file in BundleConfig.cs. Puoi abilitare il browser a caricare ogni file così com'è impostando il flag BundleTable.EnableOptimizations = true; nel file Global.asax. E cariciamo il singolo file bundle per lavorare sull'ambiente locale
2. Per la produzione utilizziamo le versioni minificate dei riferimenti ai file.

ad esempio nel codice HTML si può avere un controllo del genere

@If (locale) {

@ Scripts.Render ("~/Scripts/src/bundleName");

}

else {

// che è un HTML parziale che contiene i riferimenti ai file minified Html.RenderPartial ("ClientTemplates/MinifiedScripts");

}

Grazie

Answer 3

si stia mescolando lo strumento bundling con l'implementazione di riferimento.

Essentials Web 2013 costruisce fasci di compressa (minified) JavaScript, CSS, MENO, SASS e file di immagine. Web Essentials dovrebbe creare il pacchetto miniato indipendentemente dal fatto che ci si trovi in ​​modalità debug.

Siete alla ricerca di un modo per fare riferimento in modo selettivo i file minfied in uscita modalità e gli originali in Debug. Ciò potrebbe significare che la codifica del rasoio Razor è piuttosto impegnativa per verificare la versione di rilascio e eseguire il rendering delle chiamate di riferimento.

Una soluzione migliore è utilizzare ASP.NET Bundling and Minification.

E 'facile eseguire il debug JavaScript in un ambiente di sviluppo (in cui l'elemento di compilazione nel file web.config è impostato per eseguire il debug = "true"), in quanto i file JavaScript non sono in bundle o minified quando il debug = "true "

Il bundle miniato esiste ancora se debug="true" nel Web.config. Ma in fase di esecuzione, il framework farà riferimento ai file originali anziché a quelli minificati. Il tuo Web.config è ora responsabile per il mantenimento di quale versione delle tue risorse sono referenziate.

I pacchetti Web Essential sono beni passivi. Non c'è funzionalità in Web Essentials per distinguere tra la modalità di rilascio e di debug perché si tratta di un'azione in fase di esecuzione.

---

Nota:Web Essentials 2015.0 ha rimosso legatura e minification.

Importante!

Web Essentials 2015 non contiene più funzionalità per il raggruppamento e minificazione di file JS, CSS e HTML, nonché la compilazione di file LESS, Scss e CoffeeScript. Tali caratteristiche sono state spostate alle loro estensioni separate che migliora notevolmente le caratteristiche

La pratica comune è quella di utilizzare il ASP.NET Bundler. Questo è un altro motivo per allontanarsi dal bundling con Web Essentials.