Jak wykorzystać maszyny: bycie produktywnym dzięki biegaczom zadań

Biegacze zadań to bohaterowie (lub złoczyńcy, w zależności od punktu widzenia), którzy po cichu pracują za większością aplikacji internetowych i mobilnych. Programy uruchamiające zadania zapewniają wartość dzięki automatyzacji wielu zadań programistycznych, takich jak łączenie plików, uruchamianie serwerów programistycznych i kompilowanie kodu. W tym artykule omówimy skrypty Grunt, Gulp, Webpack i npm. Podamy również kilka przykładów każdego z nich, aby rozpocząć. Pod koniec przedstawię kilka łatwych wygranych i wskazówek, jak zintegrować pomysły z tego postu z Twoją aplikacją.

Istnieje przekonanie, że biegacze zadań i ogólnie postęp w JavaScript nadmiernie komplikują krajobraz front-endowy. Zgadzam się, że spędzanie całego dnia na ulepszaniu skryptów kompilacji nie zawsze jest najlepszym sposobem wykorzystania czasu, ale biegacze zadań mają pewne zalety, gdy są używane prawidłowo i z umiarem. Naszym celem w tym artykule jest szybkie omówienie podstaw najpopularniejszych programów do uruchamiania zadań i dostarczenie solidnych przykładów, które rozbudzą Twoją wyobraźnię dotyczącą tego, jak te narzędzia mogą pasować do Twojego przepływu pracy.

Dalsze czytanie na SmashingMag:

• Zostań zaawansowanym użytkownikiem wiersza poleceń dzięki Oh-My-ZSH i Z
• Wprowadzenie do PostCSS
• Wstawaj i biegaj z Gruntem
• Budowanie z Gulp

Uwaga w wierszu poleceń

Programy uruchamiające zadania i narzędzia do kompilacji to przede wszystkim narzędzia wiersza polecenia. W całym tym artykule przyjmę przyzwoity poziom doświadczenia i kompetencji w pracy z linią poleceń. Jeśli rozumiesz, jak używać typowych poleceń, takich jak cd , ls , cp i mv , powinieneś być w porządku, gdy przejdziemy przez różne przykłady. Jeśli nie czujesz się komfortowo, używając tych poleceń, w Smashing Magazine dostępny jest świetny wpis wprowadzający. Zacznijmy od dziadka ich wszystkich: Grunta.

Chrząknięcie

Grunt był pierwszym popularnym uruchamiaczem zadań opartym na JavaScript. Używam Grunta w jakiejś formie od 2012 roku. Podstawową ideą Grunta jest to, że używasz specjalnego pliku JavaScript, Gruntfile.js , aby skonfigurować różne wtyczki do wykonywania zadań. Ma ogromny ekosystem wtyczek i jest bardzo dojrzałym i stabilnym narzędziem. Grunt ma fantastyczny katalog stron internetowych, który indeksuje większość wtyczek (obecnie około 5500). Prostym geniuszem Grunta jest połączenie JavaScriptu z ideą wspólnego pliku konfiguracyjnego (takiego jak makefile), co pozwoliło wielu programistom wnosić wkład i używać Grunta w swoich projektach. Oznacza to również, że Grunt może być objęty tym samym systemem kontroli wersji, co reszta projektu.

Grunt jest sprawdzony w boju i stabilny. Mniej więcej w czasie pisania tego tekstu została wydana wersja 1.0.0, co jest ogromnym osiągnięciem zespołu Grunt. Ponieważ Grunt w dużej mierze konfiguruje różne wtyczki do współpracy, może się dość szybko zaplątać (tj. niechlujny i mylący w modyfikowaniu). Jednak przy odrobinie staranności i organizacji (rozbijając zadania na logiczne pliki!), możesz sprawić, by zdziałał cuda dla każdego projektu.

W rzadkich przypadkach, gdy wtyczka nie jest dostępna do wykonania zadania, którego potrzebujesz, Grunt dostarcza dokumentację, jak napisać własną wtyczkę. Wszystko, co musisz wiedzieć, aby stworzyć własną wtyczkę, to JavaScript i Grunt API. Prawie nigdy nie będziesz musiał tworzyć własnej wtyczki, więc spójrzmy, jak używać Grunta z całkiem popularną i użyteczną wtyczką!

Przykład

