2016-05-03 16 views
1

In Sitefinity WebForms haben Sie ein ResourceLinks-Steuerelement, mit dem Sie mehrere kombinieren können, aber was verwenden Sie in MVC-Layouts?Sitefinity CSS kombiniert in MVC Layouts

Ich bin mir nicht sicher, ob der Rasiererhelfer @ Html.StyleSheet die Arbeit machen wird?

Das Hinzufügen aller CSS-Dateien zum globalen Ordner in App_Data \ Sitefinity \ WebsiteTemplates [Vorlagenordner] \ App_Themes [Thema] fügt sie automatisch zur Site hinzu, kombiniert sie jedoch nicht.

Wir arbeiten mit Sitefinity 8.x und suchen nach einer definitiven Möglichkeit, JS und CSS zu komprimieren und zu kombinieren, aber die Pickings scheinen schlank zu sein.

Antwort

3

Mit dem Wechsel von Webforms zu MVC, hat Sitefinity nicht speziell einen neuen Bundler oder etwas ähnliches eingeführt, so dass Sie im Wesentlichen 2 Standardoptionen übrig haben, aber sie scheinen sich für Ansatz 3 entschieden zu haben.

1) Verwenden Sie .less und .sass zur Vorverarbeitung als Teil Ihres Build-Prozesses.

Also in Ihrem Thema Ordner hätten Sie eine global.less (oder scss oder Sass), die im Wesentlichen kombiniert sie mit der @import Direktive. Installieren Sie eine VisualStudio-Erweiterung wie Mad's Kristensen Bundler and Minification VS Extension (zuvor Teil von WebEssentials) und definieren Sie dann in den VS-Einstellungen, dass es kompilieren und auf Build kompilieren sollte. Dann jedes Mal, wenn Sie erstellen oder veröffentlichen, wird Ihre eine gebündelte und komprimierte .min.css für Sitefinity verfügbar sein.

2) Die zweite Option wäre die Standard ASP.NET Web Optimization.

Hier definieren Sie statische Bündel in VisualStudio und verwenden dann diese Bündel mithilfe von @Styles.Render oder @Scripts.Render, um sie auszugeben.

3) Schließlich wurde ein neuer Weg mit dem neuen Feather-Ansatz hinzugefügt, der den aktuellen modischen Ansatz von Grunt verwendet, um Stile und Skripte zu bündeln und zu optimieren.

Im Ordner/ResourcePackages sehen Sie bereits eine gruntfile.js-Datei, die eine Aufgabe hat, die Sie ausführen können, die dann Ihre .ssass kompilieren (und zu Präfix, Bundle, Minify usw. erweitern kann). min.css, die Sie dann zu Ihrer Lösung hinzufügen können.

kann eine Probe hier (https://github.com/Sitefinity/feather-packages/blob/master/Bootstrap/gruntfile.js)

zu sehen ich eine Kombination aus dem oben beschriebenen Ansatz verwenden würde das maximale Ergebnis mit Sitefinity zu erhalten, wo Sie 1 verwenden Option Ihres Kern/Basis CSS haben VS bauen und JS und schließe sie dann mithilfe von Web.Optimization ein. Alle zusätzlichen Seiten oder widgetbezogenen Styles oder JS können anschließend manuell über das css Widget eingefügt werden, das über Option 3 kompiliert wird.

Sobald Sie sich mit diesem neuen Ansatz vertraut gemacht haben, können Sie optimierte .css und .js on demand - selbst wenn Sie einen RequireJS-Ansatz verwenden, um sie zu laden, hängt es vom Widget ab, das auf der Seite gezogen und abgelegt wird. RequireJS scheint angesichts der neuesten Gadgets und Gizmos überholt zu sein, aber mit v9.0 wird es immer noch von Sitefinity selbst verwendet, um Funktionen zur Inline-Bearbeitung hinzuzufügen.

Lassen Sie mich wissen, wenn Sie weitere Informationen zu Option 3 benötigen, ich freue mich, meine Antwort mit einigen Codeschnipsel zu erweitern, oder Beispielskripte, wie ich sie zugeschnitten habe.