Witam wszystkich, przyjaciele! Dziś przyjrzymy się bliżej czym jest Gulp i jak można go wykorzystać do automatyzacji pracy Front-end developera. W wyniku lekcji stworzymy poważne i imponujące działające środowisko Front-end do tworzenia stron internetowych przy użyciu Gulp.

Lekcja wideo:

Fajny

Jąkanie się

• Poradnik dotyczący aktualizacji Gulp do wersji 4: Sprawdź samouczek Gulp 4

https://github.com/agragregra/gulp-lesson

Łyk to narzędzie, które pomaga zautomatyzować rutynowe zadania związane z tworzeniem stron internetowych. Gulp przeznaczony jest do rozwiązywania problemów takich jak:

• Stworzenie serwera WWW i automatyczne przeładowanie strony w przeglądarce podczas zapisywania kodu, monitorowanie zmian w plikach projektu;
• Korzystanie z różnych preprocesorów JavaScript, CSS i HTML (CoffeeScript, Less, Sass, Stylus, Jade itp.);
• Minifikacja kodu CSS i JS oraz optymalizacja i łączenie poszczególnych plików projektu w jeden;
• Automatyczne tworzenie przedrostków dostawców (przedrostków nazw właściwości CSS, które producenci przeglądarek dodają dla niestandardowych właściwości) dla CSS.
• Zarządzanie plikami i folderami w projekcie - tworzenie, usuwanie, zmiana nazwy;
• Uruchamianie i monitorowanie wykonywania poleceń zewnętrznego systemu operacyjnego;
• Praca z obrazami - kompresja, tworzenie sprite'ów, zmiana rozmiaru (png, jpg, svg itp.);
• Wdróż (wyślij na serwer zewnętrzny) projekt poprzez FTP, SFTP, Git itp.
• Podłączanie i korzystanie z nieograniczonej liczby narzędzi, programów i wtyczek Node.js i Gulp w projekcie.
• Tworzenie różnych map projektów i automatyzacja innej pracy fizycznej.

Można śmiało powiedzieć, że Gulp i wiele napisanych dla niego narzędzi nadają się do rozwiązania prawie każdego problemu podczas opracowywania projektu o dowolnej złożoności - od małej strony internetowej po duży projekt.

Każdy projekt korzystający z Gulpa ma plik w katalogu głównym gulpfile.js, który zawiera zestaw instrukcji zarządzania projektami. Od razu chcę powiedzieć, że pisanie instrukcji dla Gulpa to nie programowanie, mimo że są pisane w JavaScript. Nie bój się dużego gulpfile.js, w zasadzie wszystkie instrukcje są takie same i mają wspólne cechy. Zanim przeczytasz ten przewodnik, nie powinieneś mieć żadnych pytań na temat Gulpa, ponieważ system kompilacji jest prosty. Ale jeśli nadal masz pytania, napisz w komentarzach.

Instalowanie Gulpa

Uwaga! Jeśli jesteś użytkownikiem najnowszej wersji systemu Windows, polecam używać terminala Bash do tworzenia stron internetowych. W takim przypadku nie ma potrzeby pobierania instalatora z Nodejs.org. Skorzystaj z tego przewodnika: .

Jeśli masz problemy z ukończeniem tutoriala przy użyciu Gulpa 4, polecam wrócić do wersji 3, przejrzeć cały tutorial i dopiero potem zaktualizować package.json do wersji 4. Dla lepszego zrozumienia. Możesz przywrócić wersję w pliku package.json. Zamiast „gulp”: „^4.x.x” wpisz wersję „^3.9.1”, usuń folder „node_modules” i ponownie zainstaluj pakiety „ npm ja".

Aby pracować z Gulpem, musisz mieć zainstalowany Node.js. Instalacja Node.js na różne platformy jest dość prosta - pobierz instalator Node dla swojego systemu operacyjnego i zainstaluj. Polecam zainstalować najnowszą wersję Stable. Dla użytkowników Linuksa i najnowszych Windowsów przygotowałem oddzielny przewodnik instalacji: Korzystanie z podsystemu Linux do tworzenia stron internetowych w Windows 10.

Po zainstalowaniu Node możesz rozpocząć instalację Gulp. Otwórz terminal (kliknij folder prawym przyciskiem myszy, trzymając Shift > Otwórz tutaj powłokę Linux) i uruchom następującą komendę:

Npm przełykam -g

W przypadku użytkowników komputerów Mac i Linux oraz systemu Ubuntu bash w systemie Windows instalacja globalna z przełącznikiem -g musi zostać przeprowadzona z uprawnieniami superużytkownika, sudo, Na przykład:
sudo npm przełykam -g.

Z tego polecenia widzimy, że uruchamiany jest menedżer pakietów npm(Node Package Manager), który instaluje Gulpa w systemie za pomocą polecenia install. Klucz -G wskazuje, że pakiet zostanie zainstalowany w systemie globalnie, to znaczy w systemie, a nie w folderze projektu. Bez przełącznika -g pakiet jest instalowany w folderze, w którym wykonywane są bieżące polecenia, więc należy zachować ostrożność.

Tworzenie projektu Gulp

Stwórzmy przykładowy folder projektu do pracy, niech będzie to na przykład folder mój projekt.

Bardzo ważne! Nie twórz rosyjskojęzycznych folderów projektu i upewnij się, że ścieżka do folderu projektu nie zawiera znaków cyrylicy, to znaczy nie jest napisana w języku rosyjskim. W przeciwnym razie możesz mieć problemy z uruchomieniem różnych narzędzi Gulp. Folder Twojego użytkownika również nie powinien być w języku rosyjskim. Wszystko jest zapisane wyłącznie literami łacińskimi.

Otwórzmy teraz terminal w folderze projektu. W przypadku użytkowników systemu Windows wystarczy przytrzymać Shift i otworzyć menu kontekstowe. Dostępna będzie opcja „Otwórz tutaj powłokę Linuksa”. Powłoka systemu Linux musi być wstępnie zainstalowana, zobacz samouczek: Korzystanie z podsystemu Linux do tworzenia stron internetowych w systemie Windows.

Npm inicj

Postępując zgodnie z instrukcjami, uzupełnijmy metainformacje o naszym projekcie:

W wyniku tej prostej wstępnej konfiguracji naszego nowego projektu Gulp, w folderze myproject zostanie narysowany nowy plik pakiet.json.

Plik package.json to plik manifestu naszego projektu, który oprócz informacji, które wpisaliśmy w terminalu, opisuje także informacje o pakietach wykorzystanych w naszym projekcie.

Na przykład, jeśli zainstalujemy Gulp w projekcie z kluczem --zapisz-dev, wówczas użyty pakiet i wersja zostaną automatycznie dodane do naszego package.json. Takie rozliczanie umożliwi szybkie wdrożenie nowego projektu przy użyciu istniejącego pakietu.json i zainstalowanie niezbędnych modułów z zależnościami określonymi w pakiecie.json w nowych projektach.

Zainstalujmy Gulpa w naszym projekcie:

Npm przełykam --save-dev

Co widzimy z tej linii: npm instaluje pakiet gulp w bieżącym folderze myproject (ponieważ nie ma przełącznika -g, aby zainstalować pakiet globalnie w systemie) i zapisuje nazwę pakietu z wersją w pliku package.json:

Dodatkowo mamy folder moduły_węzłów, który zawiera teraz zainstalowany pakiet gulp i niezbędne zależności. Wszystkie moduły i zależności, które zainstalujemy w projekcie, zostaną automatycznie zrzucone do tego folderu. Folderów z zależnościami może być wiele, mimo że nie zainstalowaliśmy zbyt wielu pakietów. Wynika to z faktu, że oprócz pakietów głównych instalowane są programy niezbędne do prawidłowego działania pakietu głównego. Nie ma potrzeby czyszczenia ani usuwania czegokolwiek z folderu node_modules. Dodatkowo możesz mieć dodatkowy plik pakiet-lock.json. Nie ma w tym nic złego, jest to plik serwisowy, który można po prostu zignorować.

Struktura katalogów w projektach

Pracując z różnymi wtyczkami, programami i skryptami, czy to wtyczką jQuery, modułem do CMS-a, projektem internetowym czy jakimś innym oprogramowaniem, prawdopodobnie zauważyłeś, że wszystkie projekty mają podobną strukturę katalogów, na przykład większość projektów ma folder odl I aplikacja. Stwórzmy początkową strukturę naszego projektu tutorialowego. W rezultacie musimy stworzyć w naszym projekcie następującą strukturę myproject (wszystkie pliki, które nie istniały, zostaną na razie utworzone jako puste):

• mój projekt/
  • aplikacja/
    • css/
    • czcionki/
    • img/
    • js/
    • bezczelny/
    • indeks.html
  • odległość/
  • moduły_węzłów/
  • gulpfile.js
  • pakiet.json

Struktura ta występuje dość często, w prawie wszystkich projektach, ale nie jest to aksjomat i niektóre projekty mogą mieć zupełnie inną strukturę. W tym artykule użyjemy dokładnie tej struktury projektu.

Tutaj widzimy folder aplikacja/, który będzie zawierał wszystkie materiały źródłowe projektu - oryginalne pliki CSS, Sass, biblioteki js, oryginalne obrazy. Ogólnie rzecz biorąc, jest to folder źródłowy naszego projektu.

Teczka odległość/ będzie zawierał produkt gotowy, zoptymalizowany, skompresowany, czesany. To jest folder produkcyjny.

gulpfile.js

Teraz otwórzmy go w edytorze kodu gulpfile.js i napisz w nim:

Var łyk = wymagaj("przełyk");

Za pomocą tej linii łączymy Gulpa z naszym projektem za pomocą funkcji wymagać. Funkcja ta łączy pakiety z folderu node_modules z naszym projektem, przypisując je do zmiennej. W tym przypadku tworzymy zmienną łyk.

Gulp.task("mytask", funkcja() ( console.log("Cześć, jestem zadaniem!"); ));

moje zadanie to nazwa polecenia, które wywołasz w potrzebnej lokalizacji w gulpfile.js. Dodatkowo możesz wykonać zadanie bezpośrednio z linii poleceń wpisując:

Przełknij moje zadanie

gulpfile.js:

Wynik polecenia przełknij moje zadanie:

Jeśli używasz Gulp 4 i pojawi się błąd informujący, że zadanie nie może zostać ukończone, możesz dodać async przed funkcją() i wykonać kod asynchronicznie: var gulp = require("gulp"); gulp.task("mytask", funkcja asynchroniczna() ( console.log("Cześć, mam zadanie!"); ));

Jest to oczywiście bardzo prosty, podstawowy przykład tworzenia zadania. Z reguły zadania są nieco bardziej złożone i obejmują dodatkowe polecenia:

