Grunt.JS część 1

Czas jest najcenniejszym dobrem jakim dysponujemy. W przeciwieństwie do np. pieniędzy – czasu nie można zarobić, nie można go odzyskać. Jedyne co możemy zrobić to go oszczędzać. Dlatego właśnie liczy się każda minuta. Ktoś może pomyśleć, że nie warto się wysilać dla oszczędzenia tych  5 minut, ale spójrzmy na to w inny sposób.

Jeśli pracujemy 8 godzin każdego dnia, a w ciągu każdej godziny oszczędzimy 5 minut to oznacza, że w ciągu dnia oszczędziliśmy już 40 minut. Idąc dalej tym tropem (załóżmy, że pracujemy 20 dni w miesiącu) w ciągu miesiąca jest to ponad 13 godzin zaoszczędzonego czasu a w ciągu roku prawie 160 godzin czyli… 20 dni roboczych po 8 godzin. Nawet oszczędzając tylko 5 minut dziennie w skali roku daje to ponad 30 godzin zaoszczędzonego czasu. Wnioski wyciągnijcie sami.

Tematem przewodnim tego i następnego artykuł będzie Grunt.js (grunt oznacza chrząknięcie) moduł dla node.js dzięki, któremu można zautomatyzować wykonywanie takich zadań jak uruchamianie testów jednostkowych czy kompresja plików JS lub CSS. Oczywiście to nie wszystko co Grunt.js potrafi – a liczba rozszerzeń przeznaczony dla niego jest całkiem spora. Zacznijmy jednak od początku.

Instalacja

W pierwszej kolejności należy zainstalować node.js. Następnie należy uruchomić CLI naszego systemu operacyjnego na prawach Administratora lub jego odpowiednika w innych systemach operacyjnych i użyć polecenia:

Jak łatwo zauważyć spowoduje ono zainstalowanie grunt-cli. Flaga –g oznacza że jest to instalacja globalna – dla całego systemu. Pozostałe elementy będą instalowane lokalnie w projekcie, w którym będziemy używać Grunt.js w katalogu node_modules.

Grunt-CLI służy do tego aby uruchomić odpowiednią wersję modułu  w naszym projekcie. Dzięki temu możemy mieć zainstalowane różne wersje Grunt.js na tej samej maszynie. Można także używać w konsoli słowa kluczowego grunt.

Przygotowanie projektu: package.json

Aby przygotować taki plik należy przejść do katalogu głównego naszego projektu i wywołać polecenie:

W tym momencie zostanie zadany szereg pytań (nazwa, wersja, opis etc.). Po odpowiedzi na nie, zostanie utworzony plik package.json.  Gdy go otworzycie,  waszym oczom ukaże się coś podobnego do tego co poniżej:

Jeszcze mała dygresja. W tym artykule nie będę się rozpisywał na temat zawiłości pliku package.json, samego node.js lub npm. Więc gdyby ktoś z was zapragnął dowiedzieć się czegoś więcej na ten  temat to odsyłam tutaj i tutaj. Być może sam też coś kiedyś na ten temat napiszę.

Wracając do samego pliku. Większość z wygenerowanych kluczy nie będzie nam potrzebna. W zasadzie potrzebujemy tylko name i version. Resztę spokojnie możemy usunąć. Następnie należy stworzyć obiekt devDependencies. W tym obiekcie przechowywane informacje o tym jakie komponenty za chwilę zainstalujemy w naszym projekcie. Gdy stworzymy odpowiedni plik package.json możemy go wykorzystać w naszych kolejnych projektach. Gdy wykonamy na katalogu w którym umieściliśmy package.json komendę:

zainstalowane zostaną wszystkie moduły jakie umieściliśmy w sekcji devDependencies. Dzięki temu oszczędzamy mnóstwo czasu na instalacji poszczególnych komponentów, a sam plik może służyć nam naprawdę długo.

Same pluginy dla Grunt.js można instalować pojedynczo za pomocą polecenia:

Przykładowo polecenie:

zainstaluje plugin contrib-uglify służący do minifikacji plików JS. Plugin można zainstalować także używając flagi –save-dev. Spowoduje to że oprócz standardowej instalacji pluginu zostanie dodany wpis do obiektu  devDependencies. Przykład poniżej:

Po wykonaniu powyższej komendy nasz plik package.json będzie podobny do tego co widać poniżej:

I to w zasadzie wszystko jeśli chodzi o plik package.json. Czas zająć się drugim ważnym elementem czyli plikiem Grunt.js.

Przygotowanie projektu: Gruntfile.js

