Narzędzia frontendowca: Gulp

Czym jest Gulp?

Gulp to narzędzie do automatyzacji zadań (ang. task runner), który pozwala nam zautomatyzować czynności, które często musimy powtarzać ręcznie, a my możemy wtedy skupić się na radosnym i produktywnym klepaniu kodu.

Aby zdać sobie w pełni sprawę z możliwości, najlepiej przejrzeć listę dostępnych pluginów.

Z doświadczenia wiem, że ludzie najpierw zwracają uwagę na funkcję ‘watch’, która obserwuje, czy zmieniła się zawartość podanych plików i wykonuje na nich zdefiniowane przez nas zadania, takie, przykładowo, jak:

• Konwertowanie plików .scss lub .less do .css,
• Automatyczne dodawanie prefixów do reguł CSS (np. display: flex),
• Generowanie sourcemap, dzięki którym w inspektorze przeglądarki mamy odniesienie do linii w pliku źródłowym .sass a nie skompilowanym .css,
• Kompresja wynikowego pliku css,
• Automatyczne generowanie sprite’ów obrazkowych,
• Łączenie wielu skryptów javascript w jeden,
• Automatyczne odświeżenie przeglądarki po edycji plików.

Wystarczy, że raz użyjemy komendy $ gulp watch i wszystkie te czynności są wykonywane za nas. Możemy się skupić na pisaniu kodu.

Jak używać, jak żyć?

Przede wszystkim musisz mieć zainstalowany w systemie node.js. Ja osobiście preferuję instalację poprzez nvm (Node Version Manager) ponieważ mogę łatwo przełączać się pomiędzy wersjami noda, gdy zachodzi taka potrzeba, bo np. Mam stary projekt, gdzie używamy bibliotek wymagających jakieś antycznej wersji noda.

Teraz zainstaluj Gulp:

sudo npm install -g gulp

Flaga ‘-g’ zainstaluje narzędzie globalnie w systemie, dzięki czemu będziesz miał w konsoli dostęp do komendy gulp.

Teraz masz dwie możliwe drogi do wyboru:

a) Użycie “czystego” gulpa i skonfigurowanie wszystkich zadań samemu:
Przejdź do katalogu projektu (może to być Twój theme drupala), dodaj npm poprzez npm init i wykonaj wyświetlane polecenia. Teraz czas dodać gulp do naszego projektu: npm install gulp --save-dev
Polecenie to doda gulpa do listy wymaganych bibliotek w projekcie.

b) Wykorzystanie dowolnej istniejącej konfiguracji poprzez skopiowanie do swojego projektu pliku ‘gulpfile.js’ oraz ‘package.json’ i wykonanie komendy npm install.

Aby zainstalować nowy plugin postępujemy jak przy instalacji każdego pakietu npm:

npm install nazwa-pluginu --save-dev

Przykład użycia

1. Bardzo prosta konfiguracja służąca tylko do śledzenia zmian w plikach .scss i konwertująca je do pojedynczego pliku .css

var gulp = require("gulp");
var sass = require("gulp-sass");
//Additional configuration and import node libraries
var sassOptions = {
   errLogToConsole: true,
   outputStyle: 'expanded',
   includePaths: require('node-bourbon').includePaths,
   includePaths: require('node-neat').includePaths
};
// Allow to inspect scss files in browser's css inspector.
var sourcemaps = require('gulp-sourcemaps');
var shell = require('gulp-shell');
// Automatically create browser-related prefixes in CSS rules.
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var merge = require('merge-stream');
//Supported browsers
var autoprefixerOptions = {
 browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};
// Convert all .scss files into single .css 
gulp.task('sass', function() {
 return gulp.src('./scss/**/*.scss')
   .pipe(sourcemaps.init())
   .pipe(sass(sassOptions).on('error', sass.logError))
   .pipe(autoprefixer(autoprefixerOptions))
   .pipe(concat('style.css'))
   .pipe(sourcemaps.write('../maps'))
   .pipe(gulp.dest('./css'));
});
// Process JS files and return the stream.
gulp.task('js', function() {
 return gulp.src('js/*js')
   .pipe(gulp.dest('js'));
});
// Default task to be run with single `gulp` command.
// By default we want to watch for changes in our .scss and .js files and then run defined tasks.
gulp.task('default', ['sass', 'js'], function() {
 gulp.watch("scss/**/*.scss", ['sass']);
 gulp.watch("js/*.js", ['js']);
});

2. Jeśli jesteś deweloperem drupala, to świetnym przykładem jest przeanalizowanie plików package.json oraz gulpfile.js w szablonie graficznym o nazwie Neato. Sam szablon też jest wart uwagi, bo wykorzystuje Bourbon i Neat o którego zaletach napiszę w jednym z kolejnych postów.

Podsumowanie

Gulp jest narzędziem prostym do nauki i łatwym wdrożenia w istniejącym projekcie, bo jeśli już go skonfigurujemy jednorazowo, to potem działa na zasadzie “uruchom i zapomnij”. Świetnie sprawdza się w małych i średnich projektach w przyspieszeniu pracy oraz pomaga utrzymać spójny standard kodowania (wykorzystanie csslint oraz jslint) do których reguły trzymamy w repozytorium projektu i każdy developer ich używa nie zawracając sobie głowy konfiguracją.

Ważne jest też to, że wprowadza do projektu npm’a dzięki czemu w przyszłości łatwo nam będzie w razie potrzeby użyć skryptów npm, czy uruchamiać przez Gulp bundlery takie jak Webpack, czy Browserify.