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

ik wist GruntJS zonder het ooit te hebben gebruikt, maar ik had het van een ontwikkelaar moeten horen symfony geef me de massa zodat ik deze oplossing kan onderzoeken. Vervang eerst actief par GruntJS was voor mij een oplossing om mijn projecten te laten werken symfony avec HHVM. Nu de serveerder PHP de Facebook werkt perfect mee actief maar ik vind steeds minder redenen om te blijven gebruiken actief. Tot slot het gebruik van knorren, een plug-in gebaseerd op Knooppunt JS, stimuleert de meeste ontwikkelaars om te gebruiken Prieel, een andere plug-in voor het beheren van afhankelijkheden. We zullen het hebben over Prieel lager. Laten we de voor- en nadelen snel bekijken.

Aandacht ! Voordat u begint met het migreren van uw applicatie, raad ik u aan uw code te versieren en wat te testen. Het wordt sterk aangeraden om het hele artikel te lezen alvorens aan deze langdurige missie te beginnen.

overzicht

Introductie

Assetic, de onbegrepen vriend

Van mijn kant overweeg ik datactief wordt verkeerd begrepen en misbruikt. Ik zal mijn gedachten aan je uitleggen. (Bovendien heb ik dit artikel gecorrigeerd na een misverstand van mijn kant, met dank aan Manuel Klein voor zijn feedback).

Voordeel

Het gebruik vanactief stelt u in staat de cache op de bronnen te annuleren omdat de naam van de gegenereerde JS- en CSS-bronnen elke keer dat u de opdracht start, verandertactief:dump”. Een zeker voordeel!

nadelen

Assetic biedt weinig opties om te configureren hoe bronnen worden gegenereerd.
Het is noodzakelijk om PHP-bundels te installeren om exotische bronnen zoals LESS te genereren. De PHP-code wordt geïnstalleerd in het vendors terwijl deze taak alleen nuttig is voor de klant. Nee voor de server. Bovendien verhoogt het het nummer van uw project.
Code PHP is nodig in de templates Takje utilisant actief of bijna allemaal. Terwijl met Grunt de gecompileerde bron wordt genoemd met de naam die u eraan hebt gegeven.

Gebruik Assetic echt in uw sjablonen

Ik zie vaak in de templates Takje die ik tegenkom, bronnen soms gelinkt via actief, soms via de activa de symfonie.

# Assetic gebruiken
@NamespaceMyBundle/Resources/public/css/main.css
# Ongebruikte activa, activa gebruiken
/bundles/namespacemy/css/main.css

In het eerste geval, actief echt van toepassing. In het tweede geval actief is volledig verborgen om de activa de symfony. Het gebruik van activa is naar mijn mening ook een vergissing, althans voor toegang tot JS- en CSS-bronnen. Einde van haakje...

Grunt JS de Sooo flexibele compiler!

GruntJS gebaseerd op Node.js. Het is een tool aan de clientzijde die modules gebruikt om veel acties uit te voeren, zoals het samenvoegen van bestanden, minification, beeldcompressie, compilatie van LESS, TypeScript… In tegenstelling tot actief, zult u bepaalde configuraties moeten instellen, maar wees gerust, deze initiële investering zal zich terugbetalen en uiteindelijk veel sneller danactief.

Inleiding tot Bower, de composer.json van bronnen

GruntJS is goed en komt op hetzelfde segment te staan alsactief. Maar zolang je gebruikt Node.js, ook gebruiken Prieel ! Het is een afhankelijkheidsmanager. Om het simpel te zeggen, u definieert de bronnen die u nodig hebt, "deze bibliotheek in die versie" en Prieel zorgt ervoor dat u de gewenste versie krijgt. Natuurlijk, net als composer.json voor PHP, kunt u versiebereiken toevoegen. Als u een bibliotheek in versie 3.3., *Prieel krijgt u de nieuwste beschikbare versie. Een oplossing om deze bronnen eenvoudig bij te werken. Een terugkerend probleem bij onze standaardprojecten omdat we de neiging hebben (gehad!) om een versie te downloaden en deze daarna nooit meer bij te werken. We hadden niet de kleine updates die soms zo handig zijn.

Technisch gezien, Prieel gebruikt het bestand bower.json. De syntaxis is heel eenvoudig. Ik verzoek u dringend om het te gebruiken, zelfs als u zonder kunt. Het bestand moet een versienummer hebben, in tegenstelling tot de bronnen die Prieel zal voor je komen downloaden. Om je op weg te helpen, geef ik je hieronder een voorbeeld.

Versiebeheer van gecompileerde bronnen

Van mijn kant had ik de gewoonte aangenomen om mijn gecompileerde bronnen niet te versieren actief maar ik besloot het tegenovergestelde voor te doen GruntJS. Omdat ik het zonder middelen doe om door te gaan Prieel (zie Inleiding tot Prieel), zal ik mijn bronnen samenstellen en gitters. Op deze manier kan ik mijn applicatie snel implementeren. Ik heb nog nooit feedback gehad over deze praktijk, maar het lijkt mij respectabel omdat twee operaties worden geannuleerd op het moment van inzet (herstel van middelen met Prieel en compileren met GruntJS), evenals de behoefte om te hebben Node.js op zijn automaat.

Verwijder Assetic uit ons Symfony-project

actief werd gekozen als de standaardcomponent die verantwoordelijk is voor het samenstellen van bronnen. Houd er rekening mee dat het ondanks alles heel gemakkelijk te verwijderen is.

Blokken verwijderen Takje Type javascript et stylesheet. Ze zijn niet nodig. Bewaar de bestanden die u gebruikte opzij. In de toekomst worden de bestanden die u wilt gebruiken in het bestand gedefinieerd Gruntfile.js. Dat zien we later wel.

#app/config/config.yml
# Verwijder de configuratie van assetic. Er zullen er ook enkele zijn in config_prod.yml, config_dev.yml en andere geüploade bestanden
actief:
 debuggen: "%kernel.debug%"
 gebruik_controller: vals
 bundels: []
 filters:
 cssherschrijven: ~

#app/AppKernel.php
# Stop met het laden van AsseticBundle door de regel uit AppKernel te verwijderen
...
nieuwe SymfonyBundleAsseticBundleAsseticBundle()
...

# componist.json
# Verwijder activabundel
...
"symfony/assetic-bundel": "~2.3"
...

Ziezo, je hebt gedeactiveerd actief wereldwijd. Verwacht op deze manier niet langer de opdracht te vinden actief: dump et actief: horloge.

Hoe werkt Grunt JS binnen ons project?

We zullen ons project moeten configureren met drie bestanden:

package.json waarmee we de plug-ins kunnen installeren Node.js (GruntJS en zijn bijdragen);
prieel.json om te rapporteren over afhankelijkheden die moeten worden opgelost om onze middelen samen te stellen;
Gruntfile.js waar je het meest aan zult werken. Het bevat alle mogelijke en/of uit te voeren acties om een deel of het geheel van uw project samen te stellen.

package.json om Grunt JS te installeren

{
"afhankelijkheden": {
"grom": "^0.4.5",
"grom-bijdrage-loos": "~0.11.0",
"grunt-bijdragen-lelijk maken": "^0.6.0",
"load-grunt-taken": "^0.6.0"
},
"devAfhankelijkheden": {
"grom": "^0.4.5"
}
}

Gebruik eerst deze inhoud. Het vereist de installatie van GruntJS en bijdragen, waarvan twee (grunt-bijdrage-loos et grunt-bijdragen-vergeleken) stelt u in staat uw JavaScript-bestanden en -bestanden te compileren Lesscss.

bower.json om mijn afhankelijkheden op te lossen (bootstrap, font-awesome, …)

{
"negeren"[
"**/.*",
"node_modules",
"prieel_componenten",
" test ",
"testen"
],
"afhankelijkheden": {
"bootstrap": "3.3.*"
}
}

Hier is een minimaal bestand. In mijn geval vroeg ik om de laatste versie van tak 3.3 van Bootstrap worden gedownload. Standaard, wanneer u een prieel installeren uw afhankelijkheden worden in de map geïnstalleerd bower_componenten. Door het gebruik van .bowerrc u kunt de bestemmingsmap wijzigen. Meer informatie vind je op de website van Bower.

1 2	# Installeer afhankelijkheden met Bower $ prieel installeren

Gruntfile.js – Waar het allemaal begint

Alle commando's en acties die u wilt toevoegen aan het bestand Gruntfile.js. U kunt onder andere bestanden samenstellen mindercss et sass, alle soorten bestanden samenvoegen, compileren getypte tekst, kleineren JavaScript-bestanden, afbeeldingen en HTML-bestanden. U kunt ook het formaat van afbeeldingen wijzigen en bestanden (zoals lettertypen) kopiëren.

Vandaag laat ik je zien hoe je bestanden compileert .minder en bestanden verkleinen . Js. Handelingen die ik elke dag uitvoer en waarmee ik vandaag gemakkelijk dit of dat deel van kan gebruiken bootstrap. In plaats van alles te gebruiken bootstrap wanneer alles wat je nodig hebt is glyphicons, kan het interessant zijn om aan een aangepaste bibliotheek te werken.

module.export= functie (knorren) {
vereisen('load-grunt-taken')(grom);
grunt.initConfig({
minder: {
dist: {
opties: {
samendrukken: waar,
yuikompress: waar,
optimalisatie: 2
},
bestanden: {
"web/css/main.css"[
"bower_components/bootsrap/dist/css/bootstrap.css",
"src/Namespace/MyBundle/Resources/public/css/main.less"
]
}
}
},
verlelijken: {
opties: {
mangrove: vals,
bronMap: waar
},
dist: {
bestanden: {
'web/js/main.js'[
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grom. registerTask('standaard'["minder", "verlelijken"]);
};

Hier is een perfect werkend bestand. Ik gebruik het ook op een project met weinig omlijsting omdat het een API. actief was in mijn geval vrij nutteloos. Dus ik gaf er de voorkeur aan om het zonder te doen om een tool buiten de server te gebruiken en de perfect geconstrueerde bronnen te leveren op het moment van implementatie.

Laten we de acties voor Gruntfile.js beschrijven

In het vorige bestand configureer ik de twee bijdragen van GruntJS (_minder _en verlelijken) die ik heb geïnstalleerd dankzij my package.json. U zult merken dat de plug-ins gemakkelijk van elkaar te onderscheiden zijn. Neem het geval van de extensie minder.

Elke bijdrage knorren die u gaat gebruiken moet worden aangegeven via een voor de bijdrage gedefinieerd trefwoord. Voorbeeld, voor grunt-bijdrage-loos het sleutelwoord is minder. Onder dit deel kunnen we definiëren doelen. Onder de termijn doel begrijpen subdeel. In een concreet geval zouden we a kunnen definiëren doel bootstrap om de bibliotheek met dezelfde naam uit de bron te compileren minder. We zouden een andere set kunnen definiëren dist om de bronnen van ons project samen te stellen. Het gebruik van meerdere subsets is geen noodzaak, maar u krijgt de mogelijkheid om ze later te gebruiken wanneer u de contributie horloge tijd besparen.

Dan is de structuur van de subsets van dezelfde extensie ISO. Bij Contrario verschilt de structuur van elke bijdrage. Standaardbijdragen worden vaak gepresenteerd met veel voorbeelden. Officiële plug-ins zijn beschikbaar in de GitHub-repository.

Laten we teruggaan naar ons voorbeeld en de configuratie van de compilatie van onze bestanden .minder. In het spel bestanden we voegen de naam van de uiteindelijke bestanden toe als sleutel en als waarde een reeks invoerbestanden om te compileren. Ik denk dat het niet nodig is om meer details te geven, omdat de syntaxis vrij intuïtief is.

De bijdrage verlelijken gebruikt voor aaneenschakeling, verkleining en compressie van JavaScript-bestanden, gebruikt dezelfde structuur. In dit geval is het vrij eenvoudig om de twee bijdragen te gebruiken.

De kunst van het samenstellen

En nu compilons onze bronnen. Met actief, voeren we deze opdracht uit:

1	php app/console assetic:dump

Nu hebben we verwijderd AsseticBundel. Deze bestelling hebben wij niet meer. Dus we gaan onze plug-in uitvoeren vanaf Knooppunt.

knorren

U ziet dat het nog steeds niet erg ingewikkeld is... In dit geval zijn de taken die worden uitgevoerd de taken die voor het profiel zijn opgegeven standaard. Het werd gedefinieerd in de laatste regel.

1	grom. registerTask('standaard'["minder", "verlelijken"]);

Je zou heel goed een profiel hebben gedefinieerd javascript die niet zou hebben geëxecuteerd verlelijken.

1	grom. registerTask('javascript'['verlelijken']);

Voor het geval je de opdracht had kunnen uitvoeren knorren met de profielnaam erachter.

1	grom javascript

U kunt zoveel profielen definiëren als u wilt. In het geval van mijn profiel javascript, is de rente minder omdat u ook de volgende oproep had kunnen doen.

1	grommen lelijk maken

Conclusie

Nu weet u hoe u uw bronnen moet samenstellen. Als je niet alle subtiliteiten hebt begrepen, zou je snel alle flexibiliteit moeten kunnen waarderen die wordt geboden door knorren rekeninghoudend metactief. Bovendien kan je naast typische middelen zoals javascript en css ook fonts, afbeeldingen... verwerken. Een troef die me snel overtuigde.

Het echte voordeel van knorren is zijn flexibiliteit zijn gebruik. knorren et Prieel tussen hen belichaamt een alternatief voor Assetic. Zonder Prieel waar je nog mee kunt werken knorren maar de ervaring zal niet totaal zijn.

Ik hoop dat dit artikel je in staat zal stellen om het gebruik van gemakkelijk te begrijpen knorren. Houd moed, je bent er bijna!