Przyjrzyjmy się, jak właściwie działa Grunt. Uruchomienie grunt w wierszu poleceń uruchomi program wiersza poleceń Grunt, który szuka Gruntfile.js w katalogu głównym katalogu. Plik Gruntfile.js zawiera konfigurację, która kontroluje, co zrobi Grunt. W tym sensie Gruntfile.js można postrzegać jako rodzaj książki kucharskiej, za którą podąża kucharz (tj. Grunt, program); i jak każda dobra książka kucharska, Gruntfile.js będzie zawierać wiele przepisów (np. zadań).

Zamierzamy przetestować Grunta, używając wtyczki Grunticon do generowania ikon dla hipotetycznej aplikacji internetowej. Grunticon pobiera katalog SVG i wypluwa kilka zasobów:

• plik CSS z plikami SVG zakodowanymi w formacie base-64 jako obrazami tła;
• plik CSS z wersjami PNG plików SVG zakodowanych w formacie base-64 jako obrazy tła;
• plik CSS, który odwołuje się do osobnego pliku PNG dla każdej ikony.

Trzy różne pliki reprezentują różne możliwości przeglądarek i urządzeń mobilnych. Nowoczesne urządzenia otrzymają pliki SVG w wysokiej rozdzielczości jako pojedyncze żądanie (tj. pojedynczy plik CSS). Przeglądarki, które nie obsługują plików SVG, ale obsługują zasoby zakodowane w base-64, otrzymają arkusz stylów PNG w formacie base-64. Wreszcie wszystkie przeglądarki, które nie radzą sobie z tymi dwoma scenariuszami, otrzymają „tradycyjny” arkusz stylów, który odwołuje się do plików PNG. Wszystko to z jednego katalogu SVG!

Konfiguracja tego zadania wygląda tak:

 module.exports = function(grunt) { grunt.config("grunticon", { icons: { files: [ { expand: true, cwd: 'grunticon/source', src: ["*.svg", ".png"], dest: 'dist/grunticon' } ], options: [ { colors: { "blue": "blue" } } ] } }); grunt.loadNpmTasks('grunt-grunticon'); };

Przejdźmy tutaj przez różne kroki:

1. Musisz mieć zainstalowany globalnie Grunt.
2. Utwórz plik Gruntfile.js w katalogu głównym projektu. Najlepiej jest również zainstalować Grunta jako zależność npm w pliku package.json wraz z Grunticonem za pośrednictwem npm i grunt grunt-grunticon --save-dev .
3. Utwórz katalog SVG i katalog docelowy (do którego trafią zbudowane zasoby).
4. Umieść mały skrypt w head kodu HTML, który określi, jakie ikony mają zostać załadowane.

Oto jak powinien wyglądać twój katalog przed uruchomieniem zadania Grunticon:

 |-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json

Po zainstalowaniu i utworzeniu tych rzeczy możesz skopiować powyższy fragment kodu do Gruntfile.js . Powinieneś wtedy móc uruchomić grunt grunticon z wiersza poleceń i zobaczyć, jak wykonuje się zadanie.

Powyższy fragment kodu robi kilka rzeczy:

• dodaje nowy obiekt config do Grunta w linii 32 o nazwie grunticon ;
• wypełnia różne opcje i parametry Grunticona w obiekcie icons ;
• na koniec ściąga wtyczkę Grunticona przez loadNPMTasks .

Oto jak powinien wyglądać twój katalog po Grunticonie:

 |-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json

Proszę bardzo — skończone! W kilku liniach konfiguracji i kilku instalacjach pakietów zautomatyzowaliśmy generowanie naszych zasobów ikon! Mamy nadzieję, że zaczyna to ilustrować siłę biegaczy zadań: niezawodność, wydajność i przenośność.

Gulp: Klocki LEGO do Twojego systemu budowania

Gulp pojawił się jakiś czas po Gruncie i aspirował do bycia narzędziem do budowania, które nie było tylko konfiguracją, ale rzeczywistym kodem. Ideą stojącą za kodem nad konfiguracją jest to, że kod jest znacznie bardziej ekspresyjny i elastyczny niż modyfikacja niekończących się plików konfiguracyjnych. Przeszkodą w przypadku Gulpa jest to, że wymaga większej wiedzy technicznej niż Grunt. Musisz znać interfejs API do strumieniowego przesyłania Node.js i swobodnie pisać podstawowy JavaScript.

