Pierwsze kroki z Gulp.js

Gulp to narzędzie oparte na Javascript, które pozwala na automatyzację bitów przepływu pracy. Automatyzacja może zaoszczędzić dosłownie kilka godzin dziennie. Niezależnie od tego, czy jesteś programistą, czy projektantem, który od czasu do czasu tworzy makiety HTML, zachęcam do wglądu.

W tym artykule przyjrzymy się podstawom używania Gulpa - od instalacji po podstawową składnię i kilka przykładów. Pod koniec artykułu powinieneś być w stanie znajdź, zainstaluj i użyj pakietów stworzonych przez innych dla Gulp skompilować SASS, zoptymalizować obrazy, utworzyć sprite'y, połączyć pliki i nie tylko!

Instalowanie Gulp

Nie martw się, instalacja jest bardzo prosta. Będziemy musieli korzystać z terminala w systemie OSX i Linux lub w wierszu polecenia systemu Windows. Od tej chwili będę odnosić się do niego jako Terminalu.

Otwórz go i wpisz npm -v i naciśnij enter. Jeśli widzisz numer wersji, masz już zainstalowany Node - jest to zależność dla Gulp.

Jeśli dostaniesz “nie znaleziono polecenia” (lub podobny błąd), przejdź na stronę pobierania Node.js i wybierz odpowiedni pakiet dla swojego systemu. Po zainstalowaniu polecenie npm będzie dostępne w terminalu.

Instalacja Gulp jest równie łatwa. Wklej następujące polecenie do terminala, to jest to:

npm install - łyk globalny

Spowoduje to zainstalowanie polecenia Gulp, które będzie dostępne globalnie w twoim systemie.

Dodawanie łyka do projektu

Gulp jest teraz zainstalowany, ale musimy go dodać do każdego projektu, dla którego jest nam potrzebny, oddzielnie. Utwórz teraz pusty folder i przejdź do niego w swoim terminalu. Będąc w folderze projektu, użyj następującego polecenia:

npm install --save-dev gulp

To powinno utworzyć folder node_modules i plik npm-debug.log w folderze projektu. Są one używane przez Gulp do zrobienia czegoś w twoim projekcie, nie musisz o nich myśleć na tym etapie.

Powodem, dla którego musimy dodać Gulp do każdego konkretnego projektu, jest to każdy projekt ma inne wymagania. Można zadzwonić do SASS, innego do Less. Można użyć Coffeescript, drugi nie, i tak dalej.

Plik Gulp

Plik Gulp to miejsce, w którym dzieje się magia wymagane automatyzacje i kiedy chcesz, żeby się wydarzyły. Utwórzmy puste zadanie domyślne, tworząc plik o nazwie gulpfile.js i wklejenie do niego następującego kodu.

