Wprowadzenie do automatyzacji JavaScript z Gulp

Jako twórcy stron internetowych czasami powtarzamy te same żmudne zadania. Jeśli zastanowisz się, ile czasu marnujesz na uruchomienie polecenia budowania lub naciśnięcie odświeżania w przeglądarce, zdasz sobie sprawę, że możesz zaoszczędzić dużo czasu. Dodatkowo, automatyzując swoje procesy, możesz skupić się na zadaniu, zamiast tymczasowo opuszczać „strefę” (swój stan produktywności).

W tym samouczku automatyzacji JavaScript dowiesz się, jak zautomatyzować proces projektowania i rozwoju za pomocą Gulp. Jeśli jesteś bardziej zorientowany na projektowanie, zachęcam do przezwyciężenia wszelkich obaw i do czytania dalej. Z drugiej strony, jeśli jesteś programistą, będziesz w stanie przejść przez to, gdy zrozumiesz logikę, która się za tym kryje.

Gulp to system kompilacji, który wykorzystuje strumienie Node.js do implementacji asynchronicznego podejścia do miejsca docelowego źródła w automatyzacji. Wszystko jest napisane w JavaScript, więc każdy, kto ma średnio zaawansowaną wiedzę na temat kodowania, może łatwo zacząć. Proces budowania Gulp składa się ze zbioru obserwatorów i zadań. Ponadto społeczność stojąca za Gulp utrzymuje ogromny katalog wtyczek w npm, który pomaga wykonać każde zadanie, od łączenia JavaScript po tworzenie czcionek ikon z SVG.

Alternatywy dla Gulpa

Istnieje wiele alternatyw, z których większość pojawiła się w ciągu ostatnich kilku lat - najważniejszą z nich jest Grunt. Rywalizacja między Gulpem i Gruntem nigdy nie będzie miała wyraźnego zwycięzcy, ponieważ obaj mają swoje wady i zalety, dlatego uniknę zagłębiania się w to. Krótko mówiąc, duże uzależnienie Grunta od konfiguracji jest tym, co kieruje ludzi w stronę podejścia JavaScript firmy Gulp. W międzyczasie natywne implementacje GUI, takie jak Koala, zyskały na popularności, głównie od ludzi, którzy powstrzymują się od kodowania. Jednak dzięki dołączonym aplikacjom nie można osiągnąć poziomu dostosowywania i rozszerzalności, który oferuje Gulp.

Podstawy automatyzacji procesów

Wtyczki

Wtyczki są środkiem, za pomocą którego gulp realizuje każdy proces. Wtyczki są instalowane przez npm i inicjowane za pomocą „wymagaj”.

Zadania

Dla Gulpa zadania zawsze mają źródło i cel. Pomiędzy nimi znajdują się potoki, które wywołują każdą wtyczkę i wysyłają transmutowane wyniki do następnego potoku.

Globy

Globy to wzorce wieloznaczne, które odnoszą się do plików. Globy lub tablice globusów są używane jako dane wejściowe w źródle zadania.

Obserwatorzy

Obserwatorzy obserwują pliki źródłowe pod kątem zmian i wywołują zadania po wykryciu zmiany.

gulpfile.js

Jest to plik JavaScript, na który wskazuje polecenie „gulp”. Zawiera wszystko, od zadań po obserwatorów lub inne fragmenty kodu używane przez zadania.

Proste zadanie

Aby rozpocząć, potrzebujesz Node.js i powłoki wiersza poleceń z dostępem administratora. Node.js możesz pobrać stąd. Po zainstalowaniu możesz uruchomić następujące polecenie, aby upewnić się, że npm jest aktualny.

 sudo npm install npm -g

Flaga -g oznacza, że ​​instalacja będzie globalna.

Teraz jesteś gotowy do zainstalowania Gulpa i rozpoczęcia wywoływania prostych zadań. Użyj następującego polecenia, aby zainstalować Gulp globalnie.

 sudo npm install gulp -g

Pamiętaj, że możesz również użyć tego samego polecenia do aktualizacji.

Możesz pobrać zestaw startowy, który pomoże Ci w pierwszym zadaniu z toptal-gulp-tutorial/step1. Zawiera bardzo proste zadanie, które kompiluje pliki SCSS do CSS. Wykorzystuje wtyczkę gulp-sass, która wykorzystuje libsass. Wybrałem tutaj libsass, ponieważ jest znacznie szybszy niż alternatywa Ruby, chociaż brakuje jej niektórych funkcji. Po przejściu do katalogu głównego projektu możesz użyć następującego polecenia, aby zainstalować wszystkie wymagane wtyczki.

 npm install

To polecenie odczytuje plik package.json i instaluje wszystkie wymagane zależności. Używamy tutaj „npm install” jako skrótu dla następujących elementów:

 npm install gulp --save-dev npm install gulp-sass --save-dev

Flaga „–save-dev” dodaje wybrane wtyczki do pliku package.json devDependencies, dzięki czemu następnym razem, gdy będziesz chciał wszystko zainstalować, możesz użyć poręcznego „npm install”.

W tym momencie możesz uruchomić swoje pierwsze zadanie. Uruchom następujące polecenie i obserwuj, jak wszystkie pliki SCSS w folderze /scss są kompilowane do CSS w odpowiednim katalogu:

 gulp scss

Zauważ, że w tym przykładzie określamy zadanie do uruchomienia. Gdybyśmy pominęli nazwę zadania, uruchomiłoby się to o nazwie „domyślna”.

Przewodnik po kodzie

Powyższe jest realizowane tylko w 7 liniach kodu JavaScript. Z pewnością poczujesz się jak w domu, gdy zrozumiesz jego prostotę:

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

