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

vedel sem GruntJS ne da bi ga kdaj uporabil, vendar bi moral slišati od razvijalca Simfonija daj mi maso, da preučim to rešitev. Najprej zamenjajte Assetic celo GruntJS je bila zame rešitev za uspešno delo mojih projektov Simfonija z HHVM. Zdaj pa strežnik PHP de Facebook odlično deluje z Assetic vendar najdem vse manj razlogov za nadaljnjo uporabo Assetic. Končno uporaba grunt, vtičnik, ki temelji na Vozlišče JS, spodbuja večino razvijalcev k uporabi Bowers, še en vtičnik za upravljanje odvisnosti. Pogovarjali se bomo o Bowers nižje. Oglejmo si na hitro prednosti in slabosti.

Pozor! Preden začnete seliti svojo aplikacijo, vam svetujem, da različico kode in opravite nekaj testiranj. Preden se podate na to dolgoročno misijo, močno priporočamo branje celotnega članka.

povzetek

Predstavitev

Assetic, nerazumljeni prijatelj

Kar se mene tiče, to upoštevamAssetic napačno razumljen in zlorabljen. Pojasnil vam bom svoje misli. (Poleg tega sem ta članek popravil zaradi nesporazuma z moje strani, hvala Manuelu Kleinu za njegove povratne informacije).

Benefit

UporabaAssetic omogoča preklic predpomnilnika virov, ker se ime ustvarjenih virov JS in CSS spremeni vsakič, ko zaženete ukaz "assetic:dump”. Določena prednost!

slabosti

Assetic ponuja nekaj možnosti za konfiguracijo načina ustvarjanja virov.
Za ustvarjanje eksotičnih virov, kot je LESS, je treba namestiti pakete PHP. Koda PHP je nameščena v prodajalci medtem ko je ta naloga uporabna samo za naročnika. Ne za strežnik. Poleg tega poveča število vašega projekta.
Koda PHP je potrebno v predloge Vejica utilisant Assetic ali skoraj vsi. Pri Gruntu pa bo prevedeni vir poklican z imenom, ki ste mu ga dali.

Resnično uporabite Assetic v svojih predlogah

Pogosto vidim v predloge Vejica na katere naletim, viri, povezani včasih prek Assetic, včasih prek sredstva de Simfonija.

# Uporaba Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Neuporabljen Assetic, z uporabo sredstev
/bundles/namespacemy/css/main.css

V prvem primeru, Assetic res velja. V drugem primeru Assetic je popolnoma skrita, da ne bi uporabljala sredstva de Simfonija. Uporaba sredstva je tudi napaka po mojem mnenju, vsaj za dostop do virov JS in CSS. Konec oklepaja ...

Grunt JS Sooo prilagodljiv prevajalnik!

GruntJS temelji na Node.js. Je orodje na strani odjemalca, ki uporablja module za izvajanje številnih dejanj, kot so združevanje datotek, pomanjševanje, stiskanje slik, kompilacija LESS, TypeScript… Za razliko od Assetic, boste morali nastaviti določene konfiguracije, vendar bodite prepričani, da se bo ta začetna naložba povrnila in na koncu veliko hitreje kotAssetic.

Uvod v Bower, composer.json virov

GruntJS je dober in ga uvrščamo v isti segment kotAssetic. Toda dokler uporabljate Node.js, kot tudi uporabo Bowers ! Je upravitelj odvisnosti. Preprosto povedano, določite vire, ki jih potrebujete, "taka knjižnica v taki različici" in Bowers poskrbi za pridobitev želene različice. Seveda, tako kot composer.json za PHP, lahko dodate obsege različic. Če želite knjižnico v različici 3.3., *Bower boste dobili najnovejšo različico, ki je na voljo. Rešitev za preprosto posodobitev teh virov. Ponavljajoča se težava pri naših standardnih projektih, ker smo (bili!) nagnjeni k prenosu različice in je pozneje nikoli ne posodobimo. Manjših posodobitev, ki so včasih tako uporabne, nismo imeli.

Tehnično, Bowers uporablja datoteko bower.json. Njegova sintaksa je zelo preprosta. Pozivam vas, da ga uporabite, tudi če lahko nadaljujete brez njega. Za razliko od virov, ki jih Bowers bo prišel prenos za vas. Za lažji začetek vam bom navedel primer spodaj.

Različice prevedenih virov

