Integrálja a Grunt JS-t a Symfony-ba, és cserélje le az Assetic-et
Webügynökség » Digitális hírek » Integrálja a Grunt JS-t a Symfony-ba, és cserélje le az Assetic-et

Integrálja a Grunt JS-t a Symfony-ba, és cserélje le az Assetic-et

Nicolas-g-2GöndörNicholas G. közzétett

tudtam GruntJS anélkül, hogy valaha is használtam volna, de hallanom kellett volna egy fejlesztőtől symfony add meg a masszát, hogy utánanézzek ennek a megoldásnak. Először cserélje ki Aszetikus még GruntJS megoldás volt számomra a projektjeim működésére symfony -val HHVM. Most a szerver PHP de Facebook tökéletesen működik vele Aszetikus de egyre kevesebb okot találok a használat folytatására Aszetikus. Végül a használata röfögés, egy plugin alapján Csomópont JS, a legtöbb fejlesztőt a használatára készteti Lugas, egy másik bővítmény a függőségek kezelésére. beszélni fogunk Lugas Alsó. Vessünk egy pillantást az előnyökre és hátrányokra.

Figyelem ! Mielőtt elkezdené az alkalmazás áttelepítését, azt tanácsolom, hogy állítsa át a kódot, és végezzen néhány tesztet. Erősen ajánlott a teljes cikk elolvasása, mielőtt belevágna ebbe a hosszú távú küldetésbe.

Bevezetés

Assetic, a meg nem értett barát

A magam részéről úgy gondolomAszetikus félreértik és rosszul használják fel. Elmagyarázom neked a gondolataimat. (Ráadásul egy félreértés miatt javítottam ezt a cikket, köszönöm Manuel Kleinnek a visszajelzést).

haszon

A ... hasznaAszetikus lehetővé teszi az erőforrások gyorsítótárának törlését, mivel a generált JS- és CSS-erőforrások neve minden alkalommal megváltozik, amikor elindítja a „assetic:dump”. Egy bizonyos előny!

hátrányok
  • Az Assetic kevés lehetőséget kínál az erőforrások előállítási módjának konfigurálására.
  • Az egzotikus erőforrások, például a LESS létrehozásához PHP-csomagokat kell telepíteni. A PHP kód telepítve van a gyártók míg ez a feladat csak az ügyfél számára hasznos. Nem a szervernek. Ezenkívül növeli a projektek számát.
  • Kód PHP szükséges a sablonok Gally utilisant Aszetikus vagy majdnem mindegyik. Míg a Grunt esetében a lefordított erőforrást az Ön által megadott néven fogják hívni.

Valóban használja az Assetic-et a sablonokban

Gyakran látom a sablonok Gally amelyekkel találkozom, a források, amelyeket néha linkelnek Aszetikus, néha a eszközök de Szimfónia.

1
2
3
4
5
# Az Assetic használata
@NamespaceMyBundle/Resources/public/css/main.css
# Unused Assetic, Assets használatával
/bundles/namespacemy/css/main.css

Az első esetben Aszetikus valóban érvényes. A második esetben Aszetikus teljesen el van rejtve, hogy ne használja a eszközök de symfony. A ... haszna eszközök véleményem szerint szintén hiba, legalábbis a JS és CSS erőforrásokhoz való hozzáférést illetően. Zárójel vége...

Grunt JS a Sooo rugalmas fordító!

GruntJS alapján node.js. Ez egy kliensoldali eszköz, amely modulokat használ számos művelet végrehajtására, például fájlösszefűzésre, zsugorítás, képtömörítés, LESS összeállítása, TypeScript… Unlike Aszetikus, be kell állítania bizonyos konfigurációkat, de biztos lehet benne, hogy ez a kezdeti befektetés megtérül, és végül sokkal gyorsabban, mintAszetikus.

Bower, az erőforrások composer.json fájljának bemutatása

GruntJS jó, és ugyanabba a szegmensbe kerül, mintAszetikus. De amíg használod node.js, valamint használja Lugas ! Ez egy függőségi menedzser. Leegyszerűsítve: meghatározza a szükséges erőforrásokat, "ilyen könyvtárat ilyen verzióban" és Lugas gondoskodik a kívánt verzió beszerzéséről. Persze csak úgy zeneszerző.json mert PHP, verziótartományokat adhat hozzá. Ha 3.3-as verziójú könyvtárat szeretne., *Lugas elérhetővé teszi a legújabb verziót. Megoldás ezen erőforrások egyszerű frissítéséhez. Rendszeres projektjeinknél visszatérő probléma, mert hajlamosak vagyunk (volt!) letölteni egy verziót, és utána soha nem frissítjük. Nem voltak olyan apróbb frissítéseink, amelyek néha annyira hasznosak.

Technikailag, Lugas a bower.json fájlt használja. A szintaxisa nagyon egyszerű. Arra buzdítalak, hogy akkor is használd, ha tudsz nélküle folytatni. A fájlt az erőforrásokkal ellentétben verziószámmal kell ellátni Lugas letölti az Ön számára. A kezdéshez az alábbiakban mutatok egy példát.

