Jak używać Grunt do automatyzacji pracy [Poradniki]

Jestem ogromny zwolennik automatyzacji ponieważ czyni życie znacznie prostszym. Po co spędzać czas na drobiazgowych, monotonnych zadaniach, które wysysają siły życiowe, gdy masz komputer do robienia rzeczy dla ciebie? Jest to szczególnie prawdziwe w przypadku tworzenia stron internetowych.

Wiele zadań programistycznych może być trudnym zadaniem. Podczas opracowywania możesz skompilować kod, podczas pchania wersji rozwojowej możesz połączyć i zminimalizować pliki, usunąć zasoby tylko do programowania i tak dalej. Nawet stosunkowo nieskomplikowane, takie jak usuwanie wielu plików lub zmiana nazw folderów może zajmować dużą część naszego czasu.

W tym artykule pokażę ci, jak możesz ułatwić sobie życie, wykorzystując doskonałą funkcjonalność oferowaną przez Grunta, biegacza zadań Javascript. Poprowadzę Cię przez cały proces, więc nie martw się, nawet jeśli nie jesteś kreatorem Javascript!

Więcej na stronie Hongkiat.com:

• CSSMatic ułatwia CSS dla projektantów stron internetowych
• Automatyzacja zadań w systemie Mac za pomocą akcji folderów
• Zautomatyzuj swoje pliki Dropbox za pomocą akcji
• 10 aplikacji ułatwiających automatyzację zadań na urządzeniu z Androidem
• Jak (automatycznie) wykonać kopię zapasową witryny w Dropbox

Instalacja Grunt

Instalacja Grunt jest bardzo łatwa, ponieważ używa menedżera pakietów węzłów. Oznacza to, że możesz także zainstalować sam węzeł. Otwórz terminal lub wiersz polecenia (od tej pory będę dzwonił do tego terminala) i wprowadź nmp -v.

Jeśli widzisz numer wersji, który masz npm zainstalowany, jeśli zobaczysz błąd „Nie znaleziono polecenia”, musisz go zainstalować, przechodząc na stronę pobierania węzłów i wybierając potrzebną wersję.

Po zainstalowaniu węzła pobieranie Grunta jest kwestią pojedynczego polecenia wydanego w terminalu:

npm install -g grunt-cli

Podstawowe użycie

Będziesz korzystać z Grunt na podstawie projektu na projekt, ponieważ każdy projekt będzie miał inne wymagania. Zacznijmy teraz projekt, tworząc folder i przechodząc do niego przez nasz terminal.

Dwa pliki tworzą serce Grunt: package.json i Gruntfile.js. Plik pakietu definiuje wszystkie zależności innych firm, z których będzie korzystać automatyzacja, Gruntfile pozwala kontrolować w jaki sposób dokładnie te są używane. Utwórzmy teraz plik pakietu bez kości z następującą treścią:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Nazwa i wersja zależą od Ciebie, zależności muszą zawierać wszystkie używane pakiety. W tej chwili nic nie robimy, więc upewnimy się, że sam Grunt zostanie dodany jako zależność.

Możesz zadać sobie pytanie, co robi tam ta zwinięta linia (~) nazywana tyldą.

Wersje mogą być wymagane przy użyciu reguł z wersji semantycznej dla npm. W skrócie:

• Podajesz dokładną wersję, taką jak 4.5.2
• Możesz użyć więcej niż / mniej niż wskazać minimalną lub maksymalną wersję, taką jak > 4.0.3
• Użycie tyldy określa blok wersji. Za pomocą ~ 1.2 rozumiane jako 1.2.x, dowolna wersja powyżej 1.2.0, ale poniżej 1.3

Dostępnych jest znacznie więcej sposobów określania wersji, ale jest to wystarczające dla większości potrzeb. Następnym krokiem jest stworzenie Gruntfile, który wykona nasze automatyzacje.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ; 

To w zasadzie szkielet dla Gruntfile; są dwa interesujące miejsca. Jedna lokalizacja znajduje się wewnątrz initConfig () funkcjonować. To tam przechodzi cała konfiguracja projektu. Obejmuje to takie rzeczy, jak obsługa kompilacji LESS / SASS, minimalizowanie skryptów i tak dalej.