Kar se mene tiče, sem se navadil, da svojih zbranih virov ne uporabljam za različice Assetic vendar sem se odločil narediti nasprotno za GruntJS. Ker nimam sredstev za upravljanje Bowers (glejte Uvod v Bowers), zbral bom svoje vire in gitters. Na ta način lahko hitro razmestim svojo aplikacijo. Nikoli nisem dobil povratnih informacij o tej praksi, vendar se mi zdi vredna spoštovanja, ker sta dve operaciji preklicani v času uvajanja (obnovitev virov z Bowers in prevedite s GruntJS), pa tudi potrebo po imeti Node.js na njegovem stroju.

Odstranite Assetic iz našega projekta Symfony

Assetic je bil izbran za privzeto komponento, odgovorno za zbiranje virov. Zavedajte se, da ga je kljub vsemu zelo enostavno odstraniti.

Izbriši bloke Vejica Od vrste javascript et stylesheet. Niso potrebne. Datoteke, ki ste jih uporabljali, pustite ob strani. V prihodnje bodo datoteke, ki jih želite uporabiti, definirane v datoteki Gruntfile.js. To bomo videli malo kasneje.

#app/config/config.yml
# Odstranite konfiguracijo iz assetic. Nekaj ​​jih bo tudi v config_prod.yml, config_dev.yml in drugih naloženih datotekah
sredstvo:
 razhroščevanje: “%kernel.debug%”
 use_controller: false
 svežnji: []
 filtri:
 cssrewrite: ~

#app/AppKernel.php
# Ustavite nalaganje AsseticBundle z brisanjem vrstice iz AppKernel
...
novo SymfonyBundleAsseticBundleAsseticBundle()
...

# skladatelj.json
# Odstranite paket sredstev
...
“symfony/assetic-bundle”: “~2.3”
...

Evo, deaktivirali ste se Assetic globalno. Na ta način ne pričakujte več, da boste našli ukaz assetic:smetišče et sredstvo: ura.

Kako bo Grunt JS deloval znotraj našega projekta?

Naš projekt bomo morali konfigurirati s tremi datotekami:

paket.json kar nam bo omogočilo namestitev vtičnikov Node.js (GruntJS in njegovi prispevki);
bower.json za poročanje o odvisnostih, ki jih je treba razrešiti, da bi sestavili naše vire;
Gruntfile.js na katerem boste največ delali. Vsebovala bo vsa dejanja, ki so možna in/ali jih je treba izvesti za prevajanje dela ali celotnega vašega projekta.

package.json za namestitev Grunt JS

{
"odvisnosti": {
"grunt": “^0.4.5”,
"grunt-contrib-less": “~0.11.0”,
“grunt-contrib-uglify”: “^0.6.0”,
“obremenitve-grunt-tasks”: “^0.6.0”
},
“devDependencies”: {
"grunt": “^0.4.5”
}
}

Najprej uporabite to vsebino. Zahteva namestitev GruntJS in prispevki, od katerih dva (grunt-contrib-less et grunt-contrib-uglify) vam bo omogočilo prevajanje datotek in datotek JavaScript Manjscss.

bower.json za reševanje mojih odvisnosti (bootstrap, font-awesome, …)

{
"ignoriraj"[
“**/.*”,
“node_modules”,
“bower_components”,
"test",
"testiranje"
],
"odvisnosti": {
"bootstrap": “3.3.*”
}
}

Tukaj je minimalna datoteka. V mojem primeru sem zahteval najnovejšo različico veje 3.3 Bootstrap prenesti. Privzeto, ko naredite a bower namestitev vaše odvisnosti bodo nameščene v mapi bower_components. Z uporabo .bowerrc lahko spremenite ciljno mapo. Več informacij najdete na spletni strani družbe Bower.

1 2	# Namestite odvisnosti z uporabo Bowerja $ bower namestitev

Gruntfile.js – Kjer se vse začne

Vsi ukazi in dejanja, ki jih želite dodati, to dejstvo v datoteki Gruntfile.js. Med drugim lahko sestavite datoteke lesscss et Sass, združevanje katere koli vrste datotek, prevajanje TypeScript, pomanjšati datoteke JavaScript, slike in datoteke HTML. Prav tako lahko spremenite velikost slik in kopirate datoteke (kot so pisave).

Danes vam bom samo pokazal, kako prevajati datoteke .manj in pomanjšajte datoteke . Js. Dejanja, ki jih izvajam vsak dan in ki mi danes omogočajo enostavno uporabo tega ali onega dela škorenj. Namesto da bi uporabili vse škorenj ko je vse kar potrebuješ glifikoni, bo morda zanimivo delati na knjižnici po meri.