Gulp.task("mytask", funkcja () ( return gulp.src("source-files") // Wybór plików źródłowych do przetwarzania przez plugin.pipe(plugin()) // Wywołanie wtyczki Gulp w celu przetworzenia pliku .pipe(gulp .dest("folder")) // Wyprowadź wynikowy plik do folderu docelowego (dest jest miejscem docelowym)))

• gulp.src- wybór plików źródłowych projektu do przetwarzania przez wtyczkę;
• .pipe(wtyczka())- wywołanie wtyczki Gulp w celu przetworzenia pliku;
• .pipe(gulp.dest("folder"))- wyślij powstały plik do folderu docelowego (dest - miejsce docelowe).

To jest baza Gulpa, teraz możesz tworzyć instrukcje. Najpierw utwórzmy procedurę obsługi, która skompiluje pliki Sass do CSS (wstępne przetwarzanie CSS).

Przełknij Sassa

Zainstalujmy pakiet łyk-sas do naszego projektu, zapisując wersję i nazwę w package.json.

Należy pamiętać, że dowolne pakiety Gulp do dowolnego zadania są łatwe w Google i zawierają dość obszerne instrukcje dotyczące łączenia się na stronach głównych i w dokumentacji.

npm i gulp-sass --save-dev

Var łyk = wymagaj("przełyka"), sass = wymagaj("przełyka-przełyka"); //Połącz pakiet Sass

Utwórzmy plik w folderze app/sass główny.sass, ustaw tło treści na czarne i napisz dla niego procedurę obsługi w gulpfile.js

gulpfile.js:

Var gulp = require("gulp"), // Połącz Gulp sass = require("gulp-sass"); //Podłącz pakiet Sass gulp.task("sass", funkcja())( // Utwórz zadanie "sass" return gulp.src("app/sass/main.sass") // Pobierz source.pipe( sass()) // Konwertuj Sass do CSS za pomocą gulp-sass .pipe(gulp.dest("app/css")) // Prześlij wynik do folderu app/css));

Następnie logiczne byłoby wykonanie naszego nowego zadania w terminalu bezczelne:

Przełknij łyk

W wyniku wykonania tego polecenia w folderze app/css pojawi się plik główny.css.

Z tych samych cudów, przyjacielu. Jak widać wszystko jest proste :-)

Wybieranie plików dla gulp.src

Zasadniczo omówiliśmy wszystko, co trzeba wiedzieć o Gulp, teraz zagłębimy się w każdy szczegół tego, co opisano powyżej.

Wybór plików w powyższym przykładzie jest dość prosty, wzięliśmy plik bezpośrednio: gulp.src("app/sass/main.sass"). Ale pliki można również wybierać według szablonu. Nazywa się wzorzec wyboru pliku glob- https://en.wikipedia.org/wiki/Glob_(programowanie) . Przyjrzyjmy się bliżej wszystkim możliwościom wyboru plików do przetwarzania.

Najczęstsze wzorce próbkowania

• *.sas- zaznacza wszystkie pliki, które mają określone rozszerzenie (w tym przypadku .sass) w folderze głównym projekt.
• **/*.js- zaznacza wszystkie pliki z rozszerzeniem .js we wszystkich folderach projektu.
• !header.sass- wyklucza plik z ogólnej selekcji
• *.+(scss|sass)- określa złożony wzór dla kilku typów plików, oddzielonych pionową kreską. W tym przykładzie wybór obejmie wszystkie pliki sass i scss w katalogu głównym projektu.

Wprowadźmy pewne zmiany w zadaniu bezczelne i uczynić go bardziej uniwersalnym:

Gulp.task("sass", funkcja())( return gulp.src("app/sass/**/*.sass") // Pobierz wszystkie pliki sass z folderu sass i pliki podrzędne, jeśli takie istnieją.pipe( sass( )) .pipe(gulp.dest("app/css")) ));

Faktem jest, że zabranie bezpośrednio jednego osobnego pliku nie zawsze jest wygodne, ponieważ znajduje się w folderze bezczelne Mogą istnieć inne pliki z rozszerzeniem sass, które można wykorzystać w projekcie.

Należy pamiętać, że pliki sass, które mają być importowane do innych plików jako część wspólnego pliku, zaczynają się od podkreślenia _część-1.sass. Takie pliki nie biorą udziału w kompilacji jako osobne pliki, ale są dodawane poprzez @import do plików głównych.

Monitorowanie zmian w plikach (Gulp Watch)

Gulp obsługuje tę metodę oglądać do sprawdzania zapisanych plików i ma następującą składnię:

Gulp.watch("pliki-obserwacji", ["zadanie1", ​​"zadanie2"]);

Jeśli na przykład chcemy monitorować wszystkie zmiany w plikach sass naszego projektu, możemy zastosować następującą konstrukcję:

Gulp.watch("app/sass/**/*.sass", ["sass"]);

Co widzimy: Gulp obserwuje wszystkie pliki sass i po zapisaniu wykonuje zadanie sass, które automatycznie kompiluje je do plików css.

Możemy również utworzyć osobne zadanie do monitorowania wszystkich niezbędnych plików

Gulp.task("watch", funkcja() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Oglądanie plików sass // Oglądanie innych typów plików ) );

Dla Gulp 4 kod będzie wyglądał następująco: gulp.task("watch", funkcja() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); ) );

Jeśli uruchomimy w konsoli łyk zegarka wtedy Gulp automatycznie wyśledzi wszystkie zmiany w plikach sass podczas zapisywania i skompiluje je do formatu css.

Byłoby miło, oprócz tego piękna, automatycznie przeładowywać stronę, gdy nastąpią zmiany w plikach. Do tego zadania nadaje się dla nas Browser Sync.

Automatyczne odświeżanie strony za pomocą Bbrowser Sync

Synchronizacja przeglądarki to doskonałe rozwiązanie dla stron LiveReload podczas zapisywania plików. Co więcej, ponowne ładowanie następuje nie tylko w jednej przeglądarce, ale także we wszystkich przeglądarkach w sieci, niezależnie od tego, czy są to urządzenia mobilne, czy inne komputery w tej samej sieci Wi-Fi.

Wiemy już jak zainstalować dodatki dla Gulpa, więc zainstalujmy Browser Sync w naszym projekcie:

Npm i synchronizacja przeglądarki --save-dev

I oczywiście umieścimy go w pliku gulpfile.js, tak jak to zrobiliśmy wcześniej w przypadku pakietu gulp-sass.

Var gulp = require("gulp"), // Dołącz Gulp sass = require("gulp-sass"), // Dołącz pakiet Sass, BrowserSync = require("browser-sync"); // Połącz synchronizację przeglądarki

Utwórz zadanie dla synchronizacji przeglądarki:

Gulp.task("browser-sync",function() ( // Utwórz zadanie synchronizacji przeglądarki BrowseSync(( // Uruchom serwer synchronizacji przeglądarki: ( // Zdefiniuj parametry serwera baseDir: "app" // Katalog dla serwera - app ) , notify: false // Wyłącz powiadomienia )); ));

Świetnie! Nasz serwer jest gotowy do pracy i automatycznego przeładowania. Teraz prześledźmy zmiany w Sassie. Jeśli plik Sass zostanie zaktualizowany, automatycznie wstawimy zmodyfikowany plik CSS do kodu HTML:

Gulp.task("sass", funkcja())( // Utwórz zadanie Sass return gulp.src("app/sass/**/*.sass") // Pobierz source.pipe(sass()) / / Przekształć Sassa w CSS za pomocą gulp-sass .pipe(gulp.dest("app/css")) // Prześlij wynik do folderu app/css .pipe(browserSync.reload((stream: true))) // Zaktualizuj CSS na stronie po zmianie));

Wszystko, co musimy zrobić, to uruchomić zadanie synchronizacji przeglądarki przed jego uruchomieniem łyk zegarka. Zmodyfikujmy trochę zadanie oglądać dodając wykonanie synchronizacja przeglądarki I bezczelne przed startem oglądać:

Gulp.task("watch", ["sass", "synchronizacja przeglądarki"], funkcja() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Monitorowanie plików sass // Monitorowanie innych typów plików ));

Pamiętaj, że przed uruchomieniem wykonujemy zadania ["sass", "synchronizacja przeglądarki"]. oglądać, ponieważ ich wykonanie jest nam niezbędne do prawidłowego wyświetlenia zmian w momencie uruchomienia serwera.

W przypadku Gulpa 4 bardziej logiczne byłoby napisanie tego i wykonanie całej struktury w domyślnym zadaniu: gulp.task("watch", funkcja() ( gulp.watch("app/sass/**/*.sass" , gulp.parallel(" sass")); )); gulp.task("default", gulp.parallel("sass", "synchronizacja przeglądarki", "obserwuj"));

Umieśćmy zadanie watch po wszystkich innych zadaniach i w rezultacie otrzymamy to gulpfile.js dla Gulpa 3:

Var gulp = require("gulp"), // Dołącz Gulp sass = require("gulp-sass"), // Dołącz pakiet Sass, BrowserSync = require("browser-sync"); // Połącz synchronizację przeglądarki gulp.task("sass", funkcja())( // Utwórz zadanie Sass return gulp.src("app/sass/**/*.sass") // Pobierz source.pipe(sass () ) // Konwertuj Sass na CSS za pomocą gulp-sass .pipe(gulp.dest("app/css")) // Prześlij wynik do folderu app/css .pipe(browserSync.reload((stream: true) )) // Aktualizujemy CSS na stronie, gdy się zmienia)); gulp.task("browser-sync",function() ( // Utwórz zadanie synchronizacji przeglądarki BrowseSync(( // Uruchom serwer przeglądarki BrowseSync: ( // Zdefiniuj parametry serwera baseDir: "app" // Katalog dla serwera - aplikacja ), powiadom: false // Wyłącz powiadomienia )); )); gulp.task("watch", ["sass", "synchronizacja przeglądarki"], funkcja() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Monitorowanie plików sass // Monitorowanie innych typów plików ));

Oto kod dla Gulp 4:

Var gulp = require("gulp"), // Dołącz Gulp sass = require("gulp-sass"), // Dołącz pakiet Sass, BrowserSync = require("browser-sync"); // Połącz synchronizację przeglądarki gulp.task("sass", funkcja())( // Utwórz zadanie Sass return gulp.src("app/sass/**/*.sass") // Pobierz source.pipe(sass () ) // Konwertuj Sass na CSS za pomocą gulp-sass .pipe(gulp.dest("app/css")) // Prześlij wynik do folderu app/css .pipe(browserSync.reload((stream: true) )) // Aktualizujemy CSS na stronie, gdy się zmienia)); gulp.task("browser-sync",function() ( // Utwórz zadanie synchronizacji przeglądarki BrowseSync(( // Uruchom serwer przeglądarki BrowseSync: ( // Zdefiniuj parametry serwera baseDir: "app" // Katalog dla serwera - aplikacja ), powiadom: false // Wyłącz powiadomienia )); )); gulp.task("watch", funkcja() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); // Monitorowanie plików sass )); gulp.task("default", gulp.parallel("sass", "synchronizacja przeglądarki", "obserwuj"));

W celu monitorowania zmian w przeglądarce dokonamy odpowiedniego znacznika w pliku Index.html katalogu aplikacji z połączeniem pliku stylu główny.css:

Uruchommy w terminalu polecenie „gulp”. Wynik jest fascynujący:

Zobaczmy, co dzieje się w konsoli (obraz może się różnić w zależności od wersji oprogramowania):

Gdy już będziemy zadowoleni z efektu, pojawia się bardzo oczekiwane pytanie – jak dokładnie zaktualizować stronę, jednocześnie zapisując HTML i JS?

I sprostaliśmy temu zadaniu. Utwórz plik w folderze app/js common.js. To jest główny niestandardowy plik JS w naszym projekcie. Zmodyfikujmy kod:

Kod dla Gulpa 3:

Gulp.task("watch", ["sass", "synchronizacja przeglądarki"], funkcja() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Monitorowanie plików sass w folderze sass gulp.watch("app/*.html", BrowserSync.reload); // Monitorowanie plików HTML w katalogu głównym projektu gulp.watch(["app/js/common.js", "app /libs/**/*.js"], BrowserSync.reload); // Monitorowanie głównego pliku JS i bibliotek ));

Kod dla Gulp 4 (tutaj lepiej dodać dodatkowe zadanie do przetwarzania HTML i JS):

Gulp.task("skrypty", funkcja() ( return gulp.src(["app/js/common.js", "app/libs/**/*.js"]) .pipe(browserSync.reload(( strumień: prawda ))) )); gulp.task("kod", funkcja() ( return gulp.src("app/*.html") .pipe(browserSync.reload((strumień: prawda ))) )); gulp.task("watch", funkcja() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); // Monitorowanie plików sass gulp.watch(" aplikacja /*.html", gulp.parallel("code")); // Oglądanie plików HTML w katalogu głównym projektu gulp.watch(["app/js/common.js", "app/libs/**/* . js"], gulp.parallel("scripts")); // Monitorowanie głównego pliku JS i bibliotek )); gulp.task("default", gulp.parallel("sass", "synchronizacja przeglądarki", "obserwuj"));

Korzystamy tutaj z funkcji BrowserSync.reload, którą udostępnił nam pakiet Browser Sync. Proszę zwrócić uwagę na wybór plików śledzących.

W zasadzie mamy już dość zaawansowane środowisko pracy. Ale idąc dalej, to nie wszystko, do czego zdolny jest Gulp.

Optymalizacja JavaScriptu

Przyjrzyjmy się, jak zoptymalizować pliki JS projektu. Najczęściej optymalizacji wymagają biblioteki oraz wtyczki jQuery i JavaScript innych firm. Stwórzmy w folderze aplikacja Pakiet biblioteki, który będzie zawierał biblioteki niezbędne do realizacji projektu. Wszystkie biblioteki umieścimy w oddzielnych folderach. Do instalacji nowych bibliotek polecam użycie Bowera.

Zainstaluj Bowera:

Npm i -g altana

Pamiętaj, że Bower wymaga zainstalowania Gita. Jeśli używasz powłoki bash Ubuntu w systemie Windows, nie musisz instalować Gita.

Utwórzmy teraz plik w folderze projektu .bowerrc, w którym piszemy:

(„katalog”: „aplikacja/libs/”)

Jeśli jesteś użytkownikiem systemu Windows, nie będziesz mógł po prostu utworzyć pliku zaczynającego się od kropki. W takim przypadku możesz po prostu umieścić kropkę na końcu pliku i nacisnąć Enter: .bowerrc.

Dzięki temu ustawieniu określamy domyślną ścieżkę instalacji wtyczek za pomocą Altana.

Zainstalujmy jQuery i Magnific Popup, na przykład:

Bower i jquery magnific-popup

Pamiętaj, że wszystkie (lub prawie wszystkie) wtyczki mają folder dist, mówiliśmy o tym wcześniej. Folder ten zawiera gotowe pliki produkcyjne, które wykorzystamy w naszym projekcie.

Stwórzmy zadanie skrypty, który zbierze wszystkie pliki bibliotek JS w jeden i zminimalizuje plik. Aby to zrobić, zainstaluj 2 pakiety: gulp-concat i gulp-uglifyjs.

Npm i --save-dev gulp-concat gulp-uglifyjs

Dołączmy nowe biblioteki do gulpfile.js:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"), // Połącz pakiet Sass, BrowserSync = require("browser-sync"), // Connect Browser Sync concat = require („gulp-concat”), // Połącz gulp-concat (w celu łączenia plików) uglify = require("gulp-uglifyjs"); // Connect gulp-uglifyjs (dla kompresji JS)

Tworzymy zadanie zbudowania i skompresowania wszystkich bibliotek (przed obejrzeniem):

Gulp.task("skrypty", funkcja() ( return gulp.src([ // Pobierz wszystkie niezbędne biblioteki "app/libs/jquery/dist/jquery.min.js", // Weź jQuery "app/libs/ magnific -popup/dist/jquery.magnific-popup.min.js" // Pobierz Magnific Popup ]).pipe(concat("libs.min.js")) // Zbierz je na stercie w nowym pliku libs. min.js .pipe(uglify()) // Skompresuj plik JS.pipe(gulp.dest("app/js")); // Prześlij do folderu app/js));

Sprawdźmy jak działa nasze nowe zadanie skrypty uruchamiając w terminalu:

Wykonanie zadania skrypty można uruchomić przed wykonaniem watch. Łyk 3:

Dla Gulp 4 kod będzie wyglądał tak - dodaj zadanie do wykonania równoległego skrypty(pewna struktura została już ustawiona wcześniej): gulp.task("watch", funkcja() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); / / Obserwacja plików sass gulp.watch("app/*.html", gulp.parallel("code")); // Monitorowanie plików HTML w katalogu głównym projektu gulp.watch(["app/js/common.js" , " app/libs/**/*.js"], gulp.parallel("scripts")); // Monitorowanie głównego pliku JS i bibliotek )); gulp.task("default", gulp.parallel("sass", "skrypty", "synchronizacja przeglądarki", "obserwuj"));

Następnie możesz podłączyć do projektu wszystkie niezbędne pliki bibliotek CSS. W naszym przypadku wystarczy dodać tylko jedną bibliotekę - jest to Magnific Popup. Zróbmy to @import w pliku Sass sass/libs.sass:

@import "app/libs/magnific-popup/dist/magnific-popup.css" // Importuj bibliotekę Magnific Popup

Uwaga! W nowych wersjach łyk-sas Aby zaimportować pliki CSS do Sass, musisz określić rozszerzenie .css i zaimportować pliki CSS do plików SASS z podkreśleniem na początku nazwy. Przykładowo, aby zaimportować plik nazwa-biblioteki.css należy utworzyć pomocniczy plik SASS, np. _libs.sass i zaimportować do niego wymagany CSS - @import "app/libs/nazwa-biblioteki.css" i dodaj pomocniczy plik _libs.sass do głównego pliku main.sass bez określania podkreślenia i rozszerzenia, na przykład w następujący sposób: @importuj „libacje”

Na wyjściu w folderze app/css otrzymujemy oprócz pliku main.css plik libs.css, który zawiera style wszystkich bibliotek. Minimalizowanie pliku main.css nie ma większego sensu, ponieważ zawiera on style niestandardowe (użytkownika). Ale chętnie zminimalizujemy plik libs.css.

Uwaga! Jeśli w pliku libs.css nie pojawia się żaden kod biblioteki, a nadal widzisz w nim instrukcje @import, utwórz oddzielny plik _libs.sass dla uruchamianych bibliotek z podkreśleniem. Następnie zaimportuj ten plik do głównego, łącząc w ten sposób zarówno biblioteki, jak i niestandardowe style w jeden plik.

Aby zminimalizować CSS, zainstaluj pakiety łyk-cssnano I zmiana nazwy:

Npm i gulp-cssnano gulp-rename --save-dev

I połączmy je w naszym gulpfile.js:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"), // Połącz pakiet Sass, BrowserSync = require("browser-sync"), // Connect Browser Sync concat = require („gulp-concat”), // Dołącz gulp-concat (dla łączenia plików) uglify = require("gulp-uglifyjs"), // Dołącz gulp-uglifyjs (dla kompresji JS) cssnano = require("gulp-cssnano " ), // Podłącz pakiet do minifikacji CSS rename = require("gulp-rename"); // Dołącz bibliotekę, aby zmienić nazwy plików

I utwórz odpowiednie zadanie biblioteki css. Dodajmy od razu to zadanie do obserwowania, aby biblioteki zostały zebrane podczas uruchamiania projektu. Lepiej wywołać zadanie sass przed uruchomieniem css-libs, abyśmy mieli coś do zminimalizowania:

Gulp.task("css-libs", ["sass"], funkcja() ( return gulp.src("app/sass/libs.sass") // Wybierz plik do minify.pipe(sass()) / / Konwertuj Sass na CSS za pomocą gulp-sass .pipe(cssnano()) // Compress.pipe(rename((suffix: ".min"))) // Dodaj sufiks.min .pipe(gulp.dest("app/ css ")); // Prześlij do folderu app/css)); gulp.task("watch", ["synchronizacja przeglądarki", "css-libs", "skrypty"], funkcja() ( gulp.watch("app/sass/**/*.sass", ["sass "]); // Monitorowanie plików sass w folderze sass gulp.watch("app/*.html", BrowserSync.reload); // Monitorowanie plików HTML w katalogu głównym projektu gulp.watch(["app/js/common .js", "app/libs/**/*.js"], BrowserSync.reload); // Monitorowanie głównego pliku JS i bibliotek ));

Kod dla Gulpa 4:

Gulp.task("css-libs", funkcja() ( return gulp.src("app/sass/libs.sass") // Wybierz plik do minify.pipe(sass()) // Konwertuj Sass do CSS za pomocą gulp -sass .pipe(cssnano()) // Compress.pipe(rename((suffix: ".min"))) // Dodaj sufiks.min .pipe(gulp.dest("app/css")); / / Prześlij do folderu app/css)); gulp.task("watch", funkcja() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass")); // Monitorowanie plików sass gulp.watch(" aplikacja /*.html", gulp.parallel("code")); // Oglądanie plików HTML w katalogu głównym projektu gulp.watch(["app/js/common.js", "app/libs/**/* . js"], gulp.parallel("scripts")); // Monitorowanie głównego pliku JS i bibliotek )); gulp.task("default", gulp.parallel("css-libs", "sass", "skrypty", "synchronizacja przeglądarki", "zegarek"));

Przygotowanie do produkcji

Wynikowy kod dla Łyk 4 zostaną zaprezentowane na końcu artykułu.

Do celów produkcyjnych (budowanie w folderze dist) utworzymy osobne zadanie kompilacji na końcu pliku gulpfile.js. W tej instrukcji zbudujemy Sass, JS i wrzucimy to co mamy gotowe do folderu dist.

Gulp.task("build", ["sass", "scripts"],function() ( var buildCss = gulp.src([ // Przenieś style CSS do produkcyjnego "app/css/main.css", "app/ css/libs.min.css" ]).pipe(gulp.dest("dist/css")) var buildFonts = gulp.src("app/fonts/**/*") // Przenieś czcionki do Production.pipe (gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*") // Przenieś skrypty do Production.pipe(gulp.dest("dist/js") ) var buildHtml = gulp.src("app/*.html") // Prześlij HTML do Production.pipe(gulp.dest("dist")); ));

Tutaj przypisując dowolne akcje do zmiennych, wykonujemy je. W ten sposób możesz wykonywać zadania wielozadaniowe. Nie musisz tego przywłaszczać, ale zrobimy to w ten sposób, bo jest piękniejszy.

Wszystko jest w porządku, ale zawsze jest jedno „ale”. Przed złożeniem projektu wskazane byłoby wyczyszczenie folderu dist, aby nie pozostały niepotrzebne podroby z poprzednich iteracji naszego projektu.

Zainstaluj i włącz pakiet del:

Npm i del --save-dev var gulp = require("gulp"), // Dołącz Gulp sass = require("gulp-sass"), // Dołącz pakiet Sass, BrowserSync = require("browser-sync") , // Connect Browser Sync concat = require("gulp-concat"), // Connect gulp-concat (dla łączenia plików) uglify = require("gulp-uglifyjs"), // Connect gulp-uglifyjs (dla kompresji JS) cssnano = require("gulp-cssnano"), // Dołącz pakiet do minifikacji CSS rename = require("gulp-rename"), // Dołącz bibliotekę do zmiany nazw plików del = require("del"); // Podłącz bibliotekę, aby usunąć pliki i foldery

Utwórz zadanie czyszczenia czysty i dodaj jego wykonanie przed wykonaniem kompilacji:

Gulp.task("clean", funkcja() ( return del.sync("dist"); // Usuń folder dist przed budowaniem )); gulp.task("build", ["clean", "sass", "scripts"],function() ( var buildCss = gulp.src([ // Przenieś biblioteki do produkcyjnego "app/css/main.css" , "app/css/libs.min.css" ]) .pipe(gulp.dest("dist/css")) var buildFonts = gulp.src("app/fonts/**/*") // Przenieś czcionki do Production.pipe(gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*") // Przenieś skrypty do Production.pipe(gulp.dest("dist /js ")) var buildHtml = gulp.src("app/*.html") // Prześlij kod HTML do Production.pipe(gulp.dest("dist")); ));

W przypadku Gulp 4 spróbuj samodzielnie utworzyć zadania, tak jak to zrobiliśmy w poprzednich przykładach.

Optymalizacja obrazu

Jak zapewne zauważyliście, w naszym projekcie produkcyjnym brakuje obrazów. Poprawmy to nieporozumienie i dodajmy do naszego projektu przetwarzanie obrazu. Ta sekcja została napisana przy użyciu Gulp 3. Kod dla Gulp 4 można dostosować niezależnie, tak jak zrobiliśmy to wcześniej.

W folderze app/img znajdują się 3 obrazy, które musimy przenieść do folderu produkcyjnego poprzez optymalizację.

Aby zoptymalizować obrazy, zainstaluj 2 pakiety ( łyk-imagemin, imagemin-pngquant) i połącz je:

Npm i gulp-imagemin imagemin-pngquant --save-dev var gulp = require("gulp"), // Dołącz Gulp sass = require("gulp-sass"), // Dołącz pakiet Sass, BrowserSync = require(" przeglądarka -sync"), // Połącz synchronizację przeglądarki concat = require("gulp-concat"), // Połącz gulp-concat (do łączenia plików) uglify = require("gulp-uglifyjs"), // Połącz gulp-uglifyjs (dla kompresji JS) cssnano = require("gulp-cssnano"), // Dołącz pakiet do minifikacji CSS rename = require("gulp-rename"), // Dołącz bibliotekę do zmiany nazw plików del = require("del" ), // Dołącz bibliotekę do usuwania plików i folderów imagemin = require("gulp-imagemin"), // Dołącz bibliotekę do pracy z obrazami pngquant = require("imagemin-pngquant"); // Dołącz bibliotekę do pracy z png

Gulp.task("img", funkcja() ( return gulp.src("app/img/**/*") // Pobierz wszystkie obrazy z aplikacji .pipe(imagemin(( // Skompresuj je z najlepszymi ustawieniami przeplotu : true, progresywny: true, svgoPlugins: [(removeViewBox: false)], użyj: ))) .pipe(gulp.dest("dist/img")); // Prześlij do produkcji )); gulp.task("build", ["clean", "img", "sass", "scripts"],function() ( var buildCss = gulp.src([ // Przenieś biblioteki do produkcyjnego "app/css/main .css", "app/css/libs.min.css" ]).pipe(gulp.dest("dist/css")) var buildFonts = gulp.src("app/fonts/**/*") / / Przenieś czcionki do Production.pipe(gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*") // Przenieś skrypty do Production.pipe(gulp. dest( "dist/js")) var buildHtml = gulp.src("app/*.html") // Prześlij HTML do Production.pipe(gulp.dest("dist")); ));

Wszystko w porządku. O ile ilość zdjęć w projekcie nie przekracza 3 sztuk. Przetwarzanie dużej liczby obrazów będzie trwało znacznie dłużej, dlatego dobrym pomysłem byłoby dodanie pamięci podręcznej do przetwarzania obrazów, aby obrazy były buforowane, oszczędzając nam czas.

Zainstaluj i podłącz przełyk-cache:

Npm i gulp-cache --save-dev var gulp = require("gulp"), // Dołącz Gulp sass = require("gulp-sass"), // Dołącz pakiet Sass, BrowserSync = require("przeglądarka-sync " ), // Połącz synchronizację przeglądarki concat = require("gulp-concat"), // Połącz gulp-concat (dla łączenia plików) uglify = require("gulp-uglifyjs"), // Połącz gulp-uglifyjs (dla JS kompresja ) cssnano = require("gulp-cssnano"), // Dołącz pakiet do minifikacji CSS rename = require("gulp-rename"), // Dołącz bibliotekę do zmiany nazw plików del = require("del"), / / Dołącz bibliotekę do usuwania plików i folderów imagemin = require("gulp-imagemin"), // Dołącz bibliotekę do pracy z obrazami pngquant = require("imagemin-pngquant"), // Dołącz bibliotekę do pracy z pamięcią podręczną png = require("przełyk-cache"); // Podłącz bibliotekę buforującą

Modyfikowanie zadania obraz:

Gulp.task("img", funkcja() ( return gulp.src("app/img/**/*") // Pobierz wszystkie obrazy z aplikacji .pipe(cache(imagemin(( // Skompresuj je najlepiej ustawienia uwzględniające buforowanie z przeplotem: true, progresywne: true, svgoPlugins: [(removeViewBox: false)], użyj: )))) .pipe(gulp.dest("dist/img")); // Prześlij do produkcji ) );

Automatyczne generowanie prefiksów CSS za pomocą Gulp

Aby zapewnić maksymalną kompatybilność ze wszystkimi nowoczesnymi przeglądarkami, wymagane są prefiksy dostawców. Logiczne byłoby automatyczne dodawanie prefiksów, aby pisząc w CSS lub Sass:

Wyświetlacz: elastyczny

Otrzymaliśmy następujące dane wyjściowe:

Wyświetlacz: -webkit-flex; wyświetlacz: -moz-flex; wyświetlacz: -ms-flex; wyświetlacz: -o-flex; wyświetlacz: elastyczny;

Zainstalujmy pakiet autoprefikser gulp i podłącz go do gulpfile.js:

Npm i --save-dev gulp-autoprefixer var gulp = require("gulp"), // Dołącz Gulp sass = require("gulp-sass"), // Dołącz pakiet Sass, BrowserSync = require("przeglądarka-sync " ), // Połącz synchronizację przeglądarki concat = require("gulp-concat"), // Połącz gulp-concat (dla łączenia plików) uglify = require("gulp-uglifyjs"), // Połącz gulp-uglifyjs (dla JS kompresja ) cssnano = require("gulp-cssnano"), // Dołącz pakiet do minifikacji CSS rename = require("gulp-rename"), // Dołącz bibliotekę do zmiany nazw plików del = require("del"), / / Dołącz bibliotekę do usuwania plików i folderów imagemin = require("gulp-imagemin"), // Dołącz bibliotekę do pracy z obrazami pngquant = require("imagemin-pngquant"), // Dołącz bibliotekę do pracy z pamięcią podręczną png = require("gulp-cache"), // Dołącz bibliotekę buforującą autoprefixer = require("gulp-autoprefixer"); // Dołącz bibliotekę do automatycznego dodawania przedrostków

I modyfikujemy nasze zadanie bezczelne:

Gulp.task("sass", funkcja())( // Utwórz zadanie Sass return gulp.src("app/sass/**/*.sass") // Pobierz source.pipe(sass()) / / Przekształć Sassa w CSS za pomocą gulp-sass .pipe(autoprefixer(["ostatnie 15 wersji", "> 1%", "tj. 8", "tj. 7"], (cascade: true ))) // Utwórz prefiksy. pipe(gulp .dest("app/css")) // Prześlij wynik do folderu app/css .pipe(browserSync.reload((stream: true))) // Zaktualizuj CSS na stronie po zmianie )) ;

Domyślne zadanie Gulpa

Uwaga! Domyślne zadanie dla Gulpa 4 różni się od zadania podanego w tym rozdziale. Kompletny kod dla Gulp 4 można znaleźć na końcu artykułu.

Mamy więc 2 główne zadania - łyk zegarka- do pracy nad projektem online i łyk kompilacji- do montażu projektu do produkcji bez zbędnych plików, folderów i skompresowanych obrazów. Ponieważ najczęściej będziemy potrzebować zadania oglądać, możesz zawiesić go na domyślnym zadaniu, żeby nie pisać ciągle w konsoli gulp watch, a po prostu pisać łyk.

Gulp.task("domyślne", ["obejrzyj"]);

Musisz także utworzyć samodzielne zadanie, aby wyczyścić pamięć podręczną Gulp, aby można było ją wywołać za pomocą prostego polecenia przełknij jasno:

Gulp.task("wyczyść", funkcja () (zwróć pamięć podręczną.clearAll(); ))

Jeśli masz problemy z obrazami lub innymi plikami zapisanymi w pamięci podręcznej, po prostu wyczyść pamięć podręczną.

W efekcie powinniśmy otrzymać coś takiego gulpfile.js. Łyk 3:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"), // Połącz pakiet Sass, BrowserSync = require("browser-sync"), // Connect Browser Sync concat = require („gulp-concat”), // Dołącz gulp-concat (dla łączenia plików) uglify = require("gulp-uglifyjs"), // Dołącz gulp-uglifyjs (dla kompresji JS) cssnano = require("gulp-cssnano " ), // Dołącz pakiet do minifikacji CSS rename = require("gulp-rename"), // Dołącz bibliotekę do zmiany nazw plików del = require("del"), // Dołącz bibliotekę do usuwania plików i folderów imagemin = require(" gulp-imagemin"), // Dołącz bibliotekę do pracy z obrazami pngquant = require("imagemin-pngquant"), // Dołącz bibliotekę do pracy z png cache = require("gulp-cache"), // Dołącz bibliotekę buforującą autoprefixer = require("gulp-autoprefixer");// Dołącz bibliotekę, aby automatycznie dodawać przedrostki gulp.task("sass", funkcja())( // Utwórz zadanie Sass return gulp.src( "app/sass/**/*. sass") // Pobierz source.pipe(sass()) // Konwertuj Sass na CSS za pomocą gulp-sass .pipe(autoprefixer(["ostatnie 15 wersji", "> 1 %", "tj. 8", "tj. 7 "], (kaskada: prawda ))) // Utwórz prefixes.pipe(gulp.dest("app/css")) // Prześlij wyniki do folderu app/css .pipe(browserSync.reload((stream: true)) ) // Aktualizuj CSS na stronie, gdy )); gulp.task("browser-sync",function() ( // Utwórz zadanie synchronizacji przeglądarki BrowseSync(( // Uruchom serwer przeglądarki BrowseSync: ( // Zdefiniuj parametry serwera baseDir: "app" // Katalog dla serwera - aplikacja ), powiadom: false // Wyłącz powiadomienia )); )); gulp.task("skrypty", funkcja() ( return gulp.src([ // Pobierz wszystkie potrzebne biblioteki "app/libs/jquery/dist/jquery.min.js", // Weź jQuery "app/libs/ magnific -popup/dist/jquery.magnific-popup.min.js" // Pobierz Magnific Popup ]).pipe(concat("libs.min.js")) // Zbierz je razem w nowym pliku libs.min. js .pipe(uglify()) // Skompresuj plik JS.pipe(gulp.dest("app/js")); // Prześlij do folderu app/js)); gulp.task("css-libs", ["sass"], funkcja() ( return gulp.src("app/css/libs.sass") // Wybierz plik dla minifikacji.pipe(sass()) / / Konwertuj Sass na CSS za pomocą gulp-sass .pipe(cssnano()) // Compress.pipe(rename((suffix: ".min"))) // Dodaj sufiks.min .pipe(gulp.dest("app/ css ")); // Prześlij do folderu app/css)); gulp.task("clean", funkcja() ( return del.sync("dist"); // Usuń folder dist przed budowaniem )); gulp.task("img", funkcja() ( return gulp.src("app/img/**/*") // Pobierz wszystkie obrazy z aplikacji .pipe(cache(imagemin(( // Z buforowaniem // . pipe(imagemin(( // Kompresuj obrazy bez buforowania z przeplotem: true, progresywne: true, svgoPlugins: [(removeViewBox: false)], użyj: )))/**/) .pipe(gulp.dest("dist/img ")); // Prześlij do produkcji )); gulp.task("build", ["clean", "img", "sass", "scripts"],function() ( var buildCss = gulp.src([ // Przenieś biblioteki do środowiska produkcyjnego „app/css/main.css”, „app/css/libs.min.css” ]).pipe(gulp.dest(”dist/css”)) var buildFonts = gulp.src ( "app/fonts/**/*") // Przenieś czcionki do Production.pipe(gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*" ) // Przenieś skrypty do Production.pipe(gulp.dest("dist/js")) var buildHtml = gulp.src("app/*.html") // Przenieś kod HTML do Production.pipe(gulp.dest ("dist" )); )); gulp.task("wyczyść", funkcja (oddzwonienie) (zwróć pamięć podręczną.clearAll(); )); gulp.task("watch", ["synchronizacja przeglądarki", "css -libs", "skrypty"], funkcja() ( gulp.watch("app/sass/**/*.sass", ["sass"]); // Oglądanie plików sass w folderze sass gulp.watch("app/*.html", BrowserSync.reload); // Monitoruj pliki HTML w katalogu głównym projektu gulp.watch(["app/js/common.js", "app/libs/**/*.js"], BrowserSync.reload); // Monitoruj pliki JS w folderze js)); gulp.task("domyślne", ["oglądaj"]);

Wynikowy kod dla Gulp 4:

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"), // Połącz pakiet Sass, BrowserSync = require("browser-sync"), // Connect Browser Sync concat = require („gulp-concat”), // Dołącz gulp-concat (dla łączenia plików) uglify = require("gulp-uglifyjs"), // Dołącz gulp-uglifyjs (dla kompresji JS) cssnano = require("gulp-cssnano " ), // Dołącz pakiet do minifikacji CSS rename = require("gulp-rename"), // Dołącz bibliotekę do zmiany nazw plików del = require("del"), // Dołącz bibliotekę do usuwania plików i folderów imagemin = require(" gulp-imagemin"), // Dołącz bibliotekę do pracy z obrazami pngquant = require("imagemin-pngquant"), // Dołącz bibliotekę do pracy z png cache = require("gulp-cache"), // Dołącz bibliotekę buforującą autoprefixer = require("gulp-autoprefixer");// Dołącz bibliotekę, aby automatycznie dodawać przedrostki gulp.task("sass", funkcja() ( // Utwórz zadanie Sass return gulp.src(" app/sass/**/*. sass") // Weź source.pipe(sass()) // Konwertuj Sass na CSS za pomocą gulp-sass .pipe(autoprefixer(["ostatnie 15 wersji", "> 1% ", "ie 8", "ie 7 "], (cascade: true ))) // Utwórz prefixes.pipe(gulp.dest("app/css")) // Prześlij wyniki do folderu app/css. pipe(browserSync.reload((stream: true)) ) // Zaktualizuj CSS na stronie, gdy )); gulp.task("browser-sync",function() ( // Utwórz zadanie synchronizacji przeglądarki BrowseSync(( // Uruchom serwer przeglądarki BrowseSync: ( // Zdefiniuj parametry serwera baseDir: "app" // Katalog dla serwera - aplikacja ), powiadom: false // Wyłącz powiadomienia )); )); gulp.task("skrypty", funkcja() ( return gulp.src([ // Pobierz wszystkie potrzebne biblioteki "app/libs/jquery/dist/jquery.min.js", // Weź jQuery "app/libs/ magnific -popup/dist/jquery.magnific-popup.min.js" // Pobierz Magnific Popup ]).pipe(concat("libs.min.js")) // Zbierz je na stercie w nowym pliku libs. min.js .pipe(uglify()) // Skompresuj plik JS.pipe(gulp.dest("app/js")); // Prześlij do folderu app/js)); gulp.task("kod", funkcja() ( return gulp.src("app/*.html") .pipe(browserSync.reload((strumień: prawda ))) )); gulp.task("css-libs", funkcja() ( return gulp.src("app/css/libs.sass") // Wybierz plik do minify.pipe(sass()) // Konwertuj Sass do CSS za pomocą gulp -sass .pipe(cssnano()) // Compress.pipe(rename((suffix: ".min"))) // Dodaj sufiks.min .pipe(gulp.dest("app/css")); / / Prześlij do folderu app/css)); gulp.task("clean", asyncfunction() ( return del.sync("dist"); // Usuń folder dist przed budowaniem )); gulp.task("img", funkcja() ( return gulp.src("app/img/**/*") // Pobierz wszystkie obrazy z aplikacji .pipe(cache(imagemin(( // Z buforowaniem // . pipe(imagemin(( // Kompresuj obrazy bez buforowania z przeplotem: true, progresywne: true, svgoPlugins: [(removeViewBox: false)], użyj: )))/**/) .pipe(gulp.dest("dist/img ")); // Prześlij do środowiska produkcyjnego )); gulp.task("prebuild", asyncfunction() ( var buildCss = gulp.src([ // Przenieś biblioteki do środowiska produkcyjnego "app/css/main.css", " app/css/libs.min.css" ]).pipe(gulp.dest("dist/css")) var buildFonts = gulp.src("app/fonts/**/*") // Przenieś czcionki do produkcja .pipe(gulp.dest("dist/fonts")) var buildJs = gulp.src("app/js/**/*") // Przenieś skrypty do Production.pipe(gulp.dest("dist/ js" )) var buildHtml = gulp.src("app/*.html") // Prześlij HTML do Production.pipe(gulp.dest("dist")); )); gulp.task("clear", funkcja (oddzwonienie ) (zwróć cache.clearAll(); )) gulp.task("watch", funkcja() ( gulp.watch("app/sass/**/*.sass", gulp.parallel("sass") ); // Oglądanie plików sass gulp.watch("app/*.html", gulp.parallel("code")); // Oglądanie plików HTML w katalogu głównym projektu gulp.watch(["app/js/common.js", "app/libs/**/*.js"], gulp.parallel("scripts")); // Monitorowanie głównego pliku JS i bibliotek )); gulp.task("default", gulp.parallel("css-libs", "sass", "skrypty", "synchronizacja przeglądarki", "zegarek")); gulp.task("build", gulp.parallel("prebuild", "clean", "img", "sass", "skrypty"));

Możesz obejrzeć przykładowy projekt z tej lekcji na GitHubie i pobrać go: https://github.com/agragregra/gulp-lesson

Aby zainstalować wszystkie pakiety i zależności dla pobranego przykładu, uruchom komendę npm ja w folderze projektu.

Pamiętaj - każda wtyczka do Gulpa ma dobrą dokumentację dotyczącą łączenia i używania jej na npmjs.com lub na stronie GitHub.

Pozdrowienia. Jeśli zajmujesz się tworzeniem frontendu, być może zauważyłeś, że często musisz wykonywać te same zadania. Byłoby wspaniale zautomatyzować to wszystko i ograniczyć ilość rutyny do minimum. Menedżerowie zadań i asemblery projektów, tacy jak Łyk i Grunt.

Gulp jest rozwidleniem projektu Grunt. Najlepsze praktyki przejął od swoich rodziców. Kod instrukcji jest napisany w JavaScript. Działa kilka razy szybciej niż Grunt.

Gulp jest naprawdę potężny. Ułatwi i przyspieszy rozwój frontendu. Wymienię główne zadania, które asembler projektu pomoże Ci rozwiązać.

• Tworzenie serwera WWW do debugowania
• Automatycznie przeładuj strony po wprowadzeniu zmian (LiveReload)
• Śledzenie zmian w plikach projektu
• Korzystanie z preprocesorów HTML, CSS, JS
• Łączenie plików i minimalizowanie ich
• Automatyczne tworzenie prefiksów dostawców dla przeglądarek (Autoprefixer)
• Automatyzacja zarządzania plikami i katalogami
• Uruchamianie i kontrolowanie poleceń zewnętrznego systemu operacyjnego
• Uruchamianie i kontrolowanie aplikacji
• Optymalizacja obrazu (kompresja, zmiana rozmiaru itp.)
• Przesyłanie projektu na serwer zewnętrzny za pomocą protokołu FTP, SFTP, Git itp.
• Podłączanie i korzystanie z dodatkowych wtyczek (dziś jest ich już 3570; rozwiązaniem może być
• znaleźć do prawie wszystkich codziennych rutynowych zadań i nie tylko)
• Automatyzacja pracy ręcznej

Instalacja

Gulp wymaga do działania Node.js. Można go pobrać na oficjalnej stronie internetowej. Radzę zainstalować wersję platformy oprogramowania LTS. Po zainstalowaniu Node.js możesz przystąpić do instalacji Gulp. Aby to zrobić, otwórz konsolę systemu operacyjnego i uruchom następującą komendę:

Używamy parametru -G, który pozwala zainstalować Gulp globalnie w systemie operacyjnym, bez przywiązania do konkretnego projektu.

Ważne jest, aby w ścieżce do katalogu instalacyjnego nie było znaków rosyjskich. Może to spowodować, że niektóre wtyczki gulp nie będą działać poprawnie.

OK, czas stworzyć projekt, w którym wykorzystamy Gulpa. Przejdź do katalogu projektu i uruchom polecenie:

Spowoduje to uruchomienie skryptu, który zada Ci kilka pytań na temat projektu. Wynikiem będzie skonfigurowany plik dla npm pakiet.json. Oto manifest projektu. Zawiera listę pakietów używanych w projekcie i inne informacje. Na tym etapie wprowadziłem następujące dane, dostosuj je do swojego projektu.

nazwa: (bybtc-landing) wersja: (1.0.0) opis: Strona docelowa dla byBTC punkt wejścia: (index.js) polecenie testowe: repozytorium git: https://github.com/Neuropassenger/bybtc-landing.git słowa kluczowe : lądowanie

Jeśli chcesz pominąć pytanie, po prostu naciśnij Enter. Zostanie użyta wartość domyślna. Teraz możemy zainstalować Gulp dla naszego projektu. Uruchom polecenie:

npm i --save-dev przełknij

Gulp zostanie zainstalowany w katalogu projektu, a parametr –zapisz-dev doda go do zależności package.json. Umożliwi to innemu programiście, który otworzy Twój projekt, szybkie wdrożenie go na swoim komputerze (za pomocą polecenia npm ja).

Jeśli wszystko poszło dobrze, w folderze projektu powinien pojawić się katalog moduły_węzłów. Zawiera zainstalowany pakiet łyk i wszystkie zależności potrzebne do jego działania.

Czas stworzyć podstawową strukturę projektu. Trzymam się tych samych nazw katalogów, co wielu programistów. Tobie też radzę to zrobić, aby inna osoba mogła szybko zrozumieć strukturę Twojego projektu. Jednak nikt nie zabrania Ci używania nazw, które chcesz.

Utwórz dwa foldery w katalogu głównym projektu:

• /src/ – kod źródłowy projektu podczas tworzenia, tutaj będziesz edytować pliki
• /dist/ – pliki i foldery projektu po złożeniu, gotowy produkt

Katalog /odległość/ zostaną wypełnione automatycznie podczas tworzenia projektu. Zajmijmy się tym na razie /źródło/. Utwórz w środku następujące foldery:

• /css/ – dla kaskadowych arkuszy stylów
• /js/ – dla skryptów JavaScript
• /img/ – dla obrazów
• /fonts/ – dla czcionek
• /sass/ – dla plików preprocesora SASS (jeśli używasz SASS)
• /libs/ – dla bibliotek innych firm

Jeśli wszystko jest gotowe, czas przejść do tworzenia pliku gulpfile.js w katalogu głównym projektu, który pomoże Ci skonfigurować Gulp. Tutaj możesz utworzyć instrukcje Gulpa, które pomogą zautomatyzować niektóre przyziemne zadania.

Instrukcje Gulpa

Każda instrukcja jest tworzona w gulpfile.js za pomocą funkcji łyk.zadanie(). Pierwszym parametrem jest nazwa instrukcji. Następnie znajduje się tablica nazw instrukcji, które muszą zostać wykonane, zanim zostanie wykonana zdefiniowana instrukcja. Ostatni parametr to funkcja, której ciało określa, co robi instrukcja.

gulp.task("nazwa_instrukcji", ["instrukcja_wykonana_przed_bieżącą_instrukcją", "inna_instrukcja"], funkcja() ( // Niektóre akcje ));

Aby wywołać instrukcję, użyj w konsoli następującego polecenia:

przełknij nazwa_polecenie

Kompilacja SASS do CSS

Zacznijmy od kompilacji SASS do CSS. Zainstaluj pakiet gulp-sass:

npm i --save-dev gulp-sass

Najpierw musisz połączyć pakiety, z których korzystasz gulpfile.js. Zróbmy to:

var gulp = wymagaj("przełyka"), sass = wymagaj("przełyka-sass");

Stwórzmy teraz instrukcję, która skompiluje SASS do CSS:

gulp.task("sass", funkcja() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(gulp.dest("src/css") ); ));

W pierwszym wierszu instrukcji wskazujemy pliki źródłowe do kompilacji. W konkretnym przykładzie zostaną pobrane wszystkie pliki z rozszerzeniem .ss znajdujący się wewnątrz folderu /src/sass/ i jego podfoldery. Możesz także wybrać określone pliki. Oto przykładowa lista sposobów ustawiania ścieżek do plików źródłowych.

• src/sass/main.sass – wybierz plik main.sass
• src/sass/*.sass – zaznacza wszystkie pliki z rozszerzeniem sass
• src/sass/**/*.sass – zaznacza wszystkie pliki z rozszerzeniem sass we wszystkich podfolderach w folderze sass
• !src/sass/main.sass – wyjątek dla pliku main.sass
• [‘!src/sass/main.sass’, ‘src/sass/sekunda.sass’] – wykluczenie tablicy plików main.sass i second.sass
• src/sass/**/*.+(scss|sass) – zaznacza wszystkie pliki scss i sass we wszystkich podfolderach w sass

Teraz utwórz w folderze /src/sass/ plik główny.sass i zdefiniuj w nim kilka stylów:

kolor korpusu: czerwony rozmiar czcionki: 20px

Zapisz plik. Teraz możemy sprawdzić jak działa kompilacja. W konsoli uruchamiamy polecenie:

Sprawdzanie katalogu /src/css/. Powinien zawierać nowo skompilowany plik CSS. Czy ty widzisz? Świetnie! Przejdźmy dalej.

Automatyczne odświeżanie strony (LiveReload)

Przejdźmy do automatyzacji aktualizacji stron w przypadku ich zmiany, tj. ustalmy to Załaduj ponownie na żywo. Jest to jedno z najpopularniejszych zadań stojących przed Tobą. Będziemy potrzebować pakietu npm Synchronizacja przeglądarki aby automatycznie aktualizować przeglądarkę. Zainstalujmy to:

npm i --save-dev przeglądarka-sync

Połączmy się synchronizacja przeglądarki pakiet na początek gulpfile.js, tak jak to zrobiliśmy wcześniej w przypadku pakietów łyk I łyk-sas:

BrowserSync = require("synchronizacja przeglądarki");

Utwórzmy instrukcje dotyczące uruchamiania Browsersync:

gulp.task("synchronizacja przeglądarki", funkcja() ( przeglądarkaSync((serwer: (katalog bazowy: "src" ) )); ));

Jedyne, co zrobiliśmy, to wywołaliśmy Browsersync, aby uruchomić i określić katalog projektu z plikami źródłowymi. Istnieją inne ustawienia Synchronizacja przeglądarki. Można się o nich dowiedzieć z dokumentacji.

Dodajmy jeszcze jedno rura do instrukcji bezczelne, który będzie używany do aktualizacji stylów podczas kompilowania plików CSS. Określ parametr strumień: prawda. Umożliwi to aktualizację stylów przesyłanie strumieniowe, bez całkowitego przeładowania strony.

Pipe(browserSync.reload((strumień: prawda; )))

Następnie utworzymy instrukcję, która będzie monitorować zmiany w plikach i w razie potrzeby przeładować stronę.

gulp.task("watch", ["synchronizacja przeglądarki"], funkcja() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", BrowserSync.reload); gulp.watch("src/**/*.html", BrowserSync.reload); ));

Pozwól mi wyjaśnić. Instrukcje są wykonywane przed uruchomieniem synchronizacja przeglądarki, tj. Serwer WWW rozpoczyna debugowanie projektu. Następnie wykonywana jest sama instrukcja oglądać. Aby śledzić zmiany w plikach, których używamy łyk.watch().

Wewnątrz funkcji anonimowej wykonujemy 3 razy łyk.obejrzyj z dwoma parametrami. Pierwszy parametr to pliki, które należy monitorować, drugi to działania, które należy wykonać w przypadku zmiany plików, tj. Podążaj za wskazówkami bezczelne lub odśwież stronę.

Zwróć uwagę na to pierwsze łyk.obejrzyj. Zamiast przeglądarkaSync.przeładuj przekazujemy instrukcję w tablicy bezczelne, który należy wykonać, jeśli pliki zostały zmienione. Jak pamiętacie, w nim strumieniowo aktualizujemy style na stronie.

Minifikacja i łączenie plików

Prawie każdy projekt musi korzystać z bibliotek stron trzecich. Ich liczba może wynosić od 5 do nieskończoności. W związku z tym wszystkie muszą zostać uwzględnione w gotowym produkcie. Dobrze byłoby to wszystko zoptymalizować, a mianowicie:

• minimalizuj (kompresuj) używane biblioteki
• zmniejsz liczbę żądań do serwera, łącząc biblioteki w jeden plik

Dodajmy kilka bibliotek do plików źródłowych projektu. Do tego używam Altana, pakiet dla NPM. Zainstaluj Bowera:

Utwórz plik konfiguracyjny .bowerrc w katalogu głównym projektu dla Bower, gdzie mówimy, gdzie zapisać biblioteki:

(„katalog”: „src/libs/”)

Zainstalujmy na przykład bibliotekę jQuery i suwak przysiek:

altana i jquery slick-carousel

Teraz możemy rozpocząć konkatenację i kompresję bibliotek. W tym celu użyjemy pakietów łyk-połączenie I przełknąć-uglifyjs dotyczące plików JavaScript. Zainstalujmy je:

npm i --save-dev gulp-concat gulp-uglifyjs

Jeśli chodzi o CSS – package łyk-cssnano. Zainstalować:

npm i --save-dev gulp-cssnano

Zminifikowane pliki zwykle mają przyrostek .min. Pakiet pomoże nam go dodać zmiana nazwy. Zainstalować:

npm i --save-dev gulp-rename

Zacznijmy od podłączenia zainstalowanych wtyczek do gulpfile.js:

concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename");

JavaScript

Stwórzmy instrukcję, która pozwoli nam kompresować i scalać pliki JavaScript:

gulp.task("min-js", funkcja() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js"]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); ));

Wewnątrz anonimowej instrukcji funkcji min-js Najpierw określamy ścieżki do plików bibliotek JavaScript w postaci tablicy. Następnie za pomocą concat łączymy biblioteki w jeden plik libs.min.js brzydzić Js. Na koniec zapisz wynik w folderze /src/js/.

Instrukcje można sprawdzić za pomocą polecenia w konsoli:

W folderze /src/js/ plik się pojawi libs.min.js, który łączy i kompresuje pliki bibliotek JavaScript użyte w projekcie.

CSS

Stwórzmy go w katalogu /src/css/ plik libs.sass. Zaimportujemy do niego pliki bibliotek CSS. Na przykład za pomocą Bower pobrałem bibliotekę Bootstrap:

altana i bootstrap

Otwórzmy plik libs.sass i zaimportuj do niego plik CSS Bootstrap:

@import "src/libs/bootstrap/dist/css/bootstrap"

W ten sposób zbierzemy wszystkie pliki bibliotek CSS w jednym miejscu, czyli w pliku libs.sass za pomocą importu. Utwórzmy teraz instrukcję kompresji:

gulp.task("min-css", ["sass"] , funkcja() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(zmień nazwę(( przyrostek: ".min" ))) .pipe(gulp.dest("src/css")); ));

Przed kompresją kompilujemy CSS z SASS, korzystając z instrukcji bezczelne, co wskazaliśmy w tablicy po nazwie instrukcji min-css.

W pierwszej linii pobieramy konkretny plik, biblioteki.css. Następnie kompresujemy go za pomocą cssNano. Następnie za pomocą Przemianować dodaj przyrostek .min. Wynik zapisujemy w folderze /src/css/.

Sprawdzanie instrukcji:

Jeśli wszystko zrobiłeś poprawnie, to w folderze /src/css/ powinny pojawić się dwa pliki. biblioteki.css I libs.min.css. Porównaj ich rozmiary.

Automatyczne dodawanie prefiksów dostawców (Autoprefixer)

Korzystając z nowych funkcji CSS, musisz ustawić przedrostki dostawcy, aby style działały poprawnie. Robienie takich rzeczy ręcznie jest niewdzięcznym zadaniem. Więc poprośmy Gulpa, żeby zrobił to za nas.

Najpierw zainstalujmy autoprefikser gulp:

npm i --save-dev gulp-autoprefixer

Podłączmy zainstalowany pakiet do gulpfile.js:

autoprefixer = require("autoprefixer gulp");

OK, teraz możemy skorzystać autoprefiks w instrukcjach bezczelne. Zróbmy to po rozmowie .pipe(sass()), ponieważ Prefiksy dostawców muszą zostać umieszczone po konwersji SASS na CSS. Dodajmy nowy rura:

Pipe(autoprefixer([ "ostatnie 10 wersji" ], (kaskada: prawda )))

Pierwszy parametr autoprefiks przekazujemy tablicę, w której wskazujemy, że chcemy włączyć obsługę najnowszych 10 wersji przeglądarek. Drugim parametrem są ustawienia, gdzie wskazujemy, że chcemy zobaczyć na wyjściu piękny kod, tj. włączyć kaskadowanie.

Sprawdzamy dodając do główny.sass nowa nieruchomość przewód. Uruchom instrukcje bezczelne:

W główny.css powinny pojawić się prefiksy dostawców. To bardzo proste, wszystko działa automatycznie. Niesamowity!

Ostateczna wersja projektu

Ostatnią rzeczą, którą chciałbym poruszyć w tym przewodniku dla początkujących Gulp, jest ostateczna wersja projektu. Do tego potrzebujemy folderu /odległość/, który stworzyliśmy na samym początku. Należy go wyczyścić przed każdym montażem. W tym celu użyjemy pakietu NPM del. Zainstalujmy to:

npm i --save-dev del

Połączmy pakiet del V gulpfile.js:

del = wymagaj("del");

Stwórzmy instrukcje czysty aby wyczyścić katalog / odległość/ przed montażem:

gulp.task("clean", funkcja() ( return del.sync("odległość"); ));

Teraz możesz rozpocząć bezpośredni montaż projektu. Stwórzmy instrukcje zbudować:

gulp.task("build", ["clean", "min-css", "min-js"], funkcja() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest („dist/fonts”)); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("odległość")); ));

Przed wywołaniem instrukcji zbudować czyścimy folder /odległość/ w przypadku, gdy montaż został już przeprowadzony wcześniej. Następnie kompresujemy i łączymy pliki JavaScript i CSS, korzystając z instrukcji min-js I min-css odpowiednio. Jednocześnie kompilujemy SASS do CSS, ponieważ przed wykonaniem instrukcji min-css instrukcja jest wykonywana bezczelne.

Wewnątrz treści instrukcji kopiujemy przygotowane pliki projektu do katalogu z gotowym produktem /odległość/. Sprawdźmy instrukcje:

Wszystko działa świetnie! W folderze /odległość/ Teraz jest już gotowy produkt po złożeniu, który można wgrać na serwer produkcyjny.

Wniosek

Na tym kończy się przewodnik dla początkujących na temat projektów montażowych w Gulp. Jak widać, wszystko jest dość proste. Z biegiem czasu opublikuję jeszcze kilka postów na temat Gulpa i jego wtyczek, gdy sam dobrze je zrozumiem. W międzyczasie wykorzystuj i automatyzuj swoje rutynowe zadania związane z tworzeniem frontendu zgodnie z dostarczonymi instrukcjami. Jeśli masz jakieś pytania, zadaj je w komentarzach do wpisu.

(„nazwa”: „bybtc-landing”, „wersja”: „1.0.0”, „opis”: „Strona docelowa dla byBTC”, „main”: „index.js”, „skrypty”: ( „test” : "echo \"Błąd: nie określono testu\" && wyjście 1" ), "repository": ( "type": "git", "url": "git+https://github.com/Neuropassenger/bybtc- lądowanie.git" ), "słowa kluczowe": [ "landing" ], "autor": "Oleg Sokołow", "licencja": "ISC", "bugs": ( "url": "https://github.com /Neuropassenger/bybtc-landing/issues" ), "strona główna": "https://github.com/Neuropassenger/bybtc-landing#readme", "devDependency": ( "browser-sync": "^2.18.13" , "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-concat": "^2.6.1", " gulp-cssnano": "^2.1.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2" ) )

var gulp = require("gulp"), sass = require("gulp-sass"), BrowserSync = require("synchronizacja przeglądarki"), concat = require("gulp-concat"), uglifyJs = require("gulp- uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename"), autoprefixer = require("gulp-autoprefixer"), del = require("del"); gulp.task("sass", funkcja() ( return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(autoprefixer([ "ostatnie 10 wersji" ], (kaskada: prawda))) .pipe(gulp.dest("src/css")) .pipe(browserSync.reload((strumień: prawda))); )); gulp.task("min-css", ["sass"] , funkcja() ( return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(zmień nazwę(( przyrostek: ".min" ))) .pipe(gulp.dest("src/css")); )); gulp.task("min-js", funkcja() ( return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min .js"]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); )); gulp.task("synchronizacja przeglądarki", funkcja() ( przeglądarkaSync((serwer: (katalog bazowy: "src" ) )); )); gulp.task("watch", ["synchronizacja przeglądarki"], funkcja() ( gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src /js/**/*.js", BrowserSync.reload); gulp.watch("src/**/*.html", BrowserSync.reload); )); gulp.task("clean", funkcja() ( return del.sync("odległość"); )); gulp.task("build", ["clean", "min-css", "min-js"], funkcja() ( var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]).pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest („dist/fonts”)); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src(" src/*.html") .pipe(gulp.dest("odległość")); ));

Instalacja Gulpa jest dość prosta. Najpierw zainstaluj pakiet Gulp globalnie:

Npm install -g łyk

Następnie zainstaluj go w swoim projekcie:

Npm install --save-dev łyk

Korzystanie z Gulpa

Utwórzmy zadanie Gulp, aby zminimalizować jeden z naszych plików JavaScript. Utwórz plik o nazwie gulpfile.js. Zdefiniuje twoje zadania, które są uruchamiane za pomocą polecenia gulp.

Dodaj następujące polecenia do pliku gulpfile.js:

Var gulp = wymagaj("przełykaj"), uglify = wymagaj("przełykaj-uglify"); gulp.task("minify", funkcja () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("kompilacja")) ));

Zainstaluj gulp-uglify przez npm, uruchamiając npm install --save-dev gulp-uglify a następnie uruchom zadanie poprzez gulp minify. Załóżmy, że masz plik o nazwie app.js w folderze js, w folderze kompilacji zostanie utworzony nowy plik app.js, który będzie zawierał skompresowaną wersję js/app.js.

Co się tu naprawdę dzieje?

W naszym pliku gulpfile.js robimy kilka rzeczy. Najpierw ładujemy moduły gulp i gulp-uglify:

Var gulp = wymagaj("przełykaj"), uglify = wymagaj("przełykaj-uglify");

Następnie definiujemy zadanie o nazwie minify, które po uruchomieniu wywołuje funkcję podaną jako drugi argument:

Gulp.task("minifikacja", funkcja () ( ));

Na koniec, i to jest najtrudniejsza część, definiujemy, co powinno robić nasze zadanie:

Gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("kompilacja"))

Jeśli nie znasz wątków, a większość programistów front-endu nie, powyższy kod nic Ci nie powie.

Strumienie

Strumienie pozwalają niektórym danym przejść przez serię zazwyczaj małych funkcji, które modyfikują dane, a następnie przekazują je do następnej funkcji.

W powyższym przykładzie funkcja gulp.src() pobiera ciąg znaków pasujący do pliku lub zestawu plików i tworzy strumień obiektów reprezentujących te pliki. Następnie przekazują (lub przepływają) do funkcji uglify(), która pobiera obiekty plikowe i zwraca nowe, zminimalizowane obiekty plikowe. Wynik ten jest następnie przekazywany do funkcji gulp.dest(), która zapisuje zmodyfikowane pliki.

Oto, co się dzieje w formie schematycznej:

Gdy jest tylko jedno zadanie, funkcja nie robi nic. Weź jednak pod uwagę następujący kod:

Gulp.task("js", funkcja () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("default")) .pipe(uglify() ) .pipe(concat("app.js")) .pipe(gulp.dest("kompilacja")); ));

Aby uruchomić to samodzielnie, zainstaluj gulp, gulp-jshint, gulp-uglify i gulp-concat.

To zadanie pobiera wszystkie pliki odpowiadające js/*.js (innymi słowy wszystkie pliki JavaScript w folderze js), uruchamia na nich JSHint, drukuje raport, minimalizuje każdy plik, a następnie łączy je, przechowując w kompilacji /app.js. W formie diagramu:

Jeśli znasz Grunta, zauważysz, że różni się to od sposobu, w jaki działa Grunt. Grunt nie używa wątków. Zamiast tego pobiera pliki, uruchamia jedno zadanie dla każdego pliku i zapisuje w nowych plikach, powtarzając cały proces dla każdego zadania. W wyniku wielu wywołań systemu plików Grunt jest wolniejszy niż Gulp.

Aby lepiej zrozumieć strumienie, przeczytaj Podręcznik transmisji.

łyk.src()

Funkcja gulp.src() pobiera jeden lub więcej plików lub tablicę i zwraca strumień, który można przekazać do wtyczek.

Pozostałe dwie wtyczki są bardziej przejrzyste: funkcja uglify() minimalizuje kod, a funkcja concat("app.js") łączy wszystkie pliki w jeden o nazwie app.js.

wtyczka typu gulp-load

Moduł, który uważam za całkiem przydatny, nazywa się gulp-load-plugins. Automatycznie ładuje wszystkie wtyczki Gulp z pliku package.json i dołącza je do obiektu. Główne zastosowanie jest następujące:

Var gulpLoadPlugins = require("gulp-load-plugins"), wtyczki = gulpLoadPlugins();

Możesz napisać wszystko w jednej linii ( var wtyczki = require("gulp-load-plugins")();), ale nie jestem wielkim fanem jednoliniowego wywołania wymagającego.

Po uruchomieniu tego kodu obiekt plugins będzie zawierał wtyczki o nazwach w stylu CamelCase (na przykład gulp-ruby-sass zostanie załadowany jako plugins.rubySass ). Można ich używać w zwykły sposób. Na przykład nasze zadanie js zostanie skrócone w następujący sposób:

Var gulp = require("gulp"), gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task("js", funkcja () ( return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("domyślne")) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("kompilacja")); ));

Do tego dołączony jest plik package.json, który zawiera coś podobnego do tego:

( "devDependency": ( "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": " ~3,5,6 cala) )

Ten przykład jest w rzeczywistości niewiele krótszy. Jednak w przypadku dużych i złożonych plików Gulp zmniejszy to blok przesyłania pliku do jednej lub dwóch linii.

Wersja 0.4.0 wtyczek gulp-load-opublikowana na początku marca dodała leniwe ładowanie wtyczki, co poprawia wydajność. Wtyczki nie są ładowane, dopóki nie zostaną wywołane, co oznacza, że ​​nie musisz się martwić, że nieużywane wtyczki w package.json będą miały wpływ na wydajność (chociaż prawdopodobnie i tak powinny zostać usunięte). Innymi słowy, jeśli uruchomisz zadanie, które wymaga tylko dwóch wtyczek, nie załaduje wszystkich wtyczek wymaganych przez inne zadania.

Śledzenie plików

Gulp ma możliwość obserwowania zmian w plikach i wykonywania zadania lub zadań po wykryciu zmian. Ta funkcja jest niezwykle przydatna (dla mnie prawdopodobnie jedna z najbardziej przydatnych w Gulp). Możesz zapisać plik Less, a Gulp przekształci go w CSS i zaktualizuje przeglądarkę bez żadnego działania z Twojej strony.

Aby obejrzeć plik lub pliki, użyj funkcji gulp.watch(), która pobiera wzorzec plików lub ich tablicę (np. gulp.src()) lub tablicę zadań w celu ich uruchomienia lub wykonania funkcji wywołania zwrotnego .

Załóżmy, że mamy zadanie kompilacji, które zamienia nasze pliki szablonów na HTML i chcemy zdefiniować zadanie oglądania, które obserwuje zmiany w szablonach i uruchamia zadanie konwertujące je do formatu HTML. Funkcję zegarka możemy wykorzystać w następujący sposób:

Gulp.task("watch", funkcja () ( gulp.watch("templates/*.tmpl.html", ["kompilacja"]); ));

Teraz, gdy zmienisz plik szablonu, zostanie uruchomione zadanie kompilacji, które utworzy kod HTML.

Zamiast tablicy zadań możesz także nadać watch funkcję wywołania zwrotnego. W tym przypadku funkcja otrzymuje obiekt zdarzenia zawierający informację o zdarzeniu, które wywołało funkcję:

Gulp.watch("templates/*.tmpl.html", funkcja (zdarzenie) ( console.log("Typ zdarzenia: " + event.type); // dodano, zmieniono lub usunięto console.log("Ścieżka zdarzenia: " + event.path); // ścieżka do pliku ));

Inną charakterystyczną cechą gulp.watch() jest to, że zwraca obserwatora. Użyj go, aby nasłuchiwać dodatkowych zdarzeń lub dodawać pliki do zegarka. Na przykład, aby jednocześnie uruchomić listę zadań i wywołać funkcję, możesz dodać detektor do zdarzenia zmiany po powrocie obserwatora:

Var watcher = gulp.watch("templates/*.tmpl.html", ["kompilacja"]); watcher.on("change", funkcja (zdarzenie) ( console.log("Typ zdarzenia: " + event.type); // dodano, zmieniono lub usunięto console.log("Ścieżka zdarzenia: " + event.path); //ścieżka do pliku ));

Oprócz zdarzenia zmiany możesz odsłuchać szereg innych wydarzeń:

• koniec
  Uruchamia się po zakończeniu działania obserwatora (co oznacza, że ​​zadania i wywołania zwrotne nie będą już wywoływane w przypadku zmiany plików).
• błąd
  Uruchamiany w przypadku wystąpienia błędu.
• gotowy
  Uruchamia się, gdy pliki zostaną znalezione i gotowe do śledzenia.
• nie pasuje
  Uruchamia się, gdy żaden plik nie pasuje do żądania.

Obiekt obserwatora zawiera także pewne metody, które można wywołać:

• obserwator.koniec()
  Zatrzymuje obserwatora (nie będą już wywoływane żadne zadania ani wywołania zwrotne).
• obserwator.files()
  Zwraca listę plików monitorowanych przez obserwatora.
• obserwator.add(glob)
  Dodaje do obserwatora pliki pasujące do określonego wzorca globalnego (pobiera również opcjonalną funkcję wywołania zwrotnego jako drugi argument).
• watcher.remove(ścieżka pliku)
  Usuwa określony plik z obserwatora.

13 grudnia 2017 o godzinie 17:40

Rozumiemy i pracujemy z łykiem

• JavaScript

Cześć wszystkim. Jeśli jesteś w jakikolwiek sposób związany z JS, prawdopodobnie słyszałeś o takiej aplikacji jak gulp. A może nawet z tego korzystali. Z własnego doświadczenia mogę powiedzieć, że może być trudno „ogarnąć”, jak z tym pracować, chociaż klucz do zrozumienia leży na powierzchni. Dlatego publikuję ten materiał, mając nadzieję, że będzie przydatny.

Na podstawie tego materiału powstał także film, dzięki czemu możesz wybrać, w jakiej formie go skonsumujesz.

Jeśli porównać Gulpa z innymi popularnymi systemami montażu, to tak jakby porównać gotowy quadkopter typu „kupiłem i poleciał” z zestawem do samodzielnego montażu drona. Tak, wystartujesz dopiero następnego dnia, ale Twoje ręce mają większą elastyczność i kontrolę, zwłaszcza jeśli masz niestandardowe zadanie.

Tak naprawdę po przekroczeniu progu wejścia łyk nie wygląda na aż tak skomplikowany, a momentami jest wręcz zrozumiały i logiczny. Jednak bez odpowiedniego przygotowania osiągnięcie takiego stanu może być trudne. Zanurzmy się w to i przyjrzyjmy się zasadom, na których zbudowany jest gulp.

Przyjdźmy z daleka. W ekosystemie nodejs istnieje coś takiego jak wątki lub strumień. Ze względu na złożoność tłumaczenia wątki nazywane są także wątkami programu wielowątkowego. W naszym przypadku strumień jest obiektem reprezentującym dane przesyłane strumieniowo i jest to zupełnie inna koncepcja.

Strumienie te oferują zatem wygodny interfejs do asynchronicznej pracy z danymi. Cały proces odczytu/zapisu jest obsługiwany przez silnik węzła i odpowiednie wywołania zwrotne mamy dopiero wtedy, gdy pojawi się nowa porcja danych, gdy wystąpi błąd, gdy przepływ się zakończy itp. Pozwala to osiągnąć wydajność we/wy przy minimalnym wysiłku ze strony programisty.

Stała fs = wymagaj("fs"); const input = fs.createReadStream("mójplik"); input.on("dane", (fragment) => ( console.log(fragment); )); input.on("end", () => ( console.log("odczyt pliku"); ));
Prawie wszystko może być strumieniami w nodejs, od plików lub ciągów znaków po gniazda. Na przykład w słynnym frameworku Express żądanie i odpowiedź HTTP to nic innego jak strumienie. Strumienie mogą być tylko do odczytu, tylko do zapisu lub jednym i drugim.

Strumienie mają jedną użyteczną funkcję: można je łączyć w łańcuch zwany rurą. Dzięki temu możemy połączyć ze sobą kilka wątków i zarządzać nimi jak jednym. Wyjście jednego wątku trafia na wejście następnego i tak dalej, aż do końca. Jak można się domyślić z tłumaczenia słowa rura, jest ono bardzo podobne do rurociągu.

Pozwala to określić wymagany przepływ danych (znowu trudność w tłumaczeniu. Mamy tu na myśli przepływ, czyli prąd) tu i teraz, bez czekania, aż dane staną się dostępne.

Na przykład w ten sposób możemy określić, co w rezultacie chcemy dać, a „w jaki sposób” dawać zajmuje się już sam silnik.

Stała fs = wymagaj("fs"); const express = require("express"); var aplikacja = express(); app.get("/", funkcja (req, res) ( fs.createReadStream("mój plik") .pipe(res); )); aplikacja.słuchaj(3000);
Należy pamiętać, że moduł obsługi żądań kończy działanie jeszcze przed otwarciem pliku – resztą zajmuje się silnik węzła.

Gulp opiera się na podobnym podejściu. To jego zaleta, ale i wada. Przynajmniej można to uznać za wadę ze względu na zamieszanie, jakie powstaje, ponieważ gulp używa innych, podobnych, ale niekompatybilnych wątków. Gulp ściśle współpracuje z systemem plików, dlatego wykorzystuje strumienie, które reprezentują nie tyle strumień danych, ile pojedyncze wirtualne pliki, każdy z własną zawartością.

Jeśli kiedykolwiek słyszałeś o winylu, jest to dokładnie implementacja wątków, których używa gulp. Jeśli podejmiemy standardowe zadanie dla galpa i sprawdzimy, co jest w środku, przekonamy się, że przy każdym wywołaniu zdarzenia data otrzymamy obiekt pliku, który zawiera wszystkie niezbędne informacje: nazwę pliku, ścieżkę do pliku, katalog roboczy i oczywiście jego zawartość.

Stały łyk = wymagaj("łyk"); gulp.task("domyślne", funkcja() ( gulp.src("./*.js") .on("dane", funkcja(plik) ( console.log("wywołanie zwrotne danych"); console.log( file.inspect()); /* Wyświetla: * wywołanie zwrotne danych * > *odwołanie danych* > */ )).pipe(gulp.dest("dist/")); ));
Treść może być prezentowana w dwóch formatach: jako już odczytany bufor lub jako natywny strumień węzła. Każdy stopień potoku galp pobiera takie pliki jako dane wejściowe, dokonuje pewnego rodzaju transformacji i przekazuje je na wyjście następnego łańcucha. Ostatni łańcuch zwykle po prostu zapisuje je na dysku.

Pipe(gulp.dest("odległość/"));
Uświadomienie sobie, że wątki w gulp są różne, prowadzi do oświecenia i zrozumienia, ponieważ wyjaśnia większość problemów i błędów.

Spójrzmy na prawdziwy przykład. Chcesz użyć przeglądarki do połączenia plików JS. Idziesz i znajdujesz wtyczkę gulp-browserify. Ale widzisz notatkę mówiącą, że wtyczka jest przestarzała, tj. Przestarzały.

Jako dobrze wychowany programista odrzucasz tę opcję i szukasz rozwiązania, które nie jest przestarzałe. Znajdź oficjalne przepisy z gulp, a przekonasz się, że przeglądarka działa bezpośrednio z gulp. Cóż, bezpośrednio, przez warstwę, która po prostu konwertuje natywny strumień węzła na strumień winylu, który łyk rozumie. Bez tego nic by nie działało, bo to różne wątki.

Jeśli chcesz napisać własną transformację, możesz skorzystać z tego szablonu.
Jak widać, tutaj wszystko jest proste: dla każdego pliku zostanie wywołany nasz handler, który dokona modyfikacji. Możemy zrobić, co chcemy: zmienić zawartość pliku, zmienić nazwę pliku, usunąć plik lub dodać jeszcze kilka nowych plików do strumienia.

Jak pamiętamy, zawartość pliku w strumieniu winylu może być reprezentowana jako bufor lub strumień danych. Jednak nie jest konieczne wspieranie obu. Zawsze możesz skorzystać z pakietu

• Tłumaczenie

Ten artykuł jest pierwszym z serii poświęconej tematowi oswajania CSS. Dzisiaj przyjrzymy się technologii Reset CSS.

Dlaczego jest to konieczne?

Każda przeglądarka ustawia własne domyślne wartości stylu dla różnych elementów HTML. Używając CSS Reset, możemy wyrównać tę różnicę, aby zapewnić kompatybilność stylów w różnych przeglądarkach.

Na przykład używasz elementu A w swoim dokumencie. Większość przeglądarek, takich jak Internet Explorer i Firefox, dodaje łącze Kolor niebieski I podkreślenie. Wyobraźmy sobie jednak, że za pięć lat ktoś zdecyduje się stworzyć nową przeglądarkę (nazwijmy ją UltraBrowser). Twórcom przeglądarki nie spodobał się niebieski kolor i zirytowało ich podkreślenie, dlatego postanowili wyróżnić linki w czerwonym I pogrubiony. Opiera się to na tym, że jeśli ustawisz podstawową wartość stylu dla elementu A, wtedy mamy gwarancję, że będzie tak, jak chcesz, a nie tak, jak wolą go wyświetlać programiści UltraBrowser.

Ale teraz nie mamy w ogóle wcięć, także między poszczególnymi akapitami! Co robić? Nie kłam i nie bój się: poniżej naszego resetu opiszemy regułę, której potrzebujemy. Można to zrobić na różne sposoby: określ wcięcie na dole lub na górze akapitu, określ je w procentach, pikselach lub em.

Co najważniejsze, przeglądarka działa teraz według naszych zasad, a nie my według jej zasad. Postanowiłem zrobić to w ten sposób:

* ( margines: 0; dopełnienie: 0; ) p ( margines: 5px 0 10px 0; )

W rezultacie otrzymaliśmy to, co widać w trzecim przykładzie.

Możesz utworzyć własne style resetowania, jeśli rozwiązujesz konkretny problem w swoim projekcie. Mimo to nie ma przewodnika krok po kroku dotyczącego tworzenia własnego resetu CSS. Polegaj na własnych zasadach i własnym stylu.

Aby pomóc Ci dokonać właściwego wyboru, podaję kilka dodatkowych linków:

1. Mniej znaczy więcej — mój wybór Reset CSS (Ed Elliott).

2. Reset CSS jest pierwszą rzeczą, którą powinna zobaczyć przeglądarka

Resetowanie stylów po ustawieniu własnych stylów dla elementów jest złym podejściem. W takim przypadku nie należy oczekiwać niczego dobrego od wyświetlacza przeglądarki. Pamiętaj, że zawsze powinieneś najpierw uwzględnić CSS Reset, a dopiero potem wszystkie pozostałe style.

Tak, rozumiem, zabrzmiało to zabawnie, ale to jeden z głównych błędów programistów, młodych i starych. Wiele osób po prostu o tym zapomina.

Niektórzy mogą zadać logiczne pytanie: dlaczego tak się dzieje? Odpowiedź jest prosta: reguły zapisane niżej w tekście pliku CSS (a jeszcze niżej w kolejności w dokumencie) zastępują reguły zadeklarowane wcześniej.

Nie odbiegajmy za bardzo od tematu i kontynuujmy. Zastosujmy style Erica Meyera do naszego przykładu, ale Po opisy naszych właściwości, jak pokazano w przykładzie 4. Matematycy powiedzieliby, co następuje: „To właśnie musieliśmy udowodnić”.

3. Użyj osobnego dokumentu CSS do resetowania CSS

Muszę (nie, w żadnym wypadku nie byłem zmuszony) wspomnieć o tej radzie. Używanie osobnego pliku do resetowania CSS jest powszechną praktyką wspieraną przez dużą liczbę programistów.

W rzeczywistości przyjmuję stanowisko stworzenia jeden duży plik CSS ze względu na wyższą wydajność tej metody. Ale w tej kwestii jestem skłonny zgodzić się z większością: CSS Reset należy umieścić w osobnym pliku (zwykle nazywanym reset.css). W takim przypadku możesz używać go w różnych projektach bez konieczności oddzielania go od innych reguł CSS.

4. Staraj się unikać używania selektora uniwersalnego

Chociaż ta koncepcja działa, jej użycie często nie jest pożądane ze względu na niekompatybilność z niektórymi przeglądarkami (na przykład ten selektor nie jest poprawnie przetwarzany w przeglądarce Internet Explorer). Powinieneś używać tej techniki tylko w przypadku prostych, małych, statycznych i przewidywalnych stron (jeśli musiałeś to zrobić).

Ta rada jest szczególnie ważna, gdy tworzysz rozwiązania takie jak motywy CMS. Nie można z góry przewidzieć, w jaki sposób zostanie on wykorzystany ani w jaki sposób zostanie zmodyfikowany. Lepiej opisać podstawowe reguły CSS dla wszystkich elementów, niż wykorzystywać w tym celu nieprzewidywalny (choć mniejszy) mechanizm selektorów uniwersalnych.

5. Unikaj zbędnych opisów właściwości podczas korzystania z resetowania CSS

Innym powodem, dla którego nie lubię osobnego pliku do resetowania CSS, jest potencjalna redundancja kolejnych deklaracji właściwości CSS. Powtarzanie własnych stylów w całym zestawie plików CSS jest złym manierem i należy go unikać. Oczywiście czasami jesteśmy zbyt leniwi, aby skrupulatnie przeglądać zestaw stylów i łączyć niektóre z nich, ale powinniśmy przynajmniej spróbować!

Wróćmy do resetowania CSS Erica. Ustawia domyślne wartości wysokości linii, koloru i tła elementu ciało w następujący sposób:

treść (wysokość linii: 1; kolor: czarny; tło: biały; )

Załóżmy, że wiesz już, jak będzie wyglądał dany element ciało:

1. kolor tła: #cccccc;
2. kolor: #996633;
3. Chcesz powtórzyć określony obraz tła w poziomie.

W takim przypadku nie ma potrzeby tworzenia nowego selektora opisującego Twoje właściwości - możesz po prostu uwzględnić je w Resetowaniu CSS. Zróbmy to:

body ( wysokość linii: 1; kolor: #996633; tło: #ccc url(tiled-image.gif) powtórz-x u góry po lewej; )

Nie bój się modyfikować samego resetu CSS. Dostosuj to do siebie, spraw, żeby działało dla Ciebie. Zmieniaj, przestawiaj, usuwaj i dodawaj w zależności od potrzeb w konkretnym przypadku.

Eric Meyer powiedział na ten temat następująco: „nie jest to przypadek, w którym każdy powinien używać CSS Reset bez zmian”.