Wykorzystanie strumieni Node.js przez Gulpa jest głównym powodem, dla którego jest szybszy niż Grunt. Korzystanie ze strumieni oznacza, że ​​zamiast używać systemu plików jako „bazy danych” do przekształceń plików, Gulp używa przekształceń w pamięci. Aby uzyskać więcej informacji o strumieniach, zapoznaj się z dokumentacją interfejsu API strumieni Node.js wraz z podręcznikiem strumieni.

Przykład

Podobnie jak w sekcji Grunt, zamierzamy wystawić Gulpa na próbę za pomocą prostego przykładu: łączenie naszych modułów JavaScript w pojedynczy plik aplikacji.

Uruchamianie Gulpa jest tym samym, co uruchamianie Grunta. Program wiersza poleceń gulp będzie szukał książki kucharskiej z przepisami (np Gulpfile.js ) w katalogu, w którym jest uruchamiany.

Ograniczenie liczby żądań wysyłanych przez każdą stronę jest uważane za najlepszą praktykę dotyczącą wydajności sieci (zwłaszcza na urządzeniach mobilnych). Jednak współpraca z innymi programistami jest znacznie łatwiejsza, jeśli funkcjonalność jest podzielona na wiele plików. Wprowadź biegaczy zadań. Możemy użyć Gulpa do połączenia wielu plików JavaScript dla naszej aplikacji, tak aby klienci mobilni musieli ładować jeden plik zamiast wielu.

