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

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.