Zintegruj Grunt JS z Symfony i zastąp Assetic
Agencja internetowa » Wiadomości cyfrowe » Zintegruj Grunt JS z Symfony i zastąp Assetic

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ń Asetyczny 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 Asetyczny ale znajduję coraz mniej powodów do dalszego używania Asetyczny. 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.

Wprowadzenie

Assetic, niezrozumiany przyjaciel

Ze swojej strony uważam to zaAsetyczny 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życiaAsetyczny 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 Asetyczny 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 Asetyczny, 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, Asetyczny naprawdę dotyczy. w drugim przypadku Asetyczny 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 Asetyczny, będziesz musiał skonfigurować pewne konfiguracje, ale bądź pewien, że ta początkowa inwestycja zwróci się znacznie szybciej niżAsetyczny.

Wprowadzenie do Bower, kompozytora zasobów

GruntJS jest dobry i należy go umieścić w tym samym segmencie coAsetyczny. 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 Asetyczny 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

Asetyczny 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
...
Nowy SymfonyBundleAsseticBundleAsseticBundle()
...
1
2
3
4
5
# kompozytor.json
# Usuń pakiet aktywów
...
„pakiet symfony/assetic”: „~2.3”
...

Proszę bardzo, dezaktywowałeś Asetyczny 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 Lesscss.

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ć Maszynopis, 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 glify, 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,
yuicompress: 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. Asetyczny 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 Asetyczny, 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 Węzeł.

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 doAsetyczny. 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ś!

★ ★ ★ ★ ★