Name: Tremplin Numérique
Price range: $$$

ich wusste GruntJS ohne es jemals benutzt zu haben, aber ich hätte von einem Entwickler hören müssen Symfonie gib mir die masse damit ich mir diese lösung anschaue. Zuerst ersetzen Vermögenswert von GruntJS war für mich eine Lösung, um meine Projekte zum Laufen zu bringen Symfonie mit HHVM. Jetzt der Server PHP de Facebook funktioniert einwandfrei mit Vermögenswert aber ich finde immer weniger Gründe, weiter zu verwenden Vermögenswert. Schließlich die Verwendung von Grunzen, ein Plugin basierend auf Knoten JS, treibt die meisten Entwickler zur Verwendung an Bower, ein weiteres Plugin zum Verwalten von Abhängigkeiten. Wir werden darüber sprechen Bower untere. Werfen wir einen kurzen Blick auf die Vor- und Nachteile.

Aufmerksamkeit ! Bevor Sie mit der Migration Ihrer Anwendung beginnen, empfehle ich Ihnen, Ihren Code zu versionieren und einige Tests durchzuführen. Es wird dringend empfohlen, den gesamten Artikel zu lesen, bevor Sie sich auf diese langfristige Mission begeben.

Zusammenfassung

Einleitung

Assetic, der missverstandene Freund

Ich für meinen Teil betrachte dasVermögenswert missverstanden und missbraucht wird. Ich erkläre dir meine Gedanken. (Außerdem habe ich diesen Artikel aufgrund eines Missverständnisses meinerseits korrigiert, danke an Manuel Klein für sein Feedback).

Nutzen

Die Verwendung vonVermögenswert ermöglicht es Ihnen, den Cache für die Ressourcen abzubrechen, da sich der Name der generierten JS- und CSS-Ressourcen jedes Mal ändert, wenn Sie den Befehl „Asset:Dump“. Ein gewisser Vorteil!

Nachteile

Assetic bietet nur wenige Optionen zum Konfigurieren der Ressourcengenerierung.
Es ist notwendig, PHP-Bundles zu installieren, um exotische Ressourcen wie LESS zu generieren. Der PHP-Code wird in der installiert Anbieter während diese Aufgabe nur für den Client nützlich ist. Nein für den Server. Darüber hinaus erhöht es die Anzahl Ihres Projekts.
Code PHP ist notwendig in der Vorlagen Zweig utilisant Vermögenswert oder fast alle. Während bei Grunt die kompilierte Ressource mit dem Namen aufgerufen wird, den Sie ihr gegeben haben.

Verwenden Sie Assetic wirklich in Ihren Vorlagen

Ich sehe oft in der Vorlagen Zweig auf die ich stoße, Ressourcen, die manchmal über verlinkt sind Vermögenswert, manchmal über die Aktiva de Symphonie.

# Verwenden von Assets
@NamespaceMyBundle/Resources/public/css/main.css
# Unbenutztes Asset, mit Assets
/bundles/namespacemy/css/main.css

Im ersten Fall, Vermögenswert trifft wirklich zu. Im zweiten Fall Vermögenswert ist vollständig verdeckt, um das nicht zu benutzen Aktiva de Symfonie. Die Verwendung von Aktiva ist meiner Meinung nach auch ein Fehler, zumindest für den Zugriff auf JS- und CSS-Ressourcen. Ende der Klammer...

Grunt JS der Sooo flexible Compiler!

GruntJS beyogen auf Node.js. Es ist ein clientseitiges Tool, das Module verwendet, um viele Aktionen auszuführen, z. B. Dateiverkettung, minification, Bildkomprimierung, Kompilierung von LESS, TypeScript… Anders Vermögenswert, müssen Sie bestimmte Konfigurationen einrichten, aber seien Sie versichert, dass sich diese Anfangsinvestition am Ende viel schneller auszahlt alsVermögenswert.

Einführung in Bower, den Composer.json der Ressourcen

