gulp.js
 | |
| Oryginalni autorzy | Erica Schoffstalla |
|---|---|
| Deweloperzy | Blaine Bublitz, Eric Schoffstall |
| Pierwsze wydanie | 26 września 2013 |
| Wersja stabilna | 4.0.2 / 6 maja 2019
|
| Magazyn | |
| Napisane w | JavaScript |
| System operacyjny | Linuks , macOS , Windows |
| Platforma | Node.js |
| Typ | zestaw narzędzi |
| Licencja | Licencja MIT |
| Strona internetowa |
|
gulp to zestaw narzędzi JavaScript o otwartym kodzie źródłowym , stworzony przez Erica Schoffstalla, używany jako system budowania strumieniowego (podobny do bardziej skoncentrowanego na pakiecie Make ) we front-endowym tworzeniu stron internetowych .
Jest to runner zadań zbudowany na Node.js i npm , używany do automatyzacji czasochłonnych i powtarzalnych zadań związanych z tworzeniem stron internetowych, takich jak minifikacja , konkatenacja, usuwanie pamięci podręcznej, testy jednostkowe , linting , optymalizacja itp.
gulp używa metody kodowania ponad konfiguracją do definiowania swoich zadań i polega na swoich małych, jednofunkcyjnych wtyczkach do ich wykonywania. Ekosystem gulp obejmuje ponad 3500 takich wtyczek.
Przegląd
gulp to narzędzie do budowania w JavaScript zbudowane na strumieniach węzłów . Strumienie te ułatwiają łączenie operacji na plikach za pośrednictwem potoków . gulp odczytuje system plików i potokuje dane z jednej wtyczki przeznaczonej do jednego celu do drugiej za pomocą .pipe () operator, wykonujący jedno zadanie na raz. Oryginalne pliki nie zostaną naruszone, dopóki wszystkie wtyczki nie zostaną przetworzone. Można go skonfigurować tak, aby modyfikował oryginalne pliki lub tworzył nowe. Daje to możliwość wykonywania złożonych zadań poprzez łączenie licznych wtyczek. Użytkownicy mogą również pisać własne wtyczki, aby zdefiniować własne zadania. W przeciwieństwie do innych biegaczy zadań, które uruchamiają zadania według konfiguracji, gulp wymaga znajomości JavaScript i kodowania, aby zdefiniować swoje zadania. gulp to system kompilacji, co oznacza, że oprócz uruchamiania zadań jest w stanie kopiować pliki z jednej lokalizacji do drugiej, kompilować , wdrażać , tworzenie powiadomień, testy jednostkowe, linting itp.
Potrzebny biegacz zadań
Programy do uruchamiania zadań, takie jak gulp i Grunt , są zbudowane na Node.js, a nie npm , ponieważ podstawowe skrypty npm są nieefektywne podczas wykonywania wielu zadań. Mimo że niektórzy programiści preferują npm , ponieważ mogą być proste i łatwe do wdrożenia, istnieje wiele sposobów, w których gulp i Grunt wydają się mieć przewagę nad sobą, a domyślne skrypty są dostarczane. Grunt uruchamia zadania, przekształcając pliki i zapisując je jako nowe w folderach tymczasowych, a dane wyjściowe jednego zadania są traktowane jako dane wejściowe dla innego i tak dalej, aż dane wyjściowe dotrą do folderu docelowego. Wiąże się to z wieloma wejściami/wyjściami połączeń i tworzenia wielu plików tymczasowych. Podczas gdy strumienie gulp przez system plików nie wymagają żadnej z tych tymczasowych lokalizacji, zmniejszając w ten sposób liczbę wywołań we/wy, poprawiając wydajność. Grunt używa plików konfiguracyjnych do wykonywania zadań, podczas gdy gulp wymaga zakodowania swojego pliku kompilacji. W Gruncie każda wtyczka musi być skonfigurowana tak, aby dopasować jej lokalizację wejściową do wyjścia poprzedniej wtyczki. W gulp wtyczki są automatycznie układane w potoki.
Operacja
Zadania gulp są uruchamiane z powłoki interfejsu wiersza poleceń (CLI) i wymagają dwóch plików, package.json , który służy do wyświetlania różnych wtyczek do gulp i gulpfile.js (lub po prostu gulpfile ), te, zgodnie z kompilacją konwencji narzędzi, często znajdują się w katalogu głównym kodu źródłowego pakietu. Plik gulp zawiera większość logiki potrzebnej gulpowi do uruchamiania zadań kompilacji. Najpierw ładowane są wszystkie niezbędne moduły, a następnie definiowane są zadania w pliku gulp. Wszystkie niezbędne wtyczki określone w pliku gulp są wymienione w sekcji devDependencies w Domyślnym zadaniu uruchamianym przez $łyk . Poszczególne zadania mogą być definiowane przez gulp.task i są uruchamiane przez gulp <task> <othertask> . Złożone zadania są definiowane poprzez łączenie wtyczek za pomocą .pipe() .
Anatomia pliku gulpfile
gulpfile to miejsce, w którym wszystkie operacje są zdefiniowane w gulp. Podstawowa anatomia gulpfile składa się z wymaganych wtyczek zawartych na górze, definicji zadań i zadania domyślnego na końcu.
Wtyczki
Każdą zainstalowaną wtyczkę, która jest wymagana do wykonania zadania, należy dodać na górze pliku gulp jako zależność w następującym formacie.
//Dodanie zależności var gulp = require ( 'gulp' );
Zadania
Następnie można utworzyć zadania. Zadanie gulp jest definiowane przez gulp.task i przyjmuje nazwę zadania jako pierwszy parametr i funkcję jako drugi parametr.
Poniższy przykład pokazuje tworzenie zadań gulp. Pierwszy parametr taskName jest obowiązkowy i określa nazwę, pod jaką można wykonać zadanie w powłoce.
łyk . zadanie ( 'nazwa_zadania' , funkcja () { //zrób coś });
Alternatywnie można utworzyć zadanie, które wykonuje kilka predefiniowanych funkcji. Funkcje te są przekazywane jako drugi parametr w postaci tablicy.
function fn1 () { // zrób coś } function fn2 () { // zrób coś } // Zadanie z tablicą nazw funkcji gulp . zadanie ( 'nazwazadania' , łyk . Równolegle ( fn1 , fn2 ));
Zadanie domyślne
Domyślne zadanie należy zdefiniować na końcu pliku gulp. Można go uruchomić za pomocą gulp w powłoce. W poniższym przypadku zadanie domyślne nic nie robi.
// Gulp domyślne zadanie gulp . zadanie ( 'domyślne' , fn );
Zadanie domyślne jest używane w gulp do automatycznego uruchamiania dowolnej liczby zależnych zadań podrzędnych zdefiniowanych powyżej w kolejności sekwencyjnej. gulp może również monitorować pliki źródłowe i uruchamiać odpowiednie zadania, gdy w plikach wprowadzane są zmiany. Zadania podrzędne należy wymienić jako elementy tablicy w drugim parametrze. Proces można uruchomić, po prostu uruchamiając domyślne zadanie za pomocą gulp .
Przykładowe zadania
Zadanie obrazu
Definicja modułu może znajdować się na początku pliku Gulpfile.js w następujący sposób:
var imagemin = require ( 'gulp-imagemin' );
Kolejne zadanie obrazu optymalizuje obrazy. gulp.src() pobiera wszystkie obrazy z rozszerzeniem .png, .gif lub .jpg w katalogu „ images-orig/”.
.pipe(imagemin()) kieruje znalezione obrazy przez proces optymalizacji, a za pomocą .pipe(gulp.dest()) zoptymalizowane obrazy są zapisywane w folderze „images/” . Bez gulp.dest() obrazy rzeczywiście byłyby zoptymalizowane, ale nie są przechowywane. Ponieważ zoptymalizowane obrazy są przechowywane w innym folderze, oryginalne obrazy pozostają niezmienione.
// Obrazy zadanie łyk . zadanie ( ' obrazy' , funkcja ( ) { return łyk . src ( ' obrazy / *. { png , gif , jpg } ' ) . }) ;
Zadanie skryptów
W poniższym przykładzie wszystkie pliki JavaScript z katalogu scripts/ są optymalizowane za pomocą .pipe(uglify()), a gulp.dest('scripts/') zastępuje oryginalne pliki danymi wyjściowymi. W tym celu należy najpierw wrócić do wymaganej wtyczki gulp-uglify w instalatorze pakietów npm i na początku gulpfile należy zdefiniować moduł.
// łyk zadania skryptu . zadanie ( 'skrypty' , funkcja () { return gulp . src ( 'scripts/*.js' ) . pipe ( uglify ()) . pipe ( gulp . dest ( 'scripts/' )); });
Obejrzyj Zadanie
Zadanie Watch służy do reagowania na zmiany w plikach. W poniższym przykładzie zadania o nazwach scripts i images są wywoływane, gdy którykolwiek z plików JavaScript lub obrazów zmieni się w określonych katalogach.
// Uruchom ponownie zadanie Gdy plik się zmieni gulp . task ( 'watch' , function ( cb ) { gulp.watch ( ' scripts/js/**' , scripts); gulp.watch ( ' images / ** ' , images ); cb (); } ) ;
Ponadto możliwe jest dokonanie aktualizacji zawartości przeglądarki za pomocą funkcji Watch-tasks. W tym celu istnieje wiele opcji i wtyczek.
Zobacz też
Literatura
- Jed Mao; Maksymiliana Schmitta; Tomasza Stryjewskiego; Cary Country Holt; Wilhelma Lubelskiego (2014). Rozwijanie Gulp Edge (wyd. 1). Krwawiąca prasa krawędziowa. ISBN 978-1-939902-14-6 .
- Den Odell (2014). „Narzędzia do budowania i automatyzacja” . Profesjonalne kodowanie, możliwości i narzędzia dla programistów JavaScript . Apress. ISBN 978-1-4302-6268-8 .
- Maynard, Travis (2015). Pierwsze kroki z Gulpem . Packt Publishing Ltd. ISBN 9781784393472 .