17

Sto implementando il supporto di bundling e minification in MVC4 e configurandolo in modo che possa compilare automaticamente i miei file .strapstrap. Ho il seguente codice nel mio file di BundleConfig.csPerché MVC4 @ Styles.Render() non si comporta come previsto in modalità debug

public class BundleConfig 
{ 
    public static void RegisterBundles(BundleCollection bundles) 
    { 
     // base bundles that come with MVC 4 

     var bootstrapBundle = new Bundle("~/bundles/bootstrap").Include("~/Content/less/bootstrap.less"); 
     bootstrapBundle.Transforms.Add(new TwitterBootstrapLessTransform()); 
     bootstrapBundle.Transforms.Add(new CssMinify()); 
     bundles.Add(bootstrapBundle); 
    } 
} 

Il TwitterBootsrapLessTransform è la seguente (è più complicato di quanto vorrei a causa della necessità di importare i file sub .less in errati privi di punti)

public class TwitterBootstrapLessTransform : IBundleTransform 
{ 
    public static string BundlePath { get; private set; } 

    public void Process(BundleContext context, BundleResponse response) 
    { 
     setBasePath(context); 

     var config = new DotlessConfiguration(DotlessConfiguration.GetDefault()); 
     config.LessSource = typeof(TwitterBootstrapLessMinifyBundleFileReader); 

     response.Content = Less.Parse(response.Content, config); 
     response.ContentType = "text/css"; 
    } 

    private void setBasePath(BundleContext context) 
    { 
     BundlePath = context.HttpContext.Server.MapPath("~/Content/less" + "/imports" + "/"); 
    } 
} 

public class TwitterBootstrapLessMinifyBundleFileReader : IFileReader 
{ 
    public IPathResolver PathResolver { get; set; } 
    private string basePath; 

    public TwitterBootstrapLessMinifyBundleFileReader(): this(new RelativePathResolver()) 
    { 
    } 

    public TwitterBootstrapLessMinifyBundleFileReader(IPathResolver pathResolver) 
    { 
     PathResolver = pathResolver; 
     basePath = TwitterBootstrapLessTransform.BundlePath; 
    } 

    public bool DoesFileExist(string fileName) 
    { 
     fileName = PathResolver.GetFullPath(basePath + fileName); 

     return File.Exists(fileName); 
    } 

    public byte[] GetBinaryFileContents(string fileName) 
    { 
     throw new System.NotImplementedException(); 
    } 

    public string GetFileContents(string fileName) 
    { 
     fileName = PathResolver.GetFullPath(basePath + fileName); 

     return File.ReadAllText(fileName); 
    } 
} 

Sulla mia pagina di base _Layout.cshtml ho cercato di rendere i file CSS facendo questo

@Styles.Render("~/bundles/bootstrap"); 

come suggerisce il mvc tutorial ma il file del clien t navigatore finisce richiedente è

http://localhost:53729/Content/less/bootstrap.less 

che causa un errore. Se inserisco il seguente link nella pagina di layout di base, funziona come previsto.

<link href="~/bundles/bootstrap" rel="stylesheet" type="text/css" /> 

Perché non @ Styles.Render() si comporta allo stesso modo in modalità di debug? Funziona in modalità di rilascio. Riesco a capire come non lo si voglia raggruppare e minimizzare nel debug ma come posso forzare questo pacchetto a funzionare sempre allo stesso modo?

+0

ho trovato questo frammento di codice molto utile. Dovresti prendere in considerazione l'idea di creare un post sul blog su come hai avviato Twitter Bootstrap e Dotless. – Junto

+0

Grazie, forse quando avrò ancora un po 'di tempo per me inizierò a bloggare. – PlTaylor

+0

@PITaylor Per motivi di interesse si vedono i seguenti tipi di errori nell'output css: Minification fallito. Restituzione di contenuti non miniati. (1381,2): errore di run-time CSS1019: token imprevisto, trovato '{' ... – Junto

risposta

10

Quello che ho finito è stato inserire un'istruzione debug if nel mio _Layout.cshtml, in modo che il bundle potesse essere visualizzato indipendentemente dal problema. Non sono pazzo di esso come soluzione, ma funziona per ora.

@if (Context.IsDebuggingEnabled) 
{ 
    <link href="~/bundles/bootstrap" rel="stylesheet" type="text/css" /> 
} 
else 
{ 
    @Styles.Render("~/bundles/bootstrap") 
} 
31

Quindi, in pratica, quando debug="true", lo script/Stile Render metodi presuppongono che ottimizzazioni sono spenti, significa che nessun accorpamento e non minification, il che significa che non chiamerà nella vostra trasformare; invece, mostrerà solo i link ai contenuti grezzi del bundle (che è boostrap.less nel tuo caso).

È possibile ignorare questo comportamento e eseguire sempre l'ottimizzazione impostando BundleTable.EnableOptimizations = true. Questo costringerà i metodi di rendering a fare sempre bundling/minification.

+0

Puoi impostare questo valore su un bundle specifico? – PlTaylor

+0

Attualmente non si tratta di uno switch globale, attiva/disattiva il raggruppamento/minicazione nell'intera app –

+1

Desidero modificare il tuo post perché presumo che il nome della proprietà non sia EnalbeOptimizations ma EnableOptimizations. StackOverflow non consente 1 modifica dei caratteri ... :-( –

4

ottengo intorno a questo lasciando errati privi di punti servire il file .less

nel web.config:

<handlers> 
    <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" /> 
    </handlers>