Zawartość
Programy uruchamiające zadania JavaScript, takie jak Grunt, stały się niezwykle popularne wśród programistów front-end. Dzieje się tak, ponieważ pomagają one robić jedną rzecz, którą wszyscy chcemy robić w naszej pracy - oszczędzać czas!
Jednak obecnie dostępnych jest ponad 5000 (i wciąż rośnie) wtyczek Grunt, więc deweloperom może być trudno znaleźć te „nieoszlifowane diamenty”. Spojrzeliśmy wstecz na czasy, w których tkwiliśmy w Grunt, aby znaleźć idealny przepis na wtyczki Grunt, których powinieneś używać.
01. Uglify
Każdy programista front-end, który jest warty swojej soli, wie o zaletach zmniejszania plików JavaScript i właśnie to robi ta wtyczka. Taka jest jego popularność, tak naprawdę jest uwzględniona w przewodniku dla początkujących Grunta. Pomimo nazwy ta wtyczka może być również używana do upiększania kodu JavaScript - chociaż nie jest to szczególnie przydatne do użytku produkcyjnego.
02. Sass
Może toczyć się debata na temat tego, który preprocesor CSS naprawdę rządzi grzędą, ale tutaj, w Stickyeyes, zdecydowaliśmy się na Sass, a nie na jego głównego rywala, Lessa. Ta wtyczka umożliwia nam zapisywanie naszych plików Sass i automatyczną kompilację ich do CSS. Zalety korzystania z preprocesora CSS gwarantują osobny artykuł sam w sobie, ale można śmiało powiedzieć, że jeśli już go nie używasz, jesteś bardzo spóźniony na imprezę!
03. CSSMin
Ta wtyczka jest odpowiednikiem CSS Uglify. Po prostu pobiera określone pliki CSS i minimalizuje je. Oczywiście, jeśli zamierzasz używać tego w połączeniu z wtyczką Sass, musisz upewnić się, że to zadanie zostanie uruchomione po zadaniu Sass.
Istnieje wiele alternatyw dla CSSMin, które mogą również zmniejszyć rozmiar plików CSS przy użyciu nieco innych technik; CSS nano, CSS wring, CSS shrink, itp. Przeczytaj ten przydatny test porównawczy, jeśli interesujesz się tego typu rzeczami.
04. Concat
Jak sama nazwa wskazuje, ta wtyczka po prostu pobiera wiele plików i łączy je w jeden. Podobnie jak w przypadku zmniejszania kodu, łączenie plików jest również odwieczną sprawdzoną metodą zmniejszania czasu ładowania strony.
Łączenie plików powinno być zawsze używane w środowisku produkcyjnym zarówno dla JavaScript, jak i CSS. Jest to zwykle ostatnie zadanie do uruchomienia - po zadaniu wstępnego przetwarzania CSS i zadaniu minifikacji. Łatwo jest po prostu powiedzieć tej wtyczce, aby połączyła wszystkie pliki w określonym katalogu, ale uważaj na kolejność łączenia plików - być może będziesz musiał podać określoną kolejność lub nazwać pliki, aby były zawsze łączone w żądanej kolejności .
05. ImageMin
Podobnie jak CSSMin i Uglify, ImageMin rozwiązuje inny odwieczny problem z ładowaniem strony - rozmiar pliku obrazu. „Minifikacja” obrazu jest zwykle pierwszym punktem wywołania w celu optymalizacji, więc ta wtyczka jest niezbędna do maksymalnego zmniejszenia całkowitego rozmiaru pliku strony.
Jeśli pracujesz z JPG, PNG, GIF lub SVG (coraz popularniejszy format grafiki wektorowej), ta wtyczka zapewni bezstratną redukcję rozmiaru plików bez kiwnięcia palcem. Jeśli masz dużo obrazów w swoim projekcie, dobrym pomysłem jest uruchamianie tego zadania tylko podczas wypychania do produkcji, zamiast uruchamiania tego zadania na zdarzeniu obserwacyjnym (patrz następny punkt).
06. Obserwuj
Ta wtyczka w rzeczywistości nie wpływa na front-end Twojej witryny, ale jest niezwykle przydatna w tworzeniu wydajnego procesu Grunt. Watch po prostu śledzi wszystkie wskazane przez Ciebie katalogi, a gdy coś się zmieni, automatycznie uruchomi określone zadania Grunt.
Możesz więc ustawić jeden warunek obserwacyjny w katalogu „js”, aby uruchamiać zadania JavaScript, a drugi w katalogu „css”, aby uruchamiać zadania CSS. Oznacza to, że nigdy nie będziesz musiał ręcznie uruchamiać głównego procesu Grunt! Po prostu zainicjuj główne zadanie zegarka, zanim zaczniesz wprowadzać zmiany, i zapomnij, że nawet tam jest.
Słowa: Jamie Shields
Jamie Shields jest programistą back-end w agencji marketingu cyfrowego Stickyeyes.
Lubię to? Przeczytaj to!
- Grunt vs Gulp: Które narzędzie do budowania JavaScript wybrać?
- 8 sposobów na ulepszenie konfiguracji Grunt
- Najlepsze darmowe motywy WordPress