Druga lokalizacja znajduje się poniżej tej funkcji, w której określasz zadania. Możesz zobaczyć jedno określone zadanie “domyślna”. W tej chwili jest pusta, więc nic nie robi, ale będziemy to dalej rozwijać. Zadania zasadniczo ustawiają kolejkę bitów i elementów z naszej konfiguracji projektu i wykonują je.

Na przykład zadanie o nazwie “skrypty” może połączyć wszystkie nasze skrypty, a następnie zminimalizować wynikowy plik, a następnie przenieść go do ostatecznej lokalizacji. Te trzy akcje są zdefiniowane w konfiguracji projektu, ale są “pociągnięty razem” według zadania. Jeśli to nie jest jasne, ale nie martw się, pokażę ci, jak to się robi.

Nasze pierwsze zadanie

Utwórzmy zadanie, które zminimalizuje pojedynczy plik javascript dla nas.

W każdej chwili musimy zrobić cztery rzeczy, aby dodać nowe zadanie:

• Zainstaluj wtyczkę, jeśli to konieczne
• Wymagaj tego w pliku Gruntfile
• Napisz zadanie
• W razie potrzeby dodaj go do grupy zadań

(1) Znajdź i zainstaluj wtyczkę

Najprostszym sposobem na znalezienie potrzebnej wtyczki jest wpisanie czegoś takiego w Google: “minify wtyczkę javascript”. Pierwszy wynik powinien doprowadzić cię do wtyczki grunt-contrib-uglify, której potrzebujemy.

Strona Github mówi ci wszystko, co musisz wiedzieć. Instalacja jest pojedynczą linią w terminalu, oto co musisz użyć:

 npm zainstaluj grunt-contrib-uglify --save-dev 

Może być konieczne uruchomienie tego z uprawnieniami administratora. Jeśli masz coś takiego npm ERR! Spróbuj ponownie uruchomić to polecenie jako root / Administrator. po drodze wpisz sudo przed poleceniem i wprowadź hasło, gdy zostaniesz o to poproszony:

 sudo npm zainstaluj grunt-contrib-uglify --save-dev 

To polecenie faktycznie analizuje twoje package.json i dodaje go jako zależność, nie musisz tego robić ręcznie.

(2) Wymagaj w Gruntfile

Następnym krokiem jest dodanie do twojego Gruntfile jako wymogu. Lubię dodawać wtyczki na górze pliku, oto mój kompletny plik Grunt po dodaniu grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ; 

(3) Utwórz zadanie do zmniejszania skryptów

Jak mówiliśmy, należy to zrobić w ramach initConfig () funkcjonować. Strona Github wtyczki (i większości innych wtyczek) zawiera mnóstwo informacji i przykładów. Oto co wykorzystałem w moim projekcie testowym.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

To jest całkiem proste, określiłem scripts.js plik w katalogu js mojego projektu i miejsce docelowe dla pliku minified. Istnieje wiele sposobów określania plików źródłowych. Przyjrzymy się temu później.

Na razie spójrzmy na kompletny plik Grunt po tym, jak został on dodany, aby upewnić się, że wiesz, jak rzeczy pasują do siebie.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('default', []); ; 

(4) Dodaj tę konfigurację do grupy zadań

Teraz możesz przejść do swojego terminala i wpisać chrząknąć ale będziemy potrzebować grup zadań, aby później uruchomić wiele zadań. Mamy domyślne zadanie puste, tylko czekamy, aż coś zostanie dodane, więc zmodyfikujmy je w następujący sposób:

 grunt.registerTask ('default', ['uglify']); 

Na tym etapie powinieneś być w stanie przejść do terminala, wpisz chrząknięcie i zobacz, jak odbywa się minifikacja. Nie zapomnij utworzyć scripts.js plik oczywiście!

Nie trzeba było dużo czasu, żeby to zrobić? Nawet jeśli jesteś nowicjuszem w tym wszystkim i zajęło ci trochę czasu, aby przejść przez kolejne kroki, czas, który oszczędza, przewyższy czas spędzony na nim w kilku zastosowaniach.

Łączenie plików

Spójrzmy na konkatenację plików i dowiedz się, jak określić wiele plików jako cel po drodze.

Konkatenacja to proces łączenia zawartości wielu plików w jeden plik. Będziemy potrzebować wtyczki grunt-contrib-concat. Przejdźmy przez kroki:

Aby zainstalować wtyczkę npm zainstaluj grunt-contrib-concat --save-dev w terminalu. Po zakończeniu dodaj go do swojego Gruntfile, tak jak przed użyciem grunt.loadNpmTasks ('grunt-contrib-concat');.

Następna w kolejności jest konfiguracja. Połączmy trzy określone pliki, składnia będzie znajoma.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,, 

Powyższy kod pobiera trzy pliki podane jako źródło i łączy je w plik podany jako miejsce docelowe.

To jest już dość potężne, ale co jeśli dodany zostanie nowy plik? Czy musimy tu ciągle wracać? Oczywiście, że nie, możemy określić cały folder plików do połączenia.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,, 

Teraz każdy plik javascript w folderze dev / js zostanie scalony w jeden duży plik: js / scripts.js, dużo lepiej!

Teraz nadszedł czas, aby utworzyć zadanie, abyśmy mogli połączyć niektóre pliki.

 grunt.registerTask ('mergejs', ['concat']); 

To nie jest już domyślne zadanie, więc gdy wydamy., Musimy wpisać jego nazwę w terminalu chrząknięcie dowództwo.

 gruntować mergejs 

Automatyzacja naszej automatyzacji

Osiągnęliśmy już wiele postępów, ale jest ich więcej! Na razie, gdy chcesz połączyć lub zminimalizować, musisz przejść do terminala i wpisać odpowiednie polecenie. Najwyższy czas spojrzeć na zegarek polecenie, które zrobi to za nas. Dowiemy się również, jak wykonać wiele zadań naraz, po drodze.

Aby iść, musimy złapać chrząknięcie-contrib-watch. Jestem pewien, że możesz go zainstalować i dodać do Gruntfile na twoim własnym już teraz, więc zacznę od pokazania, co używam w moim projekcie testowym.

 watch: scripts: files: ['dev / js / *. js'], zadania: ['concat', 'uglify'],, 

Wymieniłem zestaw plików do obejrzenia “skrypty”, po prostu wiem, co to robi. W tym obiekcie mam określone pliki do obejrzenia i zadania do uruchomienia. W poprzednim przykładzie konkatenacji zgromadziliśmy wszystkie pliki w katalogu dev / js.

W przykładzie minifikacji zminifikowaliśmy ten plik. Sensowne jest oglądanie folderu dev / js w poszukiwaniu zmian i uruchamianie tych zadań w dowolnym momencie.

Jak widać, wiele zadań można łatwo nazwać, oddzielając je przecinkami. Będą one wykonywane sekwencyjnie, najpierw konkatenacja, a następnie minifikacja w tym przypadku. Można to również zrobić z grupami zadaniowymi, co jest powodem ich istnienia.

Możemy teraz zmodyfikować nasze domyślne zadanie:

 grunt.registerTask ('default', ['concat', 'uglify']); 

Teraz mamy dwie możliwości. Kiedykolwiek chcesz połączyć i zminimalizować swoje skrypty, możesz przełączyć się na terminal i typ chrząknięcie. Możesz także użyć polecenia watch, aby rozpocząć oglądanie swoich plików: gruntowny zegarek.

Będzie tam siedział, czekając na modyfikację tych plików. Gdy to zrobisz, wykona wszystkie zadania, które mu przypisano, idź dalej, spróbuj.

To dużo lepiej, nie potrzebujemy od nas żadnych danych. Możesz teraz pracować z plikami i wszystko będzie dla Ciebie ładnie wykonane.

Przegląd

Z tą podstawową wiedzą o tym, jak można instalować i używać wtyczek i jak działa komenda zegarka, jesteś gotowy, aby stać się uzależnionym od automatyzacji. Grunt ma znacznie więcej niż to, o czym dyskutowaliśmy, ale nic, czego sam nie mógłbyś znieść.

Używanie poleceń do kompilacji SASS, optymalizacja obrazów, autoprefiksowanie i wiele więcej to kwestia przestrzegania kroków, o których mówiliśmy i czytania składni wymaganej przez wtyczkę.

Jeśli znasz jakieś szczególnie użyteczne zastosowania Grunt, daj nam znać w komentarzach, zawsze jesteśmy zainteresowani tym, jak używasz narzędzi takich jak Grunt!