Zintegruj Grunt JS z Symfony i zastąp Assetic
wiedziałem GruntJS bez użycia go, ale musiałbym usłyszeć od programisty Symfony podaj mi masę, żebym zajrzał do tego rozwiązania. Po pierwsze wymień Assetyczny przez GruntJS było dla mnie rozwiązaniem, dzięki któremu moje projekty działały Symfony z HHVM. Teraz serwer PHP de Facebook doskonale współpracuje z Assetyczny ale znajduję coraz mniej powodów do dalszego używania Assetyczny. Wreszcie użycie Chrząknięcie, wtyczka oparta na Węzeł JS, motywuje większość programistów do używania Altana, kolejna wtyczka do zarządzania zależnościami. Porozmawiamy o Altana niżej. Rzućmy okiem na zalety i wady.
Uwaga ! Zanim rozpoczniesz migrację aplikacji, radzę sprawdzić wersję kodu i przeprowadzić kilka testów. Zdecydowanie zaleca się przeczytanie całego artykułu przed rozpoczęciem tej długoterminowej misji.
streszczenie
Wprowadzenie
Assetic, niezrozumiany przyjaciel
Ze swojej strony uważam to zaAssetyczny jest źle rozumiana i wykorzystywana. Wyjaśnię ci moje myśli. (Ponadto poprawiłem ten artykuł w wyniku nieporozumienia z mojej strony, dzięki Manuelowi Kleinowi za jego opinię).
Korzyść
Sposób użyciaAssetyczny pozwala anulować buforowanie zasobów, ponieważ nazwa generowanych zasobów JS i CSS zmienia się za każdym razem, gdy uruchamiasz polecenie „zasób: zrzut”. Pewna zaleta!
wady
- Assetic oferuje kilka opcji konfiguracji sposobu generowania zasobów.
- Konieczne jest zainstalowanie pakietów PHP do generowania egzotycznych zasobów, takich jak LESS. Kod PHP jest zainstalowany w sprzedawców podczas gdy to zadanie jest przydatne tylko dla klienta. Nie dla serwera. Dodatkowo zwiększa liczbę Twoich projektów.
- Kod PHP jest konieczne w Szablony Gałązka utilisant Assetyczny lub prawie wszystkie. Podczas gdy w przypadku Grunta skompilowany zasób będzie nazywany nazwą, którą mu nadałeś.
Naprawdę używaj Assetic w swoich szablonach
Często widzę w Szablony Gałązka na które się natknąłem, zasoby połączone czasami przez Assetyczny, czasami przez majątek de Symfonia.
1
2
3
4
5
|
# Korzystanie z Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Niewykorzystany zasób, używając zasobów
/bundles/namespacemy/css/main.css
|
W pierwszym przypadku, Assetyczny naprawdę dotyczy. w drugim przypadku Assetyczny jest całkowicie ukryty, aby nie używać majątek de Symfony. Sposób użycia majątek jest też moim zdaniem błędem, przynajmniej jeśli chodzi o dostęp do zasobów JS i CSS. Koniec nawiasu...
Grunt JS, bardzo elastyczny kompilator!
GruntJS oparte na node.js. Jest to narzędzie po stronie klienta, które wykorzystuje moduły do wykonywania wielu działań, takich jak konkatenacja plików, minifikacji, kompresja obrazu, kompilacja LESS, TypeScript… Inaczej Assetyczny, będziesz musiał skonfigurować pewne konfiguracje, ale bądź pewien, że ta początkowa inwestycja zwróci się znacznie szybciej niżAssetyczny.
Wprowadzenie do Bower, kompozytora zasobów
GruntJS jest dobry i należy go umieścić w tym samym segmencie coAssetyczny. Ale pod warunkiem, że używasz node.js, jak również używać Altana ! Jest to menedżer zależności. Mówiąc prościej, określasz zasoby, których potrzebujesz, „taka biblioteka w takiej wersji” i Altana dba o uzyskanie żądanej wersji. Oczywiście, tak jak composer.json dla PHP, możesz dodać zakresy wersji. Jeśli chcesz bibliotekę w wersji 3.3., *Altana otrzymasz najnowszą dostępną wersję. Rozwiązanie umożliwiające łatwą aktualizację tych zasobów. Powtarzający się problem w naszych standardowych projektach, ponieważ mamy (mialiśmy!) tendencję do pobierania wersji i nigdy później jej nie aktualizowania. Nie mieliśmy drobnych aktualizacji, które czasami są tak przydatne.
Technicznie, Altana używa pliku bower.json. Jego składnia jest bardzo prosta. Zachęcam do korzystania z niego, nawet jeśli możesz bez niego żyć. Plik będzie musiał być wersjonowany w przeciwieństwie do zasobów, które Altana przyjdzie pobrać dla Ciebie. Na początek podam przykład poniżej.
Wersjonowanie skompilowanych zasobów
Ze swojej strony nabrałem nawyku nie wersjonowania moich skompilowanych zasobów Assetyczny ale postanowiłem zrobić coś przeciwnego dla GruntJS. Ponieważ nie mam środków do zarządzania Altana (patrz Wprowadzenie do Altana), skompiluję moje zasoby i gittersy. W ten sposób mogę szybko wdrożyć moją aplikację. Nigdy nie otrzymałem opinii na temat tej praktyki, ale wydaje mi się ona godna szacunku, ponieważ dwie operacje są anulowane w momencie wdrażania (odzyskiwanie zasobów z Altana i skompilować z GruntJS), a także potrzebę posiadania node.js na jego maszynie.
Usuń Assetic z naszego projektu Symfony
Assetyczny został wybrany jako domyślny komponent odpowiedzialny za kompilację zasobów. Należy pamiętać, że mimo wszystko bardzo łatwo go usunąć.
Usuń bloki Gałązka Typ javascript et arkusz stylów. Nie są one konieczne. Odłóż na bok używane pliki. W przyszłości pliki, których chcesz użyć, zostaną zdefiniowane w pliku Gruntfile.js. Zobaczymy to trochę później.
1
2
3
4
5
6
7
8
|
#app/config/config.yml
# Usuń konfigurację z zasobu. Będzie też trochę w config_prod.yml, config_dev.yml i innych przesłanych plikach
atut:
odpluskwić: „%kernel.debug%”
użyj_kontrolera: fałszywy
wiązki: []
filtry:
cssrewrite: ~
|
1
2
3
4
5
|
#app/AppKernel.php
# Zatrzymaj ładowanie AsseticBundle, usuwając linię z AppKernel
...
nowa SymfonyBundleAsseticBundleAsseticBundle()
...
|
1
2
3
4
5
|
# kompozytor.json
# Usuń pakiet aktywów
...
„pakiet symfony/assetic”: „~2.3”
...
|
Proszę bardzo, dezaktywowałeś Assetyczny globalnie. W ten sposób nie spodziewaj się już znaleźć polecenia zasób: zrzut et atut: zegarek.
Jak Grunt JS sprawdzi się w naszym projekcie?
Będziemy musieli skonfigurować nasz projekt za pomocą trzech plików:
- pakiet.json co pozwoli nam zainstalować wtyczki node.js (GruntJS i jego wkład);
- altanka.json raportowanie zależności, które należy rozwiązać w celu skompilowania naszych zasobów;
- Gruntfile.js nad którym będziesz pracować najwięcej. Będzie zawierał wszystkie możliwe i/lub konieczne działania, aby skompilować część lub całość twojego projektu.
package.json, aby zainstalować Grunt JS
1
2
3
4
5
6
7
8
9
10
11
|
{
„zależności”{
"chrząknięcie": „^0.4.5”,
„Grunt-contrib-less”: „~0.11.0”,
“grunt-contrib-uglify”: „^0.6.0”,
„załaduj-grunt-zadania”: „^0.6.0”
},
„devZależności”{
"chrząknięcie": „^0.4.5”
}
}
|
Najpierw skorzystaj z tej zawartości. Wymaga instalacji GruntJS i wkłady, z których dwa (bez wkładu gruntowego et grunt-contrib-uglify) pozwoli ci skompilować pliki i pliki JavaScript Mniej.
bower.json, aby rozwiązać moje zależności (bootstrap, font-awesome, …)
1
2
3
4
5
6
7
8
9
10
11
12
|
{
"ignorować": [
„**/.*”,
„moduły_węzłów”,
„komponenty_altanki”,
"próba",
„testowanie”
],
„zależności”{
„bootstrap”: „3.3.*”
}
}
|
Oto minimalny plik. W moim przypadku poprosiłem o najnowszą wersję gałęzi 3.3 Bootstrap zostać pobrany. Domyślnie, kiedy robisz a instalacja altany twoje zależności zostaną zainstalowane w folderze altana_komponenty. Poprzez użycie .bowerrc możesz zmienić folder docelowy. Więcej informacji można znaleźć na stronie internetowej firmy Bower.
1
2
|
# Zainstaluj zależności za pomocą Bower
$ instalacja altany
|
Gruntfile.js – gdzie wszystko się zaczyna
Wszystkie polecenia i akcje, które chciałbyś dodać do pliku Gruntfile.js. Między innymi możesz kompilować pliki mniejss et sass, łączyć dowolne pliki, kompilować TYPESCRIPT, minifikator Pliki JavaScript, obrazy oraz pliki HTML. Możesz także zmieniać rozmiar obrazów i kopiować pliki (takie jak czcionki).
Dzisiaj pokażę ci, jak kompilować pliki .mniej i minifikuj pliki . Js. Czynności, które wykonuję na co dzień i które pozwalają mi dziś swobodnie korzystać z tej czy innej części bootstrap. Zamiast używać wszystkich bootstrap kiedy wszystko, czego potrzebujesz, to glifikony, praca nad niestandardową biblioteką może być interesująca.
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
|
moduł.eksport= funkcjonować (chrząknięcie) {
wymagać(„załaduj-grunt-zadania”)(chrząknięcie);
grunt.initConfig({
mniej{
dist{
Opcje{
kompresować: prawdziwy,
yuikompresuj: prawdziwy,
optymalizacja: 2
},
pliki{
„web/css/main.css”: [
„bower_components/bootsrap/dist/css/bootstrap.css”,
„src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
zeszpecić{
Opcje{
magiel: fałszywy,
źródłoMapa: prawdziwy
},
dist{
pliki{
„web/js/main.js”: [
'źródło/przestrzeń nazw/mój pakiet/zasoby/public/js/main.js',
]
}
}
}
});
chrząknięcie. registerTask('domyślny'["mniej", "zeszpecić"]);
};
|
Oto doskonale działający plik. Używam go również w projekcie z niewielką ilością rama ponieważ to jest API. Assetyczny był w moim przypadku zupełnie bezużyteczny. Wolałem więc obejść się bez niego, aby użyć narzędzia zewnętrznego w stosunku do serwera i dostarczyć doskonale skonstruowane zasoby w momencie wdrożenia.
Opiszmy działania dla Gruntfile.js
W poprzednim pliku konfiguruję dwa wkłady GruntJS (_mniej _i zeszpecić), który zainstalowałem dzięki mojemu pakiet.json. Zauważysz, że wtyczki można łatwo odróżnić od siebie. Weź sprawę rozszerzenia mniej.
Każdy wkład Chrząknięcie którego zamierzasz używać, należy zadeklarować za pomocą słowa kluczowego zdefiniowanego dla wkładu. Przykład dla bez wkładu gruntowego kluczowe słowo to mniej. W ramach tej części możemy zdefiniować cele. Pod terminem cel Rozumiesz Podczęść. W konkretnym przypadku moglibyśmy zdefiniować a cel bootstrap skompilować bibliotekę o tej samej nazwie ze źródła mniej. Moglibyśmy zdefiniować inny zestaw dist skompilować źródła naszego projektu. Korzystanie z kilku podzbiorów nie jest koniecznością, ale będziesz miał możliwość ich wykorzystania później, gdy użyjesz programu zegarek wkładu oszczędzać czas.
Wtedy struktura podzbiorów tego samego rozszerzenia to ISO. W Contrario struktura każdego wkładu jest inna. Standardowe wkłady są często przedstawiane z wieloma przykładami. Oficjalne wtyczki są dostępne w repozytorium GitHub.
Wróćmy do naszego przykładu i konfiguracji kompilacji naszych plików .mniej. W grze pliki dodajemy nazwę plików końcowych jako klucz, a jako wartość tablicę plików wejściowych do skompilowania. Myślę, że nie ma potrzeby opisywania szczegółów, ponieważ składnia jest dość intuicyjna.
Wkład zeszpecić używany do konkatenacji, minifikacji i kompresji plików JavaScript, wykorzystuje tę samą strukturę. W tym przypadku użycie dwóch wkładów jest dość proste.
Sztuka kompilacji
A teraz kompilon nasze źródła. Z Assetyczny, uruchamiamy to polecenie:
1
|
php aplikacja/konsola zasób: zrzut
|
Teraz usunęliśmy Pakiet zasobów. Nie mamy już tego zamówienia. Uruchomimy więc naszą wtyczkę z Node.
1
|
chrząknięcie
|
Widzisz, to nadal nie jest bardzo skomplikowane... W tym przypadku zadania, które zostaną wykonane, będą zadaniami podanymi dla profilu domyślna. Zostało to określone w ostatniej linii.
1
|
chrząknięcie. registerTask('domyślny'["mniej", "zeszpecić"]);
|
Miałbyś bardzo dobrze zdefiniowany profil javascript kto by nie wykonał egzekucji zeszpecić.
1
|
chrząknięcie. registerTask(„javascript”['zeszpecić']);
|
Na wypadek gdybyś mógł uruchomić polecenie Chrząknięcie z nazwą profilu po.
1
|
pomruk javascript
|
Możesz zdefiniować dowolną liczbę profili. W przypadku mojego profilu javascript, odsetki są mniejsze, ponieważ mogłeś również wykonać następujące połączenie.
1
|
chrząknąć obrzydzić
|
Wnioski
Teraz wiesz, jak skompilować swoje zasoby. Jeśli nie uchwyciłeś wszystkich subtelności, powinieneś szybko docenić całą elastyczność oferowaną przez Chrząknięcie z szacunkiem doAssetyczny. Co więcej, oprócz standardowych zasobów, takich jak javascript i css, możesz także przetwarzać czcionki, obrazy… Atut, który szybko mnie przekonał.
Prawdziwa zaleta Chrząknięcie jest jego elastyczność jego wykorzystanie. Chrząknięcie et Altana między nimi stanowi alternatywę dla Assetic. Bez Altana nadal możesz pracować Chrząknięcie ale doświadczenie nie będzie całkowite.
Mam nadzieję, że ten artykuł pozwoli ci łatwo zrozumieć użycie Chrząknięcie. Bądź odważny, już prawie jesteś!