Gulp – skrypty

Gulp – skrypty

Gulp – skrypty to kontynuacja naszej przygody z Gulpem. Jeżeli trafiłeś od razu tutaj, proponuję przejrzenie poprzednich części, spis treści znajdziesz z prawej strony.

Jakie skrypty?

Ano właśnie, tutaj możemy mieć mały problem. Pisząc skrypty, mam na myśli JavaScript, ale jak to jest z dostępnością we współczesnych przeglądarkach? Ano, trochę tak, trochę tak. Pierwszy problem, to sama obecność JavaScript w przeglądarce. Bywa tak, że użytkownicy celowo wyłączają obsługę JavaScript i na to nic nie poradzimy. Możemy takich użytkowników zignorować, albo tworzyć kod, pozwalający na operacje brzydsze i wolniejsze, ale nadal działający. Twój wybór. Drugi problem, to poziom języka, który jest obsługiwany. JavaScript ma kilka wersji, rozwija się i nie zawsze możemy być pewni, że wszystko nam wszędzie zadziała. Dla ścisłości, możemy być pewni, że tak nie będzie. Ale… Gulp i phpStorm nam w tym pomogą. Wobec tego, wracajmy do naszej wtyczki „Hello World” i postarajmy się dodać trochę kodu.

Gulp - skrypty a raczej ich katalog źródłowy ze skryptami Stworzyłem katalog hello-world/source/javascript, jak na załączonym obrazku. Wstępnie zamieściłem w nim trzy pliki – initialize.js, ‚dom-operations.js oraz finalize.js. Jak wynika z ich nazw, chciałbym je połączyć właśnie w takiej kolejności. Przy czym, gdyby się pojawił czwarty plik - choćby clicking.js czy dialogs.js, w tej chwili nie ma to znaczenia, to ich kolejność już nie jest istotna. Najważniejsze to zacząć od initialize.js a zakończyć finalize.js. Dodatkowa informacja - kod Gulp, który przetworzy nasze skrypty, może wykonywać się równolegle do kodu przetwarzającego style.

Gulp - skrypty okiełznane

Tworzymy sobie zdanie, które przetworzy nasze skrypty:

Dodajemy wywołanie do zadania domyślnego:

Musimy dodać jeszcze definicję funkcji make_ugly (z pakietu uglify) i możemy uruchamiać. Dla jasności dołączę pełen kod:

Uruchamiamy zadanie domyślne i wszystko działa!

No ale nie oszukujmy się, długo to nie podziała.

Gulp - skrypty nie działające

Dlaczego długo nie podziała? No, pięknie nam to zebrało trzy pliki, stworzyło jeden, ale jest jedno ale. Ano takie, że te pliki (initialize.js, finalize.js oraz dom-operations.js) były po prostu puste. Nic tam się nie działo. Napiszmy więc trochę kodu:

Proste, prawda? No, to spróbujmy to sobie potraktować Gulpem...

Co to się porobiło... Od razu powiem o co chodzi. O let. Gdybyśmy zamiast let napisali var, wszystko by zadziałało. Problem jest tylko taki, że var uznane by było za błąd przez phpStorm. W zasadzie - dostalibyśmy ostrzeżenie i poradę:

Gulp - skrypty nie działają, phpStorm radzi let lub const w miejsce var

Moglibyśmy wyłączyć tę inspekcję i jej nie oglądać, ale nie na tym polega. PhpStorm radzi nam dobrze, więc pozostawiamy let i... I musimy sobie poradzić z uglify. Na szczęście jest rozwiązanie! Zaczniemy od dawno nie używanego pliku packages.json i dodamy dwie zależności - uglify-es oraz pump. Zależności uglify nie usuwamy! Teraz plik wygląda tak:

Musimy też dosyć mocno przerobić nasze zadanie, dodać deklaracje, zmienić jedną deklarację... Cały plik:

Teraz możemy sobie to włączyć i działa bez pudła! Ale podkreśla nam jQuery oraz noConflict`. Po prostu phpStorm nie wie, że chcemy dodać bibliotekę jQuery do naszego projektu. A praktycznie – chcemy wykorzystać tą, która jest serwowana przez WordPress. Ano, nic trudnego. Wchodzimy w ustawienia phpStorm, wybieramy Languages & Frameworks, następnie JavaScript, potem Libraries i zaznaczamy pozycję: @types/jquery. Już po wszystkim, działa. Dopiszemy sobie jeszcze dwa pozostałe pliki, które w zasadzie nic nie zrobią, ale pokażą nam jakąś tam strukturę i wypiszą w konsoli informację, że zostały załadowane:

Teraz możemy te trzy pliki skompilować, wszystko się uda. Plik wynikowy będzie wyglądał okropnie, ale po trochu o to chodzi. Ma działać, ma być krótki, czytelny być nie musi:

Gulp – skrypty i ich testowanie

Plik się skompilował, ale jak niby mamy sprawdzić jego działanie? Mając już naszą wiedzę możemy powoli udać się do właściwej, pierwszej części kursu pisania wtyczek i szablonów dla WordPress.