Az összeállított erőforrások verziószáma

A magam részéről megszoktam, hogy nem verziózom az összeállított forrásaimat Aszetikus de úgy döntöttem, hogy az ellenkezőjét teszem GruntJS. Mivel nem tudok erőforrás nélkül kezelni Lugas (lásd a Bevezetést Lugas), összeállítom az erőforrásaimat és gitterek. Ily módon gyorsan üzembe helyezhetem az alkalmazásomat. Soha nem kaptam visszajelzést erről a gyakorlatról, de tiszteletreméltónak tűnik számomra, mert két műveletet törölnek a telepítéskor (erőforrások helyreállítása Lugas és állítsd össze azzal GruntJS), valamint annak szükségessége node.js a gépén.

Távolítsa el az Asseticet a Symfony projektünkből

Aszetikus az erőforrások összeállításáért felelős alapértelmezett összetevőként lett kiválasztva. Legyen tudatában annak, hogy mindennek ellenére nagyon könnyen eltávolítható.

Blokkok törlése Gally Típusú javascript et stylesheet. Nem szükségesek. Tartsa félre a használt fájlokat. A jövőben a használni kívánt fájlok a fájlban lesznek meghatározva Gruntfile.js. Ezt egy kicsit később meglátjuk.

1
2
3
4
5
6
7
8
#app/config/config.yml
# Konfiguráció eltávolítása az assetic-ből. A config_prod.yml, config_dev.yml és más feltöltött fájlokban is lesz néhány
aszetikus:
hibakeresés: "%kernel.debug%"
use_controller: hamis
kötegek: []
szűrők:
cssrewrite: ~
1
2
3
4
5
#app/AppKernel.php
# Állítsa le az AsseticBundle betöltését a sor törlésével az AppKernelből
...
új SymfonyBundleAsseticBundleAsseticBundle()
...
1
2
3
4
5
# composer.json
# Távolítsa el az elemi köteget
...
„symfony/assetic-bundle”: „~2.3”
...

Tessék, deaktiváltad Aszetikus globálisan. Ily módon többé ne várja el, hogy megtalálja a parancsot assetic:dump et assetic:watch.

Hogyan fog működni a Grunt JS projektünkön belül?

A projektünket három fájllal kell konfigurálnunk:

  • csomag.json amely lehetővé teszi a bővítmények telepítését node.js (GruntJS és hozzájárulásai);
  • bower.json forrásaink összeállítása érdekében feloldandó függőségek bejelentésére;
  • Gruntfile.js amelyen a legtöbbet fog dolgozni. Tartalmazza az összes lehetséges és/vagy végrehajtandó műveletet a projekt egy részének vagy egészének összeállításához.

package.json fájlt a Grunt JS telepítéséhez

1
2
3
4
5
6
7
8
9
10
11
{
"függőségek"{
"röfög": "^0.4.5",
„grunt-contrib-less”: "~0.11.0",
„grunt-contrib-uglify”: "^0.6.0",
„betöltés-grunt-feladatok”: "^0.6.0"
},
„Dependenciák”{
"röfög": "^0.4.5"
}
}

Először is használja ezt a tartalmat. Telepítését igényli GruntJS és hozzájárulások, amelyek közül kettő (morgás-közreműködik-kevésbé et morog-közreműködik-csúfít) lehetővé teszi a JavaScript-fájlok és -fájlok fordítását Lesscss.

bower.json, hogy megoldja a függőségeimet (bootstrap, font-awesome,…)

1
2
3
4
5
6
7
8
9
10
11
12
{
"figyelmen kívül hagyni": [
„**/.*”,
"node_modules",
„bower_components”,
"teszt",
"tesztelés"
],
"függőségek"{
"bootstrap": „3.3.*”
}
}

Itt van egy minimális fájl. Az én esetemben azt kértem, hogy a 3.3-as ág legújabb verzióját Bootstrap letölthető. Alapértelmezés szerint, amikor a lugas beszerelés a függőségei a mappába lesznek telepítve bower_components. Használata révén .bowerrc módosíthatja a célmappát. További információkat a Bower honlapján találhat.

1
2
# Függőségek telepítése a Bower segítségével
$ bower telepítés

Gruntfile.js – Ahol minden kezdődik

Az összes parancs és művelet, amelyet hozzá szeretne adni a fájlhoz Gruntfile.js. Többek között fájlokat is fordíthat lesscss et sass, összefűzni bármilyen fájlt, lefordítani Gépelt, kicsinyíteni JavaScript-fájlok, képek, valamint HTML-fájlok. Átméretezheti a képeket és másolhat fájlokat (például betűtípusokat).

