Gulp vs Grunt

W jednym z poprzednich artykułów poruszony został temat preprocesorów CSS. Natomiast w niniejszym porównam dwa narzędzia przydatne do automatyzacji pracy każdego web developera. Ułatwiają pracę z preprocesorami, takimi jak Sass czy LESS, optymalizują zasobu CSS czy JavaScript oraz wczytują zmiany automatycznie za każdym razem, gdy plik zostanie zapisany.

Instalacja Gulp i Grunt

Oba narzędzia oparte są o platformę Node.js, dopiero po jej instalacji będzie możliwa instalacja Gulp’a lub Grunt’a, a odbywa się to poprzez wywołanie odpowiedniej komendy w konsoli.

GULP: npm install -g gulp
GRUNT: npm install -g grunt-cli

Obie komendy służą do instalacji globalnej, komenda do instalacji lokalnej wygląda następująco:

GULP: npm install gulp --save-dev
GRUNT: npm install grunt --save-dev

Przed rozpoczęciem korzystania z Gulpa czy Grunta musimy najpierw stworzyć plik konfiguracyjny i umieścić go w głównym katalogu naszego projektu. W przypadku Gulp’a będzie to gulpfile.js, a w przypadku Grunt’a gruntfile.js, oba pliki można stworzyć z konsoli za pomocą komendy touch nazwa_pliku.

Podstawy konfiguracji Gulp

Przykładowa minimalna zawartość pliku, w nim zawarta będzie cała konfiguracja:

var gulp = require('gulp');
    gulp.task(‘default’,function() {
    console.log(‘Hello!’);
});

Transformacja pliku LESS do CSS

W tym celu należy zainstalować wtyczkę gulp-less, w tym celu w konsoli wpisujemy:

npm install --save-dev gulp-less

Następnym krokiem będzie konfiguracja zadania i w tym celu wykorzystany nasz wcześniej utworzony plik gulpfile.js:

gulp = require('gulp'),
  less = require('gulp-less'),
  path = require('path');
gulp.task('less', function () {
  return gulp.src('./layout/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

Na początku należy zaimportować wtyczki za pomocą require. Zadanie definiujemy poprzez użycie funkcji task. Zostaną tutaj przekazane dwa parametry,mianowicie nazwa zadania oraz funkcja, która mówi gdzie implementujemy nasze zadanie. Jedna z linii przekazuje ścieżkę do plików LESS, użycie *.less informuje o tym, że interesują nas tylko pliki z takim rozszerzeniem. Kolejne linie kodu (8-10) służą do transformacji plików LESS na CSS, w tym celu użyto funkcji pipe. Linia 11 zwraca nam plik wynikowy transformacji.

Najważniejsze funkcje

• gulp.task – służy do definiowania naszych zadań
• gulp.watch – uruchamia daną funkcję jak tylko zostaną zmienione pliki
• gulp.src – wskazuje na pliki z których korzystamy
• gulp.dest – zapisuje plik do określonej lokalizacji

Podstawy konfiguracji Grunt

Podstawowa zawartość pliku

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        taskName: {         //nazwa zadania
            options: {      //opcje

            },
            operations: {   //operacje
            }
        }
    });
    grunt.loadNpmTasks('grunt-module');                 // w taki sposób ładujemy nasze moduły
    grunt.registerTask('default', ['taskName']);        // określany jakie zadania wykonują się po wpisaniu w konsoli grunt
};

Transformacja pliku SASS do CSS

W konsoli wpisujemy następujące polecenie:

npm install grunt-libsass --save-dev

Po zainstalowaniu wtyczki możemy przejść do konfiguracji w pliku gulpfile.js

libsass: {                                          // zadanie główne
    files: {
        expand: true,
        src: ['css/style.scss'],               // pliki na których domyślnie ma być wykonane zadanie
        dest: '',                                    // gdzie mają się zapisać skompilowane pliki CSS (w tym przypadku zapisze się w lokalizacji pliku Sass)
        ext: '.css'                                // rozszerzenie po skompilowaniu
    }
}

Załadowanie zadanie odbywa się poprzez użycie:

grunt.loadNpmTasks('grunt-libsass');

Nasz plik powinien teraz wyglądać następująco:

module.exports = function(grunt) {
            grunt.initConfig({
                    pkg: grunt.file.readJSON('package.json'),
                libsass: {
                        files: {
                                expand: true,
                                src: ['css/style.scss'],
                                dest: '',
                                ext: '.css'
                        }
                    }
            });

            grunt.loadNpmTasks('grunt-libsass');
  };

Aby zmiany były widoczne zaraz po zapisaniu ich w danym pliku warto dopisać jeszcze:

watch: {
            scss: {                         // możemy określić dowolną nazwę
                    files: ['css/*.scss'],  // określamy na jakich plikach pracujemy
                    tasks: ['libsass']      // wybieramy zadania jakie na nich wykonujemy, po kolei
            }
  }

Natomiast zadanie ładujemy za pomocą:

grunt.loadNpmTasks('grunt-contrib-watch');

Dodajemy również funkcję watch do domyślnych zadań:

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

Po zapisaniu pliku gulpfile.js i wywołania w konsoli polecenia grunt, każda modyfikacja wykonana na pliku SASS w folderze css będzie kompilowana i zapisywana do pliku wynikowego. Trzeba jednak pamiętać, że zamknięcie konsoli, zamknie nam zadanie i kompilacja zostanie przerwana.

Konfiguracja Grunta – initConfig

• grunt-contrib-qunit – odpalenie testów
• grunt-contrib-uglify – zminifikuje pliki JavaScript
• grunt-contrib-cssmin – zminifikuje pliki CSS
• grunt-contrib-concat – połączy pliki w jeden
• grunt-contrib-copy – kopiuje pliki z jednej lokalizacji do drugiej
• grunt-contrib-htmlmin – zminifikuje pliki HTML

Wady i zalety – Gulp vs Grunt

	Gulp	Grunt
Zalety	zapewnia minifikację i konkatenację używa czystego kodu JavaScript konwertuje pliki (np Sass do CSS) operacje wykonywane są w pamięci sposób definiowania tasków jest przejrzysty ponad 2000 wtyczek	łatwość w wykonywaniu minifikacji, kompilacji i testowaniu plików operacje są wykonywane na plikach tymczasowych, przez co jest mniej wydajny ponad 5000 wtyczek
Wady	nie można wykonywać wiele zadań nowicjusz w porównaniu z Gruntem	sposób definiowania tasków jest nieczytelny pakiety nie są jednocześnie aktualizowane Node.js jeśli pakiety npm zostały zaktualizowane, trzeba czekać aż autor Grunta aktualizuje go

Pomimo iż zauważyłem, że Gulp jest rzadziej zalecanym narzędziem do automatyzacji pracy web developera, to liczba jego zwolenników z dnia na dzień wzrasta. Z nim mam największą styczność przy pracy w różnych projektach. Z informacji od kolegów i tego co wyczytałem na forach, to właśnie Gulp jest tym narzędziem, który wykonuje operacje w szybciej i to dlatego coraz częściej się po niego sięga.