Grunt.JS część 2

W drugiej części artykułu poświęconego Grunt.JS, pokażę kilka moim zdaniem bardzo przydatnych pluginów i opiszę ich podstawową konfigurację. Zakładam, że czytelnik nie ma problemu z ładowaniem pluginu i przypisaniem zadania, także nie będę o tym wspominał w tym poście. W pierwszej kolejności zajmiemy się preprocesorami CSS.

SASS

Czym jest SASS tłumaczyć chyba nie muszę. Standardowo udostępnia on opcję watch, która obserwuje pliki .scss i w przypadku wykrycia zmian kompiluje je do plików .css. Jednak zamiast uruchamiać ją osobno fajnie by było także i ten element kontrolować za pomocą Grunt.js.

Aby przenieść na Grunta zadania związane z SASS można użyć wtyczki contrib-sass. W celu jej instalacji, na katalogu gdzie używamy SASS i mamy skonfigurowanego Grunt.js wykonujemy polecenie:

Następnie w pliku Grunt.js dodajemy w funkcji initConfig() następującą sekcję:

Po strukturze obiektu zawierającego konfigurację zadania nie trudno domyśleć się co do czego służy. Oczywiście ta wtyczka posiada jeszcze kilka opcji do skonfigurowania i więcej o nich można przeczytać tutaj.

Teraz gdy wpiszemy w konsoli grunt, pliki .scss zostaną skompilowane do plików .css. To rozwiązanie ma jednak pewną dość poważną wadę – mianowicie aby skompilować pliki trzeba wpisać za każdym razem słowo grunt w konsoli. Jest to dużo mniej wygodne niż użycie opcji watch osobno w konsoli. Rozwiązaniem tego problemu zaprezentuje po opisie plugin’u dla LESSa.

LESS

Odpowiednikiem plugin’u contrib-sass dla LESSa jest contrib-less. Instaluje się go analogiczna jak contrib-sass. Poniżej pokażę także podstawową konfigurację wtyczki:

Więcej informacji o pluginie można znaleźć tutaj. Teraz gdy contrib-less został skonfigurowany można kompilacje plików .less w projekcie uruchomić za pomocą polecenia grunt. To może nie jest nic porażającego ale następny dodatek jaki pokaże sprawi, że będziemy mogli zapomnieć o ciągłym wpisywaniu słowa grunt w konsoli.

Watch

Pełna nazwa to grunt-contrib-watch. Jest to dodatek, który sprawdza czy w naszym projekcie (konkretnie w plikach, które ustalimy w konfiguracji) nastąpiły jakieś zmiany, a jeśli tak, uruchamia predefiniowane zadania. Najprościej porównać go do trybu Watch w SASS’ie. Gdy uruchomisz to zadanie , możesz zapomnieć o ręcznym uruchamianiu pojedynczych zadań.

Teraz przykład konfiguracji:

W tablicy files zdefiniowane są pliki, które mają być obserwowane , a w tablicy tasks zadania jakie mają być uruchomione po zmodyfikowaniu któregoś z wskazanych wcześniej plików. Następnie na końcu pliku Gruntfile.js, w funkcji registerTask wpisujemy jako jedyne zadanie „watch”. Teraz gdy wpiszemy w konsoli grunt pojawi się napis: Running „watch” task Waiting… Gdy zmodyfikujemy któryś z plików podanych w sekcji file Grunt uruchomi zadania podane w sekcji tasks. Możemy w tym momencie zapomnieć o ciągłym wpisywaniu słowa grunt w konsoli 😉

Testy jednostkowe

Standardowo testy jednostkowe pisane z użyciem Jasmine można uruchomić w przeglądarce i aby uruchomić je w CLI potrzebujemy oprócz Grunta jeszcze jednego komponentu – PhantomJS. Nie będę go w tym miejscu opisywał. Informacje na ten temat można znaleźć tutaj.

Konfiguracja PhantomJS jest prosta i w przypadku Windowsa sprowadza się do wypakowania pliku exe i dodanie jego ścieżki do zmiennych środowiskowych. Pobrać PhantomJS i uzyskać informacje np. na temat instalacji na innych OSach można tutaj.

Teraz należy zainstalować plugin grunt-contrib-jasmine (npm install grunt-contrib-jasmine). Szersze info o wtyczce tutaj. Jego podstawowa konfiguracja jest bardzo prosta:

Jak można się domyślić – src to pliki z funkcjami do przetestowania, a w specs podajemy plik z testami. Teraz gdy wpiszemy grunt w konsoli zostaną wykonane testy 😉 Metoda znacznie wygodniejsza od ręcznego uruchamiania w przeglądarce 😉

Do przeczytania wkrótce 😉

Posty które mogą Cię zainteresować:

7 Responses to Grunt.JS część 2
  1. MAciej Odpowiedz

    Grunt to wiedzieć coś o grunt.js 🙂

    Przydatne informacje.

  2. Daniel Odpowiedz

    Z tego co widzę to grunt.js to taki odpowiednik rake z Rubiego.

    • Michał Janicki Odpowiedz

      Tak – wygląda na to że masz rację.

  3. KrystianMalinowski Odpowiedz

    Myślałem o tym żeby przejść z Gulpa na Grunta, ale przenoszenie wszystkich projektów zajęłoby mi masę czasu. Może z kolejnymi będę działać już na Gruncie. Fajnie przedstawione zagadnienie. Pozdrawiam!

    • Michał Janicki Odpowiedz

      Cieszę się że się podobało 😉

      • adeptofvoltron Odpowiedz

        Gulp to taki młodszy bral Grunt’a. I jeśli mam obstawiać, to prędzej grunt przestanie być wspierany..doradzam więc byś „pozostał” na gulpie.

        • Michał Janicki Odpowiedz

          Nie przekreślałbym Grunt’a tak szybko. Ma ponad 5 tyś różnych pluginów (Glup.js nie dobił chyba jeszcze do 2 tyś) i znacznie większą społeczność niż Glup.js. To są dość istotne argumenty przemawiające za Grunt.js. Nie twierdzę, że Glup.js jest zły ale już nie raz okazało się że rozwiązanie technicznie lepsze przegrywało z rozwiązaniem gorszym ale popularniejszym.

Dodaj komentarz

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