var gulp = require ('gulp'); gulp.task ('default', function () // To na razie nic nie robi, wkrótce dodamy funkcjonalność);

Po zapisaniu tego pliku możesz wrócić do swojego terminala i samodzielnie uruchomić polecenie przeładowania. Gulp wykrywa, w którym projekcie się znajduje i uruchamia domyślne zadanie - to, które właśnie stworzyliśmy. Powinieneś zobaczyć coś takiego:

Nic się tutaj naprawdę nie dzieje, ponieważ zadanie jest puste, ale działa dobrze. Przejdźmy teraz do kilku właściwych przykładów!

Kopiowanie pliku

To jest nudne, przyznam tyle, ale pomoże ci zrozumieć, co się dzieje łatwo.

W folderze projektu utwórz plik o nazwie to_copy.txt , i folder o nazwie dev. Przejdźmy do naszego pliku Gulp i utwórzmy nowe zadanie o nazwie Kopiuj.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Pierwsza linia definiuje zadanie o nazwie kopia. W tym celu używamy gulp.src, aby określić, które pliki kierujemy za pomocą tego zadania - w tym przypadku jest to pojedynczy plik o nazwie to_copy.txt.

Następnie przesyłamy te pliki do funkcji gulp.dest, która określa, gdzie chcemy umieścić te pliki - użyłem katalogu dev.

Wróć do swojego terminala i wpisz kopia łyka aby uruchomić to zadanie, powinno skopiować podany plik do określonego katalogu, coś takiego:

Polecenie potoku znajduje się w samym sercu Gulp. Jest to skuteczny sposób przenoszenia danych między poleceniami. Komenda src określa pliki, które są przesyłane potokiem do komendy dest. W bardziej złożonych scenariuszach przedkładamy nasze pliki do innych poleceń przed określeniem miejsca docelowego.

Należy również pamiętać, że źródło może być podane jako pojedynczy plik lub wiele plików. Jeśli mamy folder o nazwie produkcja i chcemy przenieść wszystkie pliki z naszego rozwój do folderu, możemy użyć następującej komendy:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Znak gwiazdy dopasuje wszystko w katalogu. Możesz także dopasować wszystkie pliki we wszystkich podkatalogach i wykonywać inne fantazyjne dopasowania. Zajrzyj do dokumentacji globalnej węzła, aby uzyskać więcej informacji.

Kompilacja SASS

Kompilowanie arkusza stylów z plików SASS jest typowym zadaniem dla programistów. Można to zrobić z Gulpem całkiem łatwo, musimy jednak trochę się przygotować. Oprócz podstawowych poleceń, takich jak src, dest i wiele innych, cała funkcjonalność jest dodawana za pomocą dodatków innych firm. Oto jak je wykorzystuję.

Piszę SASS Gulp w Google, pierwszym rezultatem jest zazwyczaj to, czego potrzebuję, powinieneś znaleźć stronę dla pakietu SASS. Pokazuje, jak go zainstalować (npm zainstaluj gulp-sass). Prawdopodobnie będziesz musiał użyć sudo, aby zainstalować go jako administrator, więc prawdopodobnie będzie (sudo npm zainstalować gulp-sass) .

Po zakończeniu możesz użyć składni, którą nakazuje pakiet, aby skompilować kod. W tym celu utwórz plik o nazwie styles.scss o następującej treści:

$ primary: # ff9900; body background: $ primary; 

Teraz utwórz następujące zadanie Gulp w pliku Gulp.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Przed uruchomieniem polecenia nie zapomnij „wymagać” pakietu na górze pliku Gulp w następujący sposób:

var sass = require ('gulp-sass');

Kiedy uciekasz łyk sass, wszystkie pliki z rozszerzeniem scss zostaną potokowane do funkcji sass, która przekonwertuje je na css. Są one następnie przesyłane do funkcji docelowej, która umieszcza je w folderze css.

Oglądanie plików i folderów

Jak dotąd jest to przydatne, ale wciąż musimy wpisać polecenie za każdym razem chcemy uruchomić zadanie, które nie jest zbyt wydajne, zwłaszcza jeśli chodzi o zmiany arkusza stylów. Gulp umożliwia oglądanie plików pod kątem zmian i automatyczne uruchamianie poleceń.

W pliku Gulp utwórz polecenie o nazwie zautomatyzować który użyje polecenia watch do obejrzenia zestawu plików pod kątem zmian i uruchomi określone polecenie po zmianie pliku.

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Jeśli wpiszesz automatyzuj łyk w terminalu rozpocznie i zakończy zadanie, ale nie powróci do monitu, ponieważ monitoruje zmiany. Określiliśmy, że chcemy oglądać wszystkie pliki scss w katalogu głównym, a jeśli się zmienią, chcemy uruchomić polecenie sass, które wcześniej skonfigurowaliśmy.

Jeśli teraz zmienisz swój plik style.scss, powinien on zostać automatycznie skompilowany do pliku css w katalogu css.

Uruchamianie wielu zadań

Istnieje wiele sytuacji, w których możesz chcieć uruchomić wiele zadań. Podczas oglądania folderu javascript możesz skompilować konkatenację dwóch plików, a następnie przystąpić do ich minimalizacji. Są dwa sposoby, aby to zrobić.

Jeśli zadania są powiązane, lubię połącz je. Dobrym przykładem może być konkatenacja i minifikacja plików javascript. Najpierw potokujemy nasze pliki do akcji konkatowej, a następnie potokujemy je, aby je wypłukać, a następnie wykorzystujemy funkcję docelową do ich wyprowadzenia.

Jeśli zadania nie są ze sobą powiązane, możesz wywołać wiele zadań. Przykładem może być zadanie, w którym chcemy połączyć i zminimalizować nasze skrypty, a także skompilować nasz SASS. Oto pełny plik Gulp, jak by to wyglądało.

var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Jeśli wpiszesz skrypty łyka do terminala wszystkie pliki javascript w katalogu js będą łączone, wysyłane do katalogu głównego, a następnie usuwane i zapisywane w katalogu głównym.

Jeśli wpiszesz łyk sass, wszystkie twoje pliki scss zostaną skompilowane i zapisane w katalogu css.

Jeśli wpiszesz łyk (zadanie domyślne), twoje skrypty zadanie zostanie uruchomione, a następnie twoje style zadanie.

The automatyzuj łyk zadanie obserwuje wiele folderów w poszukiwaniu zmian w naszych plikach scss i js i wykona oba zadania, które zdefiniowaliśmy, jeśli wykryta zostanie zmiana.

Przegląd

Używanie Gulpa nie jest trudne, w rzeczywistości wiele osób woli go nad Gruntem ze względu na prostszą składnię. Zapamiętaj kroki, które należy podjąć podczas tworzenia nowej automatyzacji:

• Wyszukaj wtyczkę
• Zainstaluj wtyczkę
• Wymagaj wtyczki w pliku Gulp
• Użyj składni w dokumentacji

Pięć poleceń dostępnych w Gulp (zadania, uruchamianie, oglądanie, src, dest) jest jedynymi, które musisz wiedzieć, wszystkie dodatki innych firm mają świetną dokumentację. Oto lista rzeczy, z których korzystam, od których możesz zacząć teraz:

• Optymalizacja obrazów dzięki optymalizacji obrazu gulp
• Tworzenie obrazków obrazków z gulp-sprite
• Łączenie plików za pomocą gulp-concat
• Minifikowanie plików z hakiem
• Usuwanie plików za pomocą gulp-del
• JavaScript linting z gulp-jslint
• JSON linting with gulp-jsonlint
• Autoprefix CSS z gulp-autoprefixer
• Szukaj i zamień za pomocą gulp-frep
• Zminimalizuj CSS za pomocą gulp-minify-css