GruntJS ist gut und wird auf dem gleichen Segment platziert wieVermögenswert. Aber solange Sie verwenden Node.js, auch verwenden Bower ! Es ist ein Abhängigkeitsmanager. Vereinfacht gesagt, definieren Sie die Ressourcen, die Sie benötigen, "solche Bibliothek in solcher Version" und Bower kümmert sich darum, die gewünschte Version zu erhalten. Natürlich genauso wie composer.json befolgen für PHP, können Sie Versionsbereiche hinzufügen. Wenn Sie eine Bibliothek in Version 3.3., *Laube erhalten Sie die neueste verfügbare Version. Eine Lösung zum einfachen Aktualisieren dieser Ressourcen. Ein wiederkehrendes Problem bei unseren Standardprojekten, weil wir dazu neigen (hatten!), eine Version herunterzuladen und danach nie mehr zu aktualisieren. Wir hatten nicht die kleinen Updates, die manchmal so nützlich sind.

Technisch, Bower verwendet die bower.json-Datei. Seine Syntax ist sehr einfach. Ich fordere Sie auf, es zu verwenden, auch wenn Sie ohne es weitermachen können. Die Datei muss im Gegensatz zu den Ressourcen versioniert werden Bower wird für Sie heruntergeladen. Um Ihnen den Einstieg zu erleichtern, gebe ich Ihnen unten ein Beispiel.

Versionierung kompilierter Ressourcen

Ich für meinen Teil hatte es mir zur Gewohnheit gemacht, meine kompilierten Ressourcen nicht zu versionieren Vermögenswert aber ich beschloss, das Gegenteil zu tun GruntJS. Da verzichte ich auf Ressourcen zum Verwalten Bower (siehe Einführung in Bower), werde ich meine Ressourcen zusammenstellen und Gitter. Auf diese Weise kann ich meine Anwendung schnell bereitstellen. Ich habe noch nie Feedback zu dieser Praxis erhalten, aber sie erscheint mir respektabel, da zwei Operationen zum Zeitpunkt der Bereitstellung abgebrochen werden (Wiederherstellung von Ressourcen mit Bower und mit kompilieren GruntJS) sowie die Notwendigkeit zu haben Node.js auf seiner Maschine.

Entfernen Sie Assetic aus unserem Symfony-Projekt

Vermögenswert wurde als Standardkomponente ausgewählt, die für das Kompilieren von Ressourcen verantwortlich ist. Seien Sie sich bewusst, dass es trotz allem sehr einfach zu entfernen ist.

Blöcke löschen Zweig Typ Javascript et Stylesheet. Sie sind nicht notwendig. Bewahren Sie die verwendeten Dateien beiseite. Zukünftig werden die Dateien, die Sie verwenden möchten, in der Datei definiert Gruntfile.js. Das werden wir etwas später sehen.

#app/config/config.yml
# Konfiguration aus Asset entfernen. Es wird auch einige in config_prod.yml, config_dev.yml und anderen hochgeladenen Dateien geben
Vermögenswert:
 debuggen: „%kernel.debug%“
 use_controller: falsch
 Bündel: []
 Filter:
 CSSrewrite: ~

#app/AppKernel.php
# Beenden Sie das Laden von AsseticBundle, indem Sie die Zeile aus AppKernel löschen
...
neu SymfonyBundleAsseticBundleAsseticBundle()
...

# Composer.json
# Asset-Bundle entfernen
...
„symfony/assetic-bundle“: „~2.3“
...

Bitte schön, du hast deaktiviert Vermögenswert global. Erwarten Sie auf diese Weise nicht mehr, den Befehl zu finden Vermögenswert: Dump et Asset: beobachten.

Wie wird Grunt JS in unserem Projekt arbeiten?

Wir müssen unser Projekt mit drei Dateien konfigurieren:

paket.json die es uns ermöglichen, die Plugins zu installieren Node.js (GruntJS und seine Beiträge);
Bower.json um über zu lösende Abhängigkeiten zu berichten, um unsere Ressourcen zusammenzustellen;
Gruntfile.js an denen Sie am meisten arbeiten werden. Es enthält alle möglichen und/oder durchzuführenden Aktionen, um Ihr Projekt ganz oder teilweise zu kompilieren.

