[#1] Gulp'owanie z Furu - nauka języka

[FuruArt]

Przyszła pora na kolejną lekcję Gulp'owania z Furu! Dzisiaj będzie już stricte praktycznie, pojawi się dużo kodu oraz sporo tłumaczeń co się dzieje w danej sekcji, z racji iż wiem że nie każdy ma pojęcie jak się tworzy strony WWW, postaram się to dzisiaj wszystko dokładnie wyjaśnić by zachęcić każdego do podjęcia się stworzenia swojej części siebie w internecie!




Jeśli zrobiliśmy wszystko tak jak w poprzedniej lekcji, to z powodzeniem możemy przystąpić do dalszej pracy, w której skupimy się na wprowadzeniu do Gulp'a języka kodowania Jade oraz języka ostylowania Sass.. Dobrze, więc zacznijmy od dodania kilku plików do naszego folderu z Gulp'em:


[img]https://grafinity.pl/uploads/monthly_2016_05/screen-gulp-7.PNG.0a9ae7368625b02f653d57df27caf216.PNG[/img]

Tworzymy w folderze jade, plik z rozszerzeniem .jade, a w folderze sass plik z rozszerzeniem, tutaj jak komu wygodniej ja wybrałem .scss, lecz może być .sass, różnice zostały przedstawione w wyżej podlinkowanym wpisie. Dobrze, wypadałoby teraz nauczyć Gulp'a rozumienia kodu Jade oraz Sass, w tym celu otwieramy konsolę w naszym folderze (SHIFT + Prawy przycisk myszy -> Otwórz okno polecenia tutaj) i wpisujemy:


[code] npm install gulp-jade --save-dev -g[/code]

Parametry znajdujące się przy poleceniu omawiałem w [#0] lekcji z Gulp'em, gdy wszystko wykonaliśmy poprawnie, przystępujemy do wprowadzenia drugiego języka, wpisujemy:


[code] npm install gulp-sass --save-dev[/code]

A teraz, jak sprawdzić czy nasze biblioteki zainstalowały się na pewno poprawnie? Wchodzimy w nasz tajemniczy plik 'package.json' i naszym oczom powinno się ukazać takie coś:


[img]https://grafinity.pl/uploads/monthly_2016_05/screen-gulp-8.PNG.61cc50e035dcbba66d8f7d36d6082c0a.PNG[/img]

Jak widać, nasz początkowo pusty plik, który zawierał wyłącznie nawiasy klamrowe, zawiera teraz nazwy poszczególnych bibliotek jakie instalowaliśmy przy pomocy polecenia npm install wraz z ich wersjami, no dobrze, tylko po co? Mniej więcej po to, aby wiedzieć że pracujemy na pewno na najnowszej wersji danej biblioteki i dla upewnienia, czy faktycznie została prawidłowo dodana do 'node_modules', jakim cudem pakiety które instalowaliśmy zagnieździły się w tym pliku? Tutaj swoją rolę odgrywa parametr --save-dev, czy zapis dla programisty, tłumacząc łopatologicznie. Właśnie do tego służy niepozorny plik 'package.json'. Jeśli wszystko zrobiliście poprawnie, powinno to wyglądać tak jak u mnie, teraz zajmiemy się nauką Gulp'a, aby zrozumiał co my do niego wklepujemy. Otwieramy nasz plik 'gulpfile.js' (którego znaczenie tłumaczyłem również w [#0] lekcji) i robimy takie czary mary:


[img]https://grafinity.pl/uploads/monthly_2016_05/screen-gulp-9.PNG.cc878ddcf79c682352f59a8a81412ec9.PNG[/img][code] var jade = require('gulp-jade'); gulp.task('jade', function() { });[/code]



Do poprzedniego kodu dodajemy nową zmienną, importującą bibliotekę Jade oraz tworzymy nowe polecenie dla Gulp'a o nazwie 'jade', dodatkowo dodałem komentarze dla lepszego rozeznania w kodzie (komentarze czyli tekst który nie jest wyświetlany na stronie ani nie jest rozpoznawany przez program jako kod do wykonania, można nim oddzielać dane sekcje kodu i opisywać co robią). Teraz sprawimy, żeby nasze polecenie 'jade', potrafiło odnaleźć, rozpoznać i skompilować język 'jade' na zwykły 'html' (kompilowanie czyli proces przetwarzania kodu pisanego w danym języku na kod zrozumiały dla komputera, w tym przypadku przeglądarki), więc do dzieła:


[img]https://grafinity.pl/uploads/monthly_2016_05/screen-gulp-10.PNG.510c3c82521740a57f0e1fb828f4090d.PNG[/img][code] gulp.task('jade', function() {     gulp.src('./jade/**/*.jade')         .pipe(jade({              pretty: true         {))         .pipe(gulp.dest('./'))  }); gulp.task('default', ['connect', 'jade']);[/code]

A teraz cóż ja tutaj uczynił? Pierw rozszerzyłem polecenie 'jade', dodając funkcję która zawiera polecenie gulp.src, którego zadaniem jest wyszukanie plików w języku 'jade', precyzyjniej, gulp.src służy do wyszukiwania miejsca źródłowego skąd pochodzi plik który ma zostać skompilowany, tak jak u mnie gulp ma rozglądać się za plikami 'jade' znajdującymi się w folderze jade, a co oznaczają te wszystkie gwiazdki? Gwiazdki podwójne, mówią Gulp'owi że powinien szukać plików z rozszerzeniem jade w każdym podfolderze zawartym w folderze 'jade', ponieważ w którymkolwiek z podfolderów może pojawiać się dowolnie nazwany (tutaj pojedyncza gwiazdka plik) plik w języku jade, następnie Gulp, 'wpycha' znalezione pliki do rury (.pipe, gulp posługuje się rurami), gdzie wewnętrzne polecenie biblioteki jade, zawiera opcję 'pretty: true', dzięki czemu nie muszę martwić się o to czy podczas pisania kodu nie wstawiłem za dużo spacji, tabulatorów czy enterów ponieważ opcja pretty uporządkuje mój kod automatycznie, zaoszczędzając tym samym cenny czas. Następnie, gdy Gulp zakończy wpychanie do rury ma za zadanie czekać, aż zawartość rury wyleci i jego zadaniem jest otrzymany produkt wrzucić do katalogu, w którym powinien znaleźć się plik docelowy ( .pipe(gulp.dest('./')), gdzie ('./') oznacza katalog główny czyli nasz folder). Lecz, aby finalnie Gulp zrozumiał, że nauczył się właśnie Jade'a, musimy jeszcze nakazać mu domyślnie ładowanie polecenia 'jade', co robimy dopisując w gulp.task('default'), nazwę 'jade'. W ten oto sposób powinniśmy otrzymać wpisując polecenie gulp:


[img]https://grafinity.pl/uploads/monthly_2016_05/screen-gulp-11.PNG.0f6a4e8d1597f39568b34502670b04c9.PNG[/img]

Co świadczy o tym, że Gulp zaczął rozumieć Jade! Teraz przyszła pora na nieodłącznego kompana Jade, czyli Sass, ponownie wchodzimy w nasz plik 'gulpfile.js':


[img]https://grafinity.pl/uploads/monthly_2016_05/screen-gulp-12.PNG.8483804e8a8f8f8cc3fa7ee2b9f1de6f.PNG[/img][code] var sass = require('gulp-sass'); gulp.task('sass', function() {     return gulp.src('./sass/**/*.scss')         .pipe(sass().on('error', sass.logError))         .pipe(gulp.dest('./css')); }); gulp.task('sass:watch', function() {     gulp.watch('./sass/**/*.scss', ['sass']); }); gulp.task('default', ['connect', 'jade', 'sass']);[/code]

Analogicznie jak poprzednio dodajemy nową zmienną z biblioteką Sass, następnie wydajemy polecenie Gulp'owi o nazwie 'sass' (nazwa może być dowolna, nie musi tutaj być sass, może być np. style, wtedy w 'default' zmieniamy 'sass' na 'style'), w której funkcja zwraca (return, polecenie służące do zwracania danych, wartości w językach programowania) polecenie gulp.src, które szuka plików Sass, następnie Gulp wpycha do rury znalezione pliki, po czym przy wykorzystaniu polecenia z biblioteki Sass, jeżeli nasz kod będzie zawierał błędy, np. gdzieś zjedliśmy klamrę albo pomyliliśmy literę, otrzymamy w naszej konsoli błąd z dokładnym położeniem (sass.logError, zwraca błędy spotkane podczas kompilacji), następnie z rury nasze pliki trafiają do folderu o nazwie 'css'. Następne polecenie, które wydaliśmy Gulp'owi ma za zadanie obserwowanie plików sass na bieżąco, dzięki czemu jest w stanie po każdym zapisie pliku rozpoznać czy nie występują błędy w naszym kodzie('sass:watch'), co wywołujemy wpisując polecenie 'gulp.watch', miejsce obserwowania plików oraz nazwa naszego polecenia zawierającego rozpoznawanie Sass. Na sam koniec trzeba jeszcze pokazać Gulp'owi, że już potrafi obsługiwać Sass, więc analogicznie dodajemy po przecinku 'sass'. Jeśli wszystko zrobiliśmy jak należy, otrzymamy po wpisaniu w konsolę 'gulp':


[img]https://grafinity.pl/uploads/monthly_2016_05/screen-gulp-13.PNG.e533455e45f89267dc6cd65dea376301.PNG[/img]

W ten oto sposób nauczyliśmy naszego Gulp'a posługiwania się dwoma językami nowoczesnego webdeveloper'a! Pamiętajcie, że jeżeli wasz edytor domyślnie nie posiada obsługi danego języka musicie wgrać odpowiednie rozszerzenie z obsługą tego języka, tak aby składnia była przez niego rozpoznawana, w moim przypadku Visual Studio Code nie posiadał obsługi Jade, więc musiałem zainstalować składnię Jade do programu, w zależności od edytora robi się to inaczej, aczkolwiek podobnie, także nie będę tutaj pokazywał sposobu jak to zrobić, po prostu wpiszcie w Google nazwę waszego edytora i język jakiego potrzebujecie np. Visual Studio Code jade




Liczyłem, że w tej lekcji uda się stworzyć pierwszą stronę WWW, jednakże wytłumaczenie poleceń jakimi posługuje się Gulp w celu implementacji języka i przetworzenie go, zajęło całkiem sporo miejsca, także w następnej lekcji tworzymy własną stronę w Jade oraz ostylowujemy ją Sass'em i całość zostanie wzbogacona o tajemniczą opcję: 'Livereload', która umożliwia przetwarzanie kodu na żywo, zapisując plik w edytorze nie trzeba odświeżać przeglądarki, aby ujrzeć zmiany! Więc do kolejnej lekcji, a tymczasem jak zawsze jeśli podobał Ci się artykuł, spróbowałeś nauczyć Gulp'a nowych języków czy po prostu miło Ci się czytało, zostaw 'Lubię to!' co zmotywuje mnie jeszcze bardziej do dalszego tworzenia artykułów, komentarze mile widziane! Trzymajcie się w Pełni! :>




Pliki, dzięki którym porównacie czy wszystko macie dobrze ustawione znajdziecie tutaj: [url=https://github.com/FuruSenpai/GulpowanieZFuru]https://github.com/FuruSenpai/GulpowanieZFuru[/url], gdzie wyjaśnienia co i jak znajdują się poniżej.





[color=#FF8C00]Artykuł oraz grafiki w nim zawarte są moją własnościa - Furu.ART, zakaz kopiowania treści na inne blogi, fanpage czy strony - Bo nogi z **** powyrywam!