Ma csak azt mutatom meg, hogyan kell összeállítani a fájlokat .Kevésbé és kicsinyítse a fájlokat . Js. Olyan tevékenységek, amelyeket minden nap végzek, és amelyek lehetővé teszik, hogy ma könnyen használhassam ezt vagy azt a részét bootstrap. Ahelyett, hogy az összeset használnád bootstrap amikor csak az kell glifikonok, érdekes lehet egyéni könyvtáron dolgozni.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
modul.exports= funkció (röfögés) {
szükség('load-grunt-tasks')(röfög);
grunt.initConfig({
kevesebb{
ker{
lehetőségek{
borogatás: igaz,
yuicompress: igaz,
optimalizálás: 2
},
fájlok{
"web/css/main.css": [
„bower_components/bootsrap/dist/css/bootstrap.css”,
„src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
elcsúfít{
lehetőségek{
mángorló: hamis,
forrástérkép: igaz
},
ker{
fájlok{
"web/js/main.js": [
"src/Namespace/MyBundle/Resources/public/js/main.js",
]
}
}
}
});
grunt. registerTask('alapértelmezett', ["Kevésbé", "elcsúfít"]);
};

Itt van egy tökéletesen működő fájl. Projektben is használom kevéssel keret mert ez a API. Aszetikus esetemben teljesen haszontalan volt. Ezért inkább ezt nélkülöztem, és a szerveren kívüli eszközt használtam, és a telepítéskor a tökéletesen felépített erőforrásokat szállítottam.

Ismertesse a Gruntfile.js műveleteit

Az előző fájlban a két hozzájárulást konfigurálom GruntJS (_kevesebb _és elcsúfít), amelyet a sajátomnak köszönhetően telepítettem csomag.json. Észre fogja venni, hogy a bővítmények könnyen megkülönböztethetők egymástól. Vegyük a kiterjesztés esetét kevesebb.

Minden hozzájárulás röfögés amelyet használni fog, a hozzájáruláshoz meghatározott kulcsszóval kell deklarálnia. Példa, azért morgás-közreműködik-kevésbé a kulcsszó az kevesebb. Ebben a részben tudjuk meghatározni célok. A kifejezés alatt cél megért alrész. Konkrét esetben definiálhatnánk a cél bootstrap hogy az azonos nevű könyvtárat forrásból állítsuk össze kevesebb. Meghatározhatnánk egy másik halmazt is ker projektünk forrásainak összeállításához. Több részhalmaz használata nem szükségszerű, de később lehetősége lesz használni őket, amikor a hozzájárulás nézni időt spórolni.

Ekkor az azonos kiterjesztésű részhalmazok szerkezete ISO. A Contrarionál az egyes hozzájárulások szerkezete eltérő. A standard hozzájárulásokat gyakran sok példával mutatják be. A hivatalos bővítmények elérhetők a GitHub tárhelyen.

Térjünk vissza példánkhoz és a fájljaink összeállításának konfigurációjához .Kevésbé. A játékban fájlok kulcsként hozzáadjuk a végső fájlok nevét, értékként pedig a lefordítandó bemeneti fájlok tömbjét. Szerintem nem szükséges többet részletezni, mert a szintaxis meglehetősen intuitív.

A hozzájárulás elcsúfít JavaScript fájlok összefűzésére, kicsinyítésére és tömörítésére használják, ugyanazt a struktúrát használja. Ebben az esetben meglehetősen egyszerű használni a két hozzájárulást.

Az összeállítás művészete

És most kompilons forrásaink. Val vel Aszetikus, ezt a parancsot futtatjuk:

1
php alkalmazás/konzol assetic:dump

Most eltávolítottuk AsseticBundle. Nálunk már nincs ilyen sorrend. Tehát innen fogjuk futtatni a bővítményünket Csomópont.

1
röfögés

Látod, ez még mindig nem túl bonyolult... Ebben az esetben a végrehajtandó feladatok a profilnál megadottak lesznek alapértelmezett. Az utolsó sorban volt meghatározva.

1
grunt. registerTask('alapértelmezett', ["Kevésbé", "elcsúfít"]);

Nagyon jól definiált volna egy profilt javascript aki nem végezte volna ki elcsúfít.

1
grunt. registerTask('javascript', ['elcsúfít']);

Ha futtathatta volna a parancsot röfögés utáni profilnévvel.

1
morg javascript

Annyi profilt definiálhat, amennyit csak akar. A profilom esetében javascript, az érdeklődés kisebb, mert a következő hívást is kezdeményezhetted volna.

1
morg csúfít

Következtetés

Most már tudja, hogyan kell összeállítani az erőforrásokat. Ha még nem fogta fel az összes finomságot, akkor gyorsan képesnek kell lennie arra, hogy értékelje az általa kínált rugalmasságot. röfögés vonatkozóanAszetikus. Sőt, az olyan tipikus erőforrásokon kívül, mint a javascript és a css, fontokat, képeket is feldolgozhat... Ez az eszköz, ami gyorsan megnyerte a tetszésemet.

Az igazi előnye röfögés a rugalmassága a használata. röfögés et Lugas közöttük az Assetic alternatíváját testesíti meg. Nélkül Lugas még dolgozhatsz vele röfögés de az élmény nem lesz teljes.

Remélem, ez a cikk lehetővé teszi, hogy könnyen megértse a használatát röfögés. Légy bátor, mindjárt ott vagy!

★ ★ ★ ★ ★

Nicolas-g-2
Nicholas G.

Nicolas a webügynökség társmenedzsere Tremplin Numérique, valamint szakértő a SEO természetes hivatkozások és az e-reputáció területén.