package.json, um Grunt JS zu installieren

{
„Abhängigkeiten“: {
"grunzen": „^0.4.5“,
„grunt-beitrag-weniger“: „~0.11.0“,
„grunt-beitragen-hässlich“: „^0.6.0“,
„Last-Grunz-Aufgaben“: „^0.6.0“
},
„devAbhängigkeiten“: {
"grunzen": „^0.4.5“
}
}

Verwenden Sie zunächst diesen Inhalt. Es erfordert die Installation von GruntJS und Beiträge, von denen zwei (Grunzen-beitragen-weniger et grunzen-beitragen-hässlich) ermöglicht es Ihnen, Ihre JavaScript-Dateien und -Dateien zu kompilieren Weniger.

bower.json um meine Abhängigkeiten zu lösen (bootstrap, font-awesome, …)

{
"ignorieren": [
„**/.*“,
„node_modules“,
„bower_components“,
"Prüfen",
"testen"
],
„Abhängigkeiten“: {
„bootstrap“: „3.3.*“
}
}

Hier ist eine minimale Datei. In meinem Fall habe ich angefordert, dass die neueste Version des 3.3-Zweigs von Bootstrap heruntergeladen werden. Standardmäßig, wenn Sie a Bower-Installation Ihre Abhängigkeiten werden im Ordner installiert Bower_Components. Durch den Gebrauch von .bowerrc Sie können den Zielordner ändern. Weitere Informationen finden Sie auf der Website von Bower.

1 2	# Installieren Sie Abhängigkeiten mit Bower $bower installieren

Gruntfile.js – Wo alles beginnt

Alle Befehle und Aktionen, die Sie dieser Tatsache hinzufügen möchten, in der Datei Gruntfile.js. Unter anderem können Sie Dateien zusammenstellen wenigercss et Frechheit, beliebige Dateien verketten, kompilieren Typoskript, minimieren JavaScript-Dateien, Bilder sowie HTML-Dateien. Sie können auch die Größe von Bildern ändern und Dateien (wie Schriftarten) kopieren.

Heute werde ich Ihnen nur zeigen, wie Sie Dateien kompilieren .weniger und Dateien minimieren . Js. Aktionen, die ich jeden Tag ausführe und die es mir heute ermöglichen, diesen oder jenen Teil leicht zu nutzen bootstrap. Anstatt alle zu verwenden bootstrap wenn alles was du brauchst Glyphikone, kann es interessant sein, an einer benutzerdefinierten Bibliothek zu arbeiten.

