bit_template

BitTemplate

Sammlung von Konfigurationen / Vorlagen für diese Website.

Fluid Inhaltselement

Credits: Das Inhaltselement Fluid wurde aus dem Thema Fluid Bootstrap übernommen. Der Grund dafür ist, dass wir Unterstützung für TYPO3 7 brauchten und die Extension derzeit im Ruhezustand zu sein scheint.

Workflow der Frontend-Entwicklung

Hier finden Sie eine Erklärung, wie Sie das Theme (CSS) zusammen mit dem JavaScript in dieser TYPO3 CMS Distribution aktualisieren können. Bevor du weiterliest, solltest du auch ein paar Worte in Betracht ziehen, um ein wenig Hintergrund zu schaffen:

Wir entwickeln lokal und verwenden Git und Composer als Haupteinsatztools. Es dient unseren Projekten gut. Unsere Erweiterungen werden durch Composer gesteuert und dank der jüngsten Fortschritte in diesem Bereich ist jede Erweiterung nun in Form eines Composer-Pakets unter composer.typo3.org verfügbar.

Vor kurzem habe ich einige Arbeitsabläufe ausprobiert, die auf Grunt and Bower basieren. Ich fand es schön:

• Grunt: beschreibt sich selbst als "JavaScript Task Runner". Es handelt sich im Grunde genommen um ein Automatisierungswerkzeug, das es ermöglicht, schnell einen erweiterten Workflow aufzubauen Dazu kommt ein reichhaltiges Ökosystem für alle Arten von Bedürfnissen. Eine der praktischen Funktionen ist die "Watch"-Funktion, die alle Änderungen am Dateisystem beobachtet und auslöst ein Build. Dies macht den Lieferprozess sehr effizient und transparent. Zusätzlich wird der Bauprozess beinhaltet alle Arten von Optimierungen für das Web, wie z.B. das Ändern und Komprimieren von Dateien. Auch Bilder werden von Bibliotheken von Drittanbietern optimiert, die von den Aufgaben von Grunt Imagine übernommen werden

• Bower: Paketmanager für das Web, wo das Paket aus Webkomponenten wie jQuery, Twitter Bootstrap, ..... bestehen kann. Es ist ziemlich einfach, mit Versionen und Abhängigkeiten dieser Web Components umzugehen. Zum Beispiel, wenn Sie ein neues Projekt starten, möchten Sie Ihre Bibliotheken auf jeden Fall auf dem neuesten Stand halten. Bower scannt und teilt Ihnen mit, welche Bibliothek aktualisiert werden muss. Fantastisch!

Beachten Sie auch die neue Dateistruktur des Public-Verzeichnisses:

    ls -l Ressourcen/Öffentlichkeit

    ??? / (1)
    ??? /Quelle (2)
    ??? /BowerComponents (3)

1. die erzeugte, für die Produktion optimierte Leistung. Bearbeiten Sie niemals Dateien, da sie überschrieben werden.
2. Quelle: alles, was wir als Code produzieren, der die Rohdaten von Sass, JavaScript und Bildern enthält, kommt hierher.
3. Komponenten: Von Bower verwaltete Webkomponenten. Das Verzeichnis befindet sich jedoch nicht unter Git, da es replizierbar ist.

In Ordnung, Zeit, sich die Hände schmutzig zu machen! Angenommen, Sie haben das Bootstrap-Paket installiert, finden Sie einige Anweisungen, wie Sie beginnen können mit diesem Entwicklungs-Workflow:

    # Weiter zu EXT:bit_template
    cd typo3conf/ext/bit_template

    # Stellen Sie sicher, dass Bower installiert ist
    # Wenn die Laube nicht installiert ist
    # (sudo) npm install -g bower
    laube - Version

    # Stellen Sie sicher, dass grunt installiert ist
    # Wenn Grunt nicht installiert ist
    # (sudo) npm install -g grunt-cli
    grunt --version

    # Lokale Grunzenmodule installieren
    npm installieren

    # Webkomponenten installieren (jQuery, ....)
    laube installieren

    # Überprüfen Sie, ob Web Components aktualisiert werden müssen.
    # Der Befehl zeigt die aktuelle Version und die aktuellste Version an.
    laube Liste

    # Aktualisieren Sie bei Bedarf die Versionen der Webkomponenten.
    bearbeiten Sie bower.json
    lauben-Update

    # Call grunt help
    grunzen Hilfe

    # Generieren Sie einen neuen Build mit JavaScript, CSS, optimierten Bildern, .....
    grunzerbau

    # Beobachten Sie Ihr Asset und kompilieren Sie es, während Sie es bearbeiten.
    grunzuhr