Gulp ma ten sam ogromny ekosystem wtyczek co Grunt. Aby więc ułatwić to zadanie, oprzemy się na wtyczce gulp-concat. Powiedzmy, że struktura naszego projektu wygląda tak:

 |-- dist | `-- app.js |-- gulpfile.js |-- package.json `-- src |-- bar.js `-- foo.js

Dwa pliki JavaScript znajdują się w naszym katalogu src i chcemy je połączyć w jeden plik, app.js , w naszym katalogu dist/ . Aby to osiągnąć, możemy użyć następującego zadania Gulp.

 var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('default', function() { return gulp.src('./src/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./dist/')); });

Ważne bity znajdują się w wywołaniu zwrotnym gulp.task . Tam używamy API gulp.src , aby pobrać wszystkie pliki, które kończą się na .js w naszym katalogu src . API gulp.src zwraca strumień tych plików, który możemy następnie przekazać (poprzez API pipe ) do wtyczki gulp-concat. Wtyczka łączy następnie wszystkie pliki w strumieniu i przekazuje je do funkcji gulp.dest . Funkcja gulp-dest po prostu zapisuje otrzymane dane wejściowe na dysk.

Możesz zobaczyć, jak Gulp wykorzystuje strumienie, aby dać nam „cegiełki” lub „łańcuchy” do naszych zadań. Typowy przepływ pracy Gulpa wygląda tak:

1. Pobierz wszystkie pliki określonego typu.
2. Przekaż te pliki do wtyczki (concat!) lub dokonaj transformacji.
3. Przekaż te przekształcone pliki do innego bloku (w naszym przypadku do bloku dest , który kończy nasz łańcuch).

Podobnie jak w przykładzie Grunt, po prostu uruchomienie gulp z katalogu głównego naszego katalogu projektu spowoduje wyzwolenie default zadania zdefiniowanego w pliku Gulpfile.js . To zadanie łączy nasze pliki i pozwala nam zająć się tworzeniem naszej aplikacji lub strony internetowej.

Pakiet internetowy

Najnowszym dodatkiem do klubu biegaczy zadań JavaScript jest Webpack. Webpack reklamuje się jako „pakunek modułów”, co oznacza, że ​​może dynamicznie budować pakiet kodu JavaScript z wielu oddzielnych plików przy użyciu wzorców modułów, takich jak wzorzec CommonJS. Webpack zawiera również wtyczki, które nazywa loaderami.

Webpack jest wciąż dość młody i ma dość gęstą i zagmatwaną dokumentację. Dlatego polecam repozytorium Webpack Pete'a Hunta jako świetny punkt wyjścia przed zagłębieniem się w oficjalną dokumentację. Nie poleciłbym również Webpack, jeśli jesteś nowy w biegaczach zadań lub nie czujesz się biegle w JavaScript. Pomijając te kwestie, jest to nadal bardziej specyficzne narzędzie niż ogólna szerokość Grunt i Gulp. Wiele osób używa Webpack razem z Gruntem lub Gulpem właśnie z tego powodu, pozwalając Webpackowi przodować w łączeniu modułów i pozwalając Gruntowi lub Gulpowi na wykonywanie bardziej ogólnych zadań.

Webpack ostatecznie pozwala nam napisać kod w stylu Node.js dla przeglądarki, co jest wielką korzyścią dla produktywności i wyraźnego oddzielenia problemów w naszym kodzie za pomocą modułów. Użyjmy Webpacka, aby osiągnąć ten sam wynik, co w przykładzie Gulp, łącząc wiele plików JavaScript w jeden plik aplikacji.

Przykład

Webpack jest często używany z Babel do transpilacji kodu ES6 do ES5. Transpilacja kodu z ES6 do ES5 pozwala programistom korzystać z powstającego standardu ES6, jednocześnie udostępniając ES5 przeglądarkom lub środowiskom, które nie obsługują jeszcze ES6. Jednak w tym przykładzie skupimy się na zbudowaniu prostego pakietu naszych dwóch plików z przykładu Gulp. Aby rozpocząć, musimy zainstalować Webpack i utworzyć plik konfiguracyjny webpack.config.js . Oto jak wygląda nasz plik:

 module.exports = { entry: "./src/foo.js", output: { filename: "app.js", path: "./dist" } };

W tym przykładzie wskazujemy Webpack na nasz plik src/foo.js , aby rozpocząć pracę nad chodzeniem po naszym wykresie zależności. Zaktualizowaliśmy również nasz plik foo.js , aby wyglądał tak:

 //foo.js var bar = require("./bar"); var foo = function() { console.log('foo'); bar(); }; module.exports = foo;

Zaktualizowaliśmy nasz plik bar.js , aby wyglądał tak:

 //bar.js var bar = function() { console.log('bar'); }; module.exports = bar;

To jest bardzo prosty przykład CommonJS. Zauważysz, że te pliki teraz „eksportują” funkcję. Zasadniczo CommonJS i Webpack pozwalają nam rozpocząć organizowanie naszego kodu w samodzielne moduły, które można importować i eksportować w całej naszej aplikacji. Webpack jest wystarczająco sprytny, aby śledzić słowa kluczowe importu i eksportu oraz umieścić wszystko w jednym pliku, dist/app.js . Nie musimy już utrzymywać zadania konkatenacji, a zamiast tego musimy po prostu trzymać się struktury naszego kodu. Dużo lepiej!

Rozsuwalny

Webpack jest podobny do Gulpa w tym, że „To tylko JavaScript”. Można go rozszerzyć, aby wykonywać inne zadania uruchamiające zadania za pośrednictwem systemu ładowania. Na przykład możesz użyć css-loader i sass-loader, aby skompilować Sass do CSS, a nawet użyć Sassa w swoim JavaScript, przeciążając require wzorzec CommonJS! Jednak zazwyczaj opowiadam się za używaniem Webpack wyłącznie do budowania modułów JavaScript i za używaniem innego, bardziej ogólnego podejścia do uruchamiania zadań (na przykład skryptów Webpack i npm lub Webpack i Gulp do obsługi wszystkiego innego).

Skrypty npm

Skrypty npm to najnowsze szaleństwo hipsterów i nie bez powodu. Jak widzieliśmy w przypadku wszystkich tych narzędzi, liczba zależności, które mogą wprowadzić do projektu, może w końcu wymknąć się spod kontroli. Pierwszym postem, który opowiadał się za skryptami npm jako punktem wejścia do procesu budowania, był James Halliday. Jego post doskonale podsumowuje ignorowaną moc skryptów npm (podkreślenie moje):

Istnieje kilka wymyślnych narzędzi do automatyzacji kompilacji w projektach JavaScript, których nigdy nie czułem, ponieważ mniej znane polecenie npm run było całkowicie wystarczające do wszystkiego, co musiałem zrobić, zachowując bardzo mały ślad konfiguracji .

Złapałeś ten ostatni kawałek na końcu? Główną zaletą skryptów npm jest to, że mają „bardzo mały ślad konfiguracyjny”. To jeden z głównych powodów, dla których skrypty npm zaczęły się sprawdzać (niestety prawie cztery lata później). Dzięki Gruntowi, Gulpowi, a nawet Webpackowi, w końcu zaczyna się tonąć we wtyczkach, które zawijają pliki binarne i podwajają liczbę zależności w projekcie.

Keith Cirkel ma samouczek dotyczący używania npm do zastąpienia Grunta lub Gulpa. Dostarcza plan, jak w pełni wykorzystać moc skryptów npm, i wprowadził niezbędną wtyczkę, Parallel Shell (i wiele innych podobnych).

Przykład

W naszej sekcji o Grunt wzięliśmy popularny moduł Grunticon i stworzyliśmy ikony SVG (z zastępczymi plikami PNG) w zadaniu Grunt. To był dla mnie jedyny problem ze skryptami npm. Przez jakiś czas zainstalowałbym Grunta dla projektów tylko po to, by używać Grunticona. Dosłownie „wystrzeliłbym” Gruntowi w moim zadaniu npm, aby osiągnąć inicjację programu uruchamiającego zadania (lub, jak zaczęliśmy go nazywać w pracy, turduckena do budowania). Na szczęście The Filament Group, fantastyczna grupa stojąca za Grunticonem, wydała samodzielną (tj. wolną od Grunta) wersję swojego narzędzia, Grunticon-Lib. Użyjmy go więc do stworzenia kilku ikon za pomocą skryptów npm!

Ten przykład jest nieco bardziej zaawansowany niż typowe zadanie skryptu npm. Typowe zadanie skryptu npm to wywołanie narzędzia wiersza polecenia z odpowiednimi flagami lub plikiem konfiguracyjnym. Oto bardziej typowe zadanie, które kompiluje nasz Sass do CSS:

 "sass": "node-sass src/scss/ -o dist/css",

Widzisz, jak to tylko jedna linia z różnymi opcjami? Nie jest potrzebny plik zadań, żadne narzędzie do kompilacji do uruchomienia — po prostu npm run sass z wiersza poleceń, a Sass jest teraz CSS. Jedną z naprawdę fajnych funkcji skryptów npm jest sposób łączenia ze sobą zadań skryptowych. Załóżmy na przykład, że chcemy uruchomić jakieś zadanie przed uruchomieniem naszego zadania Sass. Stworzylibyśmy nowy wpis w skrypcie w następujący sposób:

 "presass": "echo 'before sass',

Zgadza się: npm rozumie pre- . Rozumie również post- prefiks. Każdy wpis skryptu o tej samej nazwie, co inny wpis skryptu z prefiksem lub prefiksem, zostanie uruchomiony pre- lub post- tym wpisie.

Konwersja naszych ikon będzie wymagała rzeczywistego pliku Node.js. Nie jest to jednak zbyt poważne. Po prostu utwórz katalog tasks i stwórz nowy plik o nazwie grunticon.js lub icons.js lub cokolwiek ma sens dla osób pracujących nad projektem. Po utworzeniu pliku możemy napisać JavaScript, aby uruchomić nasz proces Grunticon.

Uwaga: Wszystkie te przykłady używają ES6, więc użyjemy babel-node do uruchomienia naszego zadania. Możesz łatwo użyć ES5 i Node.js, jeśli jest to wygodniejsze.

 import icons from "grunticon-lib"; import globby from "globby"; let files = globby.sync('src/icons/*'); let options = { colors: { "blue": "blue" } }; let icon = new icons(files, 'dist/icons', options); icon.process();

Przejdźmy do kodu i dowiedzmy się, co się dzieje.

1. import (tzn. wymagamy) dwie biblioteki, grunticon-lib i globby . Globby to jedno z moich ulubionych narzędzi, dzięki któremu praca z plikami i globami jest tak łatwa. Globby rozszerza Node.js Glob (wybierz wszystkie pliki JavaScript przez ./*.js ) o obsługę Promise. W tym przypadku używamy go do pobrania wszystkich plików z katalogu src/icons .
2. Gdy to zrobimy, ustawiamy kilka opcji w obiekcie options , a następnie wywołujemy Grunticon-Lib z trzema argumentami:
   • pliki ikon,
   • przeznaczenie,
   • opcje.Biblioteka przejmuje kontrolę nad tymi ikonami i ostatecznie tworzy wersje SVG i PNG w wybranym przez nas katalogu.
3. Prawie skończyliśmy. Pamiętaj, że jest to osobny plik i musimy dodać „hak”, aby wywołać ten plik z naszego skryptu npm, np.: "icons": "babel-node tasks/icons.js" .
4. Teraz możemy uruchomić npm run icons , a nasze ikony będą tworzone za każdym razem.

Skrypty npm oferują podobny poziom mocy i elastyczności jak inne programy do uruchamiania zadań, bez zadłużenia wtyczek.

Podział omówionych tutaj biegaczy zadań

Niektóre łatwe wygrane

Wszystkie te przykłady i biegacze zadań mogą wydawać się przytłaczające, więc podzielmy to. Po pierwsze, mam nadzieję, że nie wyjdziesz z tego artykułu, że niezależnie od tego, z jakiego programu uruchamiającego zadania lub systemu kompilacji korzystasz, należy natychmiast zastąpić go wspomnianym tutaj. Zastąpienie tak ważnych systemów nie powinno odbywać się bez większego namysłu. Oto moja rada dotycząca aktualizacji istniejącego systemu: Rób to stopniowo.

Skrypty opakowujące!

Jedną z metod przyrostowych jest przyjrzenie się napisaniu kilku „opakujących” skryptów npm wokół istniejących programów uruchamiających zadania, aby zapewnić wspólne słownictwo dla kroków kompilacji, które wykraczają poza faktycznie używany program uruchamiający zadania. Skrypt opakowujący może być tak prosty, jak ten:

 { "scripts": { "start": "gulp" } }

Wiele projektów wykorzystuje bloki skryptów start i test npm, aby pomóc nowym programistom w szybkiej aklimatyzacji. Skrypt opakowujący wprowadza kolejną warstwę abstrakcji do łańcucha budowania programu uruchamiającego zadania, ale myślę, że warto ujednolicić się wokół prymitywów npm (np. test ). Polecenia npm mają lepszą trwałość niż pojedyncze narzędzie.

Posyp małą paczkę internetową

Jeśli Ty lub Twój zespół odczuwacie ból związany z utrzymaniem kruchej „porządku pakietów” dla swojego JavaScriptu lub chcecie uaktualnić do ES6, rozważcie to jako okazję do wprowadzenia Webpacka do swojego istniejącego systemu uruchamiającego zadania. Webpack jest świetny, ponieważ możesz używać go tak dużo lub tak mało, jak chcesz, a jednocześnie czerpiesz z niego wartość. Zacznij od dołączenia kodu aplikacji, a następnie dodaj do miksu babel-loader. Webpack ma tak wiele funkcji, że przez dłuższy czas będzie w stanie pomieścić niemal wszystkie dodatki lub nowe funkcje.

Łatwe korzystanie z PostCSS ze skryptami npm

PostCSS to świetna kolekcja wtyczek, które przekształcają i ulepszają CSS po jego napisaniu i przetworzeniu. Innymi słowy, to postprocesor. Korzystanie z PostCSS za pomocą skryptów npm jest dość łatwe. Załóżmy, że mamy skrypt Sassa, jak w naszym poprzednim przykładzie:

 "sass": "node-sass src/scss/ -o dist/css",

Możemy użyć słów kluczowych lifecycle skryptu npm, aby dodać skrypt, który będzie uruchamiany automatycznie po zadaniu Sass:

 "postsass": "postcss --use autoprefixer -c postcss.config.json dist/css/*.css -d dist/css",

Ten skrypt będzie uruchamiany za każdym razem, gdy zostanie uruchomiony skrypt Sass. Pakiet postcss-cli jest świetny, ponieważ konfigurację można określić w osobnym pliku. Zauważ, że w tym przykładzie dodajemy kolejny wpis skryptu, aby wykonać nowe zadanie; jest to typowy wzorzec podczas korzystania ze skryptów npm. Możesz utworzyć przepływ pracy, który wykona wszystkie różne zadania, których potrzebuje Twoja aplikacja.

Wniosek

Biegacze zadań mogą rozwiązywać prawdziwe problemy. Używałem programów uruchamiających zadania do kompilacji różnych kompilacji aplikacji JavaScript, w zależności od tego, czy celem była produkcja, czy rozwój lokalny. Używałem również programów do uruchamiania zadań, aby kompilować szablony Handlebars, wdrażać witrynę do produkcji i automatycznie dodawać prefiksy dostawców, których brakuje w moim Sassie. Nie są to trywialne zadania, ale gdy są one opakowane w biegacza zadań, stają się łatwe.

Biegacze zadań nieustannie ewoluują i zmieniają się. Próbowałem opisać te najczęściej używane w obecnym duchu czasu. Są jednak inne, o których nawet nie wspomniałem, takie jak brokuły, brunch i harfa. Pamiętaj, że to tylko narzędzia: używaj ich tylko wtedy, gdy rozwiążą konkretny problem, a nie dlatego, że wszyscy z nich korzystają. Miłego zadania uruchomionego!