Modulen.exports= Funktion (grunzen) {
erfordern('load-grunt-tasks')(grunzen);
grunt.initConfig({
weniger: {
dist: {
Optionen: {
komprimieren: was immer dies auch sein sollte.,
yuikomprimieren: was immer dies auch sein sollte.,
Optimierung: 2
},
Dateien: {
„web/css/main.css“: [
„bower_components/bootsrap/dist/css/bootstrap.css“,
„src/Namespace/MyBundle/Resources/public/css/main.less“
]
}
}
},
verunstalten: {
Optionen: {
fehlt: falsch,
QuelleMap: was immer dies auch sein sollte.
},
dist: {
Dateien: {
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunzen.registerTask('Standard', ["weniger", "verunstalten"]);
};

Hier ist eine perfekt funktionierende Datei. Ich benutze es auch für ein Projekt mit wenig Rahmen denn es ist ein API. Vermögenswert war in meinem Fall ziemlich nutzlos. Also habe ich lieber darauf verzichtet, ein serverexternes Tool zu verwenden und die perfekt konstruierten Ressourcen zum Zeitpunkt des Deployments zu liefern.

Lassen Sie uns die Aktionen für Gruntfile.js beschreiben

In der vorherigen Datei konfiguriere ich die beiden Beiträge von GruntJS (_weniger _und verunstalten), die ich dank meiner installiert habe paket.json. Sie werden feststellen, dass die Plugins leicht voneinander zu unterscheiden sind. Nehmen Sie den Fall der Erweiterung weniger.

Jeder Beitrag Grunzen die Sie verwenden werden, muss über ein für den Beitrag definiertes Schlüsselwort deklariert werden. Beispiel für Grunzen-beitragen-weniger das Schlüsselwort ist weniger. Unter diesem Teil können wir definieren Ziele. Unter dem Begriff Ziel verstehen Unterteil. In einem konkreten Fall könnten wir a definieren Ziel bootstrap um die gleichnamige Bibliothek aus dem Quellcode zu kompilieren weniger. Wir könnten eine andere Menge definieren dist um die Quellen unseres Projekts zusammenzustellen. Die Verwendung mehrerer Teilmengen ist nicht zwingend erforderlich, aber Sie haben die Möglichkeit, diese später zu verwenden, wenn Sie die verwenden Beitrag beobachten um Zeit zu sparen.

Dann ist die Struktur der Teilmengen der gleichen Erweiterung ISO. Bei Contrario unterscheidet sich die Struktur jedes Beitrags. Standardbeiträge werden oft mit vielen Beispielen vorgestellt. Offizielle Plugins sind im GitHub-Repository verfügbar.

Kommen wir zurück zu unserem Beispiel und der Konfiguration der Zusammenstellung unserer Dateien .weniger. Im Spiel Dateien Wir fügen den Namen der endgültigen Dateien als Schlüssel und als Wert ein Array von zu kompilierenden Eingabedateien hinzu. Ich denke, es ist nicht notwendig, mehr ins Detail zu gehen, da die Syntax ziemlich intuitiv ist.

Der Beitrag verunstalten Wird für die Verkettung, Minimierung und Komprimierung von JavaScript-Dateien verwendet und verwendet dieselbe Struktur. In diesem Fall ist es ganz einfach, seine beiden Beiträge zu verwenden.

Die Kunst des Kompilierens

Und jetzt Kompilons unsere Quellen. Mit Vermögenswert, führen wir diesen Befehl aus:

1	php-App/Konsole Assetic:Dump

Jetzt haben wir entfernt AsseticBundle. Wir haben diese Bestellung nicht mehr. Also werden wir unser Plugin von ausführen Knoten.

grunzen

Sie sehen, es ist immer noch nicht sehr kompliziert ... In diesem Fall werden die Aufgaben ausgeführt, die für das Profil angegeben sind default. Es wurde in der letzten Zeile definiert.

1	grunzen.registerTask('Standard', ["weniger", "verunstalten"]);

Sie hätten sehr gut ein Profil definiert Javascript der nicht hingerichtet hätte verunstalten.

1	grunzen.registerTask('javascript', ['verunstalten']);

Falls Sie den Befehl hätten ausführen können Grunzen mit dem Profilnamen dahinter.

1	Grunzen Javascript

Sie können beliebig viele Profile definieren. Bei meinem Profil Javascript, das Interesse ist geringer, weil Sie auch den folgenden Anruf hätten tätigen können.

1	grunzen hässlich

Zusammenfassung

Jetzt wissen Sie, wie Sie Ihre Ressourcen zusammenstellen. Wenn Sie nicht alle Feinheiten verstanden haben, sollten Sie schnell die ganze Flexibilität zu schätzen wissen, die Ihnen geboten wird Grunzen gegenüberVermögenswert. Außerdem lassen sich neben typischen Ressourcen wie Javascript und CSS auch Schriften, Bilder etc. verarbeiten. Ein Plus, das mich schnell überzeugt hat.

Der eigentliche Vorteil von Grunzen ist seine Flexibilität seine Verwendung. Grunzen et Bower zwischen ihnen verkörpert eine Alternative zu Assetic. Ohne Bower mit dem kann man noch arbeiten Grunzen aber die Erfahrung wird nicht vollständig sein.

Ich hoffe, dieser Artikel wird es Ihnen ermöglichen, die Verwendung von leicht zu verstehen Grunzen. Seien Sie mutig, Sie haben es fast geschafft!