09 / 05 / 2017 Developers

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ą zasoby CSS czy JavaScript oraz wczytują zmiany automatycznie za każdym razem, gdy plik zostanie zapisany.

Instalacja

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

var
  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

Podsumowanie

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 Grunt’a aktualizuje go


Pomimo iż zauważyłam, ż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łam 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.

FacebookTwitterGoogle+LinkedIn
  • Łukasz Gadzina

    Teraz to sie webpacka uzywa 😉