Instalacja gulp’a w MyTwitter

Commits on Jun 30, 2017

W tym wpisie przedstawie narzędzie Gulp które zainstalowałem w projekcie, zapraszam.

Co to gulp?

Jest to jedno z wielu narzędzi służących do kompilacji. Odpowiednikiem Gulpa może być Grunt.
Mówiąc po ludzku, gulp pozwala nam złączyć kilka plików js, czy css w jeden plik js czy css. Dla przykładu w projekcie mam folder ng w którym są same pliki JavaScript z Angularem. Po stworzeniu pliku konfiguracyjnego gulp i po zapisaniu w nim pewnych reguł, jesteśmy w stanie jedną komendą  stworzyć jeden plik który możemy dołączyć do strony html, mamy jeden link do kodu z całym js’em.
Przykład:

Aby zainstalować gulp’a należy wydać polecenie

npm install gulp

Komenda zainstaluje globalnie narzędzie gulp. Aby zainstalować gulp tylko w projekcie, należy wykonać poniższą komendę

npm install --save gulp

W folderze ng mam same pliki *.js. Tworzę osobny plik gulpfile.js kod zawarty w pliku poniżej

var fs = require('fs')
fs.readdirSync(__dirname + '/gulp/').forEach(function(task) {
    require('./gulp/' + task)
})

Powyższy kod wykonuję wszystkie pliki które znajdują się w folderze gulp. W folderze gulp przechowuje pliki z kodem, które są odpowiedzialne za generowanie jednego spójnego pliku z swoim rozszerzeniem, script.js generuje assets/app.js, zaś css.js generuję assets/app.css. Plik konfiguracyjny gulpa jest zapisany w języku JavaScript, do zalet można zaliczyć, że pliki konfiguracyjne w gulpie są krótkie.

var gulp = require('gulp')
gulp.task('js', function() {
    return gulp.src(['ng/module.js', 'ng/**/*.js'])
        .pipe(concat('app.js'))   
        .pipe(gulp.dest('assets'))
})

Powyższy kod przedstawia zastosowanie gulpa. Tworzymy zadanie o nazwie js które ma na celu pobrać zawartość plików i wygenerować nowy. W pierwszej kolejności pobiera kod z ng/module.js a później wszystkie pozostałe pliki z folderu ng z rozszerzeniem *.js. Po złączeniu wszystkich plików js w jeden, zapisz go w folderze assets pod nazwą app.js

Aby uruchomić naszego gulpa do wygenerowania plików używamy komendy

gulp js

Gdy wszystko zadziałało pomyślnie naszym oczom powinien ukazać się poniższy komunikat

Gulp posiada mnóstwo wtyczek którą mogą okazać się niezbędne podczas scalania wszystkich plików. Przykładowe wtyczki tutaj. Ja w projekcie użyłem takie wtyczki (wraz z rozwojem projektu mogą one ulec zmianie) rubryka dependencies wtyczki zaczynają się gulp-… po informacje w jaki sposób działają wtyczki zapraszam do dokumentacji wystarczy wpisać gulp-NazwaWtyczki i wyszukać informacji.

Pozdro 🙂