W tym pliku konfigurujemy poszczególne pluginy. Jako przykład posłuży plugin contrib-uglify. Każdy plik zaczyna się od następującej funkcji:

Następnie wywołujemy funkcje initConfig(), której przekażemy obiekt z właściwą konfiguracją zadań.

};

Pierwszy element tego obiektu (pkg) jest raczej niezmienny. W ten sposób przekazujemy metadane na temat projektu, z których później będziemy mogli skorzystać podczas konfiguracji poszczególnych pluginów. Nie jest to element obowiązkowy, ale pokażę przykład, w którym takie dane mogą się przydać.

Następny obiekt nazywa się tak jak plugin (uglify) i zawiera jego konfiguracje.  Konfiguracja jest dość prosta – w przykładowym projekcie plugin ma za zadanie wszystkie pliki JS znajdujące się w katalogu src (‘src/*.js’) połączyć i zminifikować do pliku output.min.js. Można oczywiście podać także tablicę konkretnych plików, których to zadanie się tyczy ([‘src/test.js’, ‘src/test2.js’]).

Plugin ten ma dużo więcej ciekawych opcji, po szczegóły odsyłam tutaj. W tym artykule zaprezentuje dwie najprostsze funkcje.

Następnie po funkcji initConfig() ładujemy zadanie w następujący sposób:

Grunt.js w akcji

Teraz przechodzimy do konsoli a w niej do katalogu głównego naszego projektu i wpisujemy:

Naszym oczom powinien ukazać się zielony napis „Done, without errors” a w katalogu src powinien pojawić się plik output.min.js zawierający zminifikowane wszystkie pliki JS.

Inną ciekawą opcją tego pluginu jest możliwość dodawania na początku wygenerowanego przez niego pliku tzw banera – czyli komentarza zawierającego jakieś informacje (licencje, info o nas, etc). Przykładowa konfiguracja tej opcji w przykładzie poniżej:

Jak widać w specjalnych znacznikach korzystam z właściwości obiektu pkg. W tych znacznikach można także wywoływać różne funkcje Grunta takie jak ta zwracająca datę. Teraz należy usunąć plik output.min.js (bo zostanie także zminifikowany ;)) i ponownie wywołać w konsoli grunt uglify. Po kilku sekundach otrzymamy nową wersję output.min.js z banerem.

Prawda, że szybko. Jest tylko jeden problem – jeśli mamy klika zadań musimy w takim wypadku dla każdego zadania wywoływać osobne polecenie (grunt to, grunt tamto, grunt etc). Jest jednak i na to sposób.

Aby go przedstawić zainstalujemy nowy plugin w naszym projekcie, który nazywa się contrib-cssmin. Służy on do łączenia i kompresji plików CSS. Jego podstawowa konfiguracja jest praktycznie taka sama jak pluginu uglify. Aby go zainstalować w konsoli wpisujemy:

Następnie w pliku Gruntfile.js  do obiektu, który zawiera konfiguracje pluginów dodajemy następujący fragment:

A potem dodajemy jeszcze linijkę ładującą plugin:

Teraz, gdy w konsoli wpiszemy grunt cssmin to zostaną skompresowane pliki podane w tablicy w konfiguracji pluginu. Ten plugin także ma możliwość zdefiniowania banneru. Więcej informacji o nim można znaleźć tutaj.

Wracając do naszego problemu – w Grunt.js istnieje możliwość zdefiniowania zadania domyślnego, które będzie uruchamiane po wpisaniu w konsoli tylko słowa grunt. Robi się to w następujący sposób:

Jak nie trudno zauważyć – zadanie uglify zostało umieszczone w tablicy co znaczy, że można tam dodać inne zadania np. cssmin 😉 Po tym zabiegu gdy w konsoli wpiszemy grunt zostaną wykonane oba  zdefiniowane zadania.

Podsumowanie

Czyż to nie wspaniałe? W kilka sekund może zostać wykonanych za nas wiele zadań. Biblioteka różnego typu pluginów dla Grunt.js jest naprawdę duża – każdy znajdzie coś dla siebie.

W następnej części artykułu opiszę plugin kompilujący pliki less, uruchamiający testy jednostkowe napisane w Jasmine. Pokaże także sposób aby jeszcze bardziej zautomatyzować wykonywanie zadać.

Do przeczytania już wkrótce!

P.S. Przykładowy projekt można pobrać z stąd (wystarczy zainstalować node.js i Grunt,js a na katalogu z projektem wykonać npm install i wszystko powinno działać)

Posty które mogą Cię zainteresować:

Dodaj komentarz

Your email address will not be published. Please enter your name, email and a comment.