modul.izvozi= funkcija (grunt) {
zahteva('load-grunt-tasks')(godrnjati);
grunt.initConfig({
manj: {
dist: {
Možnosti: {
stiskanje: Res,
yuicompress: Res,
optimizacija: 2
},
datoteke: {
“web/css/main.css”[
“bower_components/bootsrap/dist/css/bootstrap.css”,
“src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
pogrditi: {
Možnosti: {
klopi: false,
sourceMap: Res
},
dist: {
datoteke: {
'web/js/main.js'[
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt. registerTask('privzeto'["manj", "pogrniti"]);
};

Tukaj je popolnoma delujoča datoteka. Uporabljam ga tudi pri projektu z malo okvir ker je a API. Assetic je bilo v mojem primeru precej neuporabno. Zato sem raje naredil brez njega, da bi uporabil orodje, ki je zunaj strežnika, in v času uvajanja zagotovil popolno zgrajene vire.

Opišimo dejanja za Gruntfile.js

V prejšnji datoteki sem konfiguriral dva prispevka GruntJS (_manj _in pogrditi), ki sem ga namestil po zaslugi mojega paket.json. Opazili boste, da se vtičniki zlahka razlikujejo med seboj. Vzemimo primer podaljška manj.

Vsak prispevek grunt ki ga boste uporabili, morate navesti prek ključne besede, določene za prispevek. Primer, za grunt-contrib-less ključna beseda je manj. Pod tem delom lahko opredelimo Cilji. Pod izrazom ciljna razumeti poddel. V konkretnem primeru bi lahko opredelili a ciljna škorenj za prevajanje knjižnice z istim imenom iz vira manj. Lahko bi določili še en sklop dist za zbiranje izvornih kod našega projekta. Uporaba več podnaborov ni nujna, vendar jih boste imeli možnost uporabiti pozneje, ko boste uporabili prispevek ura da prihranite čas.

Nato je struktura podnaborov iste razširitve ISO. Pri Contrario se struktura vsakega prispevka razlikuje. Standardni prispevki so pogosto predstavljeni s številnimi primeri. Uradni vtičniki so na voljo v repozitoriju GitHub.

Vrnimo se k našemu primeru in konfiguraciji kompilacije naših datotek .manj. V igri datoteke dodamo ime končnih datotek kot ključ in kot vrednost matriko vhodnih datotek za prevajanje. Mislim, da ni treba podrobneje govoriti, ker je sintaksa precej intuitivna.

Prispevek pogrditi ki se uporablja za veriženje, pomanjševanje in stiskanje datotek JavaScript, uporablja isto strukturo. V tem primeru je povsem preprosto uporabiti njegova dva prispevka.

Umetnost sestavljanja

In zdaj kompilons naših virov. z Assetic, zaženemo ta ukaz:

1	php app/console assetic:dump

Zdaj smo odstranili AsseticBundle. Tega naročila nimamo več. Torej bomo zagnali naš vtičnik iz Node.

grunt

Vidite, da še vedno ni zelo zapleteno ... V tem primeru bodo naloge, ki bodo izvedene, tiste, ki so podane za profil privzeto. Definirano je bilo v zadnji vrstici.

1	grunt. registerTask('privzeto'["manj", "pogrniti"]);

Imeli bi zelo dobro definiran profil javascript ki ne bi izvršil pogrditi.

1	grunt. registerTask('javascript'['uglify']);

V primeru, da bi lahko zagnali ukaz grunt z imenom profila za.

1	grunt javascript

Določite lahko poljubno število profilov. V primeru mojega profila javascript, zanimanje je manjše, ker bi lahko opravili tudi naslednji klic.

1	godrnjati uglify

zaključek

Zdaj veste, kako sestaviti svoje vire. Če še niste dojeli vseh podrobnosti, bi morali hitro znati ceniti vso prilagodljivost, ki jo ponuja grunt s spoštovanjem doAssetic. Še več, poleg tipičnih virov, kot sta javascript in css, lahko obdelujete tudi pisave, slike ... Sredstvo, ki me je hitro osvojilo.

Prava prednost grunt je njegova prilagodljivost njena uporaba. grunt et Bowers med njimi uteleša alternativo Asseticu. brez Bowers še vedno lahko delate grunt vendar izkušnja ne bo popolna.

Upam, da vam bo ta članek omogočil enostavno razumevanje uporabe grunt. Pogumno, skoraj ste tam!