Na początku inicjujemy wszystkie wtyczki, z których będziemy korzystać. Gulp jest jedynym, bez którego nie możemy się obejść:

 gulp.task('scss', function() {

Definiujemy zadanie o nazwie „scss”:

 return gulp.src('scss/*.scss')

Ustaw pliki źródłowe zadania. Są one zdefiniowane jako kule. W tym przykładzie odnosimy się do wszystkich plików w folderze „scss/”, które kończą się na „.scss”.

 .pipe(scss())

W tym momencie nazywamy wtyczkę gulp-sass, którą wcześniej zdefiniowaliśmy:

 .pipe(gulp.dest('css'));

Na koniec używamy „gulp.dest”, aby zdefiniować folder docelowy dla naszych plików. Może to być również pojedyncza nazwa pliku, jeśli pliki zostały połączone.

Aby jeszcze bardziej ulepszyć tę implementację automatyzacji procesów, możesz spróbować dołączyć kilka innych wtyczek Gulp. Na przykład możesz chcieć zminimalizować końcowy produkt swojego zadania za pomocą gulp-minify-css i automatycznie dodać prefiksy dostawcy za pomocą gulp-autoprefixer.

Zatrudnianie obserwatora

Stworzyłem zestaw startowy obserwatora, którego możesz od razu użyć. Możesz go pobrać z toptal-gulp-tutorial/step2. Zawiera ulepszoną wersję wcześniej utworzonego zadania SCSS oraz obserwatora, który obserwuje pliki źródłowe i wywołuje zadanie. Aby go uruchomić, użyj następującego polecenia:

 gulp

To polecenie uruchamia „domyślne” zadanie, które inicjuje obserwatora. W tym momencie możesz edytować dowolny plik SCSS i obserwować, jak pliki CSS są rekompilowane. Będziesz mógł zobaczyć powiadomienia Gulpa w wierszu poleceń.

Przewodnik po kodzie

Ustawiliśmy obserwatora do naszego zadania z zaledwie 3 dodatkowymi liniami kodu. To powiedziawszy, zestaw startowy obserwatora nie różni się zbytnio od przykładu wprowadzającego. W tej sekcji omówimy wszystkie uzupełnienia i zmiany.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

W tym przykładzie źródło Gulp jest dostarczane z tablicą globów. Pierwsza obejmuje wszystkie pliki kończące się na „.scss” również w podfolderach, a druga wyklucza te, które zaczynają się na „_”. W ten sposób możemy użyć wbudowanej funkcji SCSS @import, aby połączyć plik _page.scss.

 gulp.task('default', ['scss'], function() {

Tutaj definiujemy „domyślne” zadanie. Zadanie „scss” jest uruchamiane jako zależność przed „domyślnym”.

 gulp.watch('scss/**/*.scss', ['scss']);

Na koniec wywołujemy funkcję watch Gulpa, aby wskazać dowolny plik kończący się na „.scss” i za każdym razem, gdy wystąpi zdarzenie zmiany, aby uruchomić zadanie „scss”.

Teraz jesteś gotowy do tworzenia nowych obserwatorów dla innych zautomatyzowanych procesów, takich jak konkatenacja JavaScript, podpowiedzi do kodu, kompilacja CoffeeScript lub cokolwiek innego, co może przyjść Ci do głowy. Aby głębiej zagłębić się w tę implementację automatyzacji JavaScript, proponuję dodanie gulp-notify, które powiadomi Cię, gdy zadanie zostanie uruchomione. Możesz także utworzyć osobne zadanie, aby zminimalizować wynikowy kod CSS i sprawić, by zadanie „scss” było uruchamiane jako zależność od tego. Na koniec możesz użyć gulp-rename, aby dodać sufiks „.min” do wynikowych plików.

Zaawansowane wtyczki Gulp do automatyzacji JavaScript

W bazie wtyczek Gulpa istnieją tysiące wtyczek, z których niektóre wykraczają daleko poza prostą automatyzację JavaScript procesu kompilacji. Oto kilka znakomitych przykładów:

Synchronizacja przeglądarki

BrowserSync wstrzykuje CSS, JavaScript i automatycznie odświeża przeglądarkę po każdej zmianie. Dodatkowo zawiera funkcję ghostMode, której można użyć do przestraszenia współpracowników lub znacznego przyspieszenia testowania przeglądarki.

Przeglądarka

Browserify analizuje wywołania „require” w Twojej aplikacji i konwertuje je na dołączony plik JavaScript. Istnieje również lista pakietów npm, które można przekonwertować na kod przeglądarki.

Pakiet internetowy

Podobnie jak Browserify, Webpack ma na celu konwersję modułów z zależnościami do plików statycznych. Ten daje użytkownikowi większą swobodę w ustawianiu zależności modułów i nie ma na celu podążania za stylem kodu Node.js.

Karma

Gulp-karma wprowadza niesławne środowisko testowe do Gulp. Karma stosuje najmniejsze podejście do konfiguracji, które również popiera Gulp.

Wniosek

W tym samouczku o automatyzacji procesów zademonstrowałem piękno i prostotę używania Gulpa jako narzędzia do budowania. Postępując zgodnie z krokami opisanymi w samouczku, będziesz teraz gotowy do pełnej automatyzacji procesu tworzenia oprogramowania zarówno w przyszłych, jak i starszych projektach. Zainwestowanie trochę czasu w konfigurację systemu kompilacji dla starszych projektów z pewnością pozwoli Ci zaoszczędzić cenny czas w przyszłości.

Wkrótce pojawi się bardziej zaawansowany samouczek Gulpa.