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

ma teadsin GruntJS ilma, et oleksin seda kunagi kasutanud, kuid oleksin pidanud kuulma arendajalt Symfony anna mulle mass, et ma seda lahendust uuriksin. Esiteks asendage Asteetlik isegi GruntJS oli minu jaoks lahendus oma projektide toimimiseks Symfony koos HHVM. Nüüd server PHP de Facebook töötab ideaalselt Asteetlik kuid ma leian üha vähem põhjuseid kasutamise jätkamiseks Asteetlik. Lõpuks kasutamine uriseja, plugin, mis põhineb Sõlm JS, sunnib enamikku arendajaid kasutama Bowers, teine plugin sõltuvuste haldamiseks. Me räägime sellest Bowers madalam. Vaatame kiirelt plusse ja miinuseid.

Tähelepanu! Enne rakenduse migreerimise alustamist soovitan teil oma koodi versiooni muuta ja testida. Enne selle pikaajalise missiooni alustamist on tungivalt soovitatav lugeda kogu artikkel läbi.

kokkuvõte

sissejuhatus

Assetic, valesti mõistetud sõber

Omalt poolt arvan sedaAsteetlik on valesti mõistetud ja väärkasutatud. Ma selgitan teile oma mõtteid. (Lisaks parandasin seda artiklit pärast minupoolset arusaamatust, tänu Manuel Kleinile tagasiside eest).

Kasu

KasutamineAsteetlik võimaldab teil ressursside vahemälu tühistada, kuna loodud JS- ja CSS-ressursside nimi muutub iga kord, kui käivitate käsu "assetiline:prügi". Teatav eelis!

miinused

Assetic pakub vähe võimalusi ressursside loomise konfigureerimiseks.
Eksootiliste ressursside, nagu VÄHEM, genereerimiseks on vaja installida PHP kimbud. PHP kood on installitud müüjad samas kui see ülesanne on kasulik ainult kliendile. Ei serveri jaoks. Lisaks suurendab see teie projekti arvu.
Kood PHP on vajalik malle Kukk utilisant Asteetlik või peaaegu kõik. Grunti puhul nimetatakse kompileeritud ressurssi teie antud nimega.

Kasutage oma mallides tõesti Asseticut

Ma näen sageli malle Kukk millega ma kokku puutun, mõnikord lingitud ressursside kaudu Asteetlik, mõnikord kaudu vara de sümfoonia.

# Asseticu kasutamine
@NamespaceMyBundle/Resources/public/css/main.css
# Kasutamata Assetic, kasutades varasid
/bundles/namespacemy/css/main.css

Esimesel juhul Asteetlik kehtib tõesti. Teisel juhul Asteetlik on täielikult peidetud, et mitte kasutada vara de Symfony. Kasutamine vara on ka minu arvates viga, vähemalt JS-i ja CSS-i ressurssidele juurdepääsu osas. Sulgude lõpp...

Grunt JS on nii paindlik kompilaator!

GruntJS põhineb Node.js. See on kliendipoolne tööriist, mis kasutab mooduleid paljude toimingute tegemiseks, näiteks failide ühendamiseks, minifitseerimiseks, piltide tihendamine, LESS-i koostamine, TypeScript… Erinevalt Asteetlik, peate seadistama teatud konfiguratsioonid, kuid võite olla kindel, et see esialgne investeering tasub end ära ja lõpuks palju kiiremini kuiAsteetlik.

Boweri, ressursside helilooja.jsoni tutvustus

GruntJS on hea ja tuleb paigutada samasse segmentiAsteetlik. Aga seni kuni kasutad Node.js, samuti kasutada Bowers ! See on sõltuvushaldur. Lihtsamalt öeldes määratlete vajalikud ressursid, "selline teek sellises versioonis" ja Bowers hoolitseb soovitud versiooni hankimise eest. Muidugi, just nagu comper.json eest PHP, saate lisada versioonivahemikke. Kui soovite teeki versioonis 3.3., *Bower pakub teile uusimat versiooni. Lahendus nende ressursside hõlpsaks värskendamiseks. Korduv probleem meie standardprojektides, kuna meil on (oli!) kalduvus alla laadida versioon ja seda hiljem mitte kunagi värskendada. Meil puudusid väikesed uuendused, mis mõnikord nii kasulikud on.

Tehniliselt Bowers kasutab faili bower.json. Selle süntaks on väga lihtne. Soovitan tungivalt seda kasutada, isegi kui saate ilma selleta jätkata. Erinevalt ressurssidest tuleb faili versioonida Bowers laaditakse teie jaoks alla. Alustuseks toon teile allpool näite.

Koostatud ressursside versioonimine

Mul oli omalt poolt harjumuseks mitte koostada oma koostatud ressursse Asteetlik kuid otsustasin teha vastupidist GruntJS. Kuna mul pole ressursse, millega majandada Bowers (vt Sissejuhatus Bowers), koostan oma vahendid ja gitters. Sel viisil saan oma rakenduse kiiresti juurutada. Ma ei ole selle praktika kohta kunagi tagasisidet saanud, kuid see tundub mulle austusväärne, kuna kaks toimingut tühistatakse kasutuselevõtu ajal (ressursside taastamine Bowers ja koostada GruntJS), samuti vajadus omada Node.js tema masinal.

Eemaldage Assetic meie Symfony projektist

Asteetlik valiti ressursside koostamise eest vastutavaks vaikekomponendiks. Pidage meeles, et vaatamata kõigele on seda väga lihtne eemaldada.

Kustuta plokid Kukk Tüüpi JavaScript et laaditabel. Need pole vajalikud. Jätke kasutatavad failid kõrvale. Edaspidi määratletakse failis failid, mida soovite kasutada Gruntfile.js. Seda näeme veidi hiljem.

#app/config/config.yml
# Eemalda konfiguratsioon assetist. Mõned neist on ka failides config_prod.yml, config_dev.yml ja muudes üleslaaditud failides
aseetiline:
 silumine: "%kernel.debug%"
 use_controller: vale
 kimbud: []
 filtrid:
 cssrewrite: ~

#app/AppKernel.php
# Lõpetage AsseticBundle'i laadimine, kustutades rea AppKernelist
...
uus SymfonyBundleAsseticBundleAsseticBundle()
...

# helilooja.json
# Eemaldage elementaarne kimp
...
"symfony/assetic-bundle": "~2.3"
...

Oled sa desaktiveerinud Asteetlik globaalselt. Sel viisil ärge oodake enam käsu leidmist assetic: dump et assetiline: vaadata.

Kuidas Grunt JS meie projekti raames töötab?

Peame oma projekti konfigureerima kolme failiga:

pakett.json mis võimaldab meil pluginaid installida Node.js (GruntJS ja tema panused);
bower.json anda aru lahendatavatest sõltuvustest oma ressursside koostamiseks;
Gruntfile.js mille kallal hakkate kõige rohkem töötama. See sisaldab kõiki võimalikke ja/või vajalikke toiminguid projekti osa või kogu koostamiseks.

package.json Grunt JS-i installimiseks

{
"sõltuvused": {
"nurida": "^0.4.5",
“murd-panu-vähem”: "~0.11.0",
"nördida-panusta-üljatada": "^0.6.0",
"laadimine-grunt-ülesanded": "^0.6.0"
},
"Dependentsid": {
"nurida": "^0.4.5"
}
}

Esiteks kasutage seda sisu. See nõuab paigaldamist GruntJS ja panused, millest kaks (nurin-panus-vähem et nurisema-panustama-uglima) võimaldab teil JavaScripti faile ja faile kompileerida Vähem.

bower.json minu sõltuvuste lahendamiseks (bootstrap, font-awesome jne)

{
"ignoreerima": [
“**/.*”,
"node_modules",
"bower_components",
"test",
"testimine"
],
"sõltuvused": {
"bootstrap": "3.3.*"
}
}

Siin on minimaalne fail. Minu puhul taotlesin, et 3.3 haru uusim versioon Bootstrap alla laadida. Vaikimisi, kui teete a kaevu paigaldamine teie sõltuvused installitakse kausta bower_components. Kasutamise kaudu .bowerrc saate sihtkausta muuta. Lisateavet leiate Boweri veebisaidilt.

1 2	# Installige sõltuvused Boweri abil $ bower install

Gruntfile.js – kust see kõik algab

Kõik käsud ja toimingud, mida soovite selle fakti faili lisada Gruntfile.js. Muuhulgas saab faile kompileerida vähemcss et sass, ühendage mis tahes tüüpi failid, kompileerige TypeScript, minimeerida JavaScripti faile, pilte ja HTML-faile. Samuti saate muuta piltide suurust ja kopeerida faile (nt fonte).

Täna näitan teile, kuidas faile kompileerida .vähem ja failide minimeerimine . Js. Toimingud, mida ma teen iga päev ja mis võimaldavad mul täna seda või teist osa hõlpsasti kasutada bootstrap. Selle asemel, et kasutada kõike bootstrap kui kõik, mida vajate, on glükoonid, võib olla huvitav töötada kohandatud teegi kallal.

moodul.eksport= funktsioon (uriseja) {
nõudma('load-grunt-tasks')(hirn);
grunt.initConfig({
vähem: {
dist: {
valikuid: {
kompress: tõsi,
yuicompress: tõsi,
optimeerimine: 2
},
failid: {
"web/css/main.css": [
"bower_components/bootsrap/dist/css/bootstrap.css",
"src/Namespace/MyBundle/Resources/public/css/main.less"
]
}
}
},
inetuma: {
valikuid: {
mangle: vale,
allikakaart: tõsi
},
dist: {
failid: {
"web/js/main.js": [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. registerTask('vaikimisi', ["vähem", "inetu"]);
};

Siin on täiesti töötav fail. Ma kasutan seda ka projektis, kus on vähe raam sest see on a API. Asteetlik oli minu puhul üsna kasutu. Seetõttu eelistasin ilma selleta teha, et kasutada serverivälist tööriista ja pakkuda juurutamise ajal täiuslikult ehitatud ressursse.

Kirjeldame Gruntfile.js-i toiminguid

Eelmises failis konfigureerin faili kaks panust GruntJS (_vähem _ja inetuma), mille installisin tänu minu pakett.json. Märkate, et pistikprogramme on lihtne üksteisest eristada. Võtke laienduse juhtum vähem.

Iga panus uriseja mida kavatsete kasutada, tuleb deklareerida panuse jaoks määratud märksõna kaudu. Näiteks jaoks nurin-panus-vähem võtmesõna on vähem. Selle osa all saate määratleda eesmärgid. Termini all sihtmärk mõista Alajagu. Konkreetsel juhul võiksime määratleda a sihtmärk bootstrap allikast samanimelise raamatukogu koostamiseks vähem. Võiksime määratleda teise komplekti dist koostada meie projekti allikad. Mitme alamhulga kasutamine ei ole vajalik, kuid teil on võimalus neid hiljem kasutada, kui kasutate panus vaadata et aega kokku hoida.

Siis on sama laiendi alamhulkade struktuur ISO. Contrario puhul on iga panuse struktuur erinev. Tavalisi kaastöid esitatakse sageli paljude näidetega. Ametlikud pistikprogrammid on saadaval GitHubi hoidlas.

Läheme tagasi meie näite ja failide koostamise konfiguratsiooni juurde .vähem. Mängus failid lisame võtmena lõplike failide nimed ja väärtusena kompileeritavate sisendfailide massiivi. Ma arvan, et pole vaja üksikasjalikumalt kirjeldada, sest süntaks on üsna intuitiivne.

Panus inetuma kasutatakse JavaScripti failide ühendamiseks, minimeerimiseks ja tihendamiseks, kasutab sama struktuuri. Sel juhul on selle kahe panuse kasutamine üsna lihtne.

Koostamise kunst

Ja nüüd kompilons meie allikad. Koos Asteetlik, käivitame selle käsu:

1	php rakendus/konsool assetic:dump

Nüüd oleme eemaldanud AsseticBundle. Meil pole enam seda tellimust. Nii et hakkame oma pistikprogrammi käivitama sõlme.

uriseja

Näete, see pole ikka väga keeruline... Sel juhul täidetakse profiili jaoks määratud ülesanded vaikimisi. See oli määratletud viimasel real.

1	grunt. registerTask('vaikimisi', ["vähem", "inetu"]);

Teil oleks väga hästi määratletud profiil JavaScript kes poleks hukkanud inetuma.

1	grunt. registerTask('javascript', ['inetuma']);

Kui oleksite saanud käsu käivitada uriseja profiilinimega pärast.

1	irvitama javascripti

Saate määrata nii palju profiile, kui soovite. Minu profiili puhul JavaScript, on huvi väiksem, sest oleks võinud teha ka järgmise kõne.

1	nurisema inetuma

järeldus

Nüüd teate, kuidas oma ressursse koostada. Kui te pole kõigist peensustest aru saanud, peaksite kiiresti suutma hinnata kogu pakutavat paindlikkust uriseja austusegaAsteetlik. Veelgi enam, peale tüüpiliste ressursside, nagu javascript ja css, saate töödelda ka fonte, pilte... Vara, mis mind kiiresti võitis.

Tõeline eelis uriseja on selle paindlikkus selle kasutamine. uriseja et Bowers nende vahel kehastab alternatiivi Asseticule. Ilma Bowers saate ikkagi töötada uriseja kuid kogemus ei ole täielik.

Loodan, et see artikkel võimaldab teil hõlpsasti mõista selle kasutamist uriseja. Ole julge, sa oled peaaegu kohal!