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
[code lang=”JavaScript”]
npm install gulp
[/code]
Komenda zainstaluje globalnie narzędzie gulp. Aby zainstalować gulp tylko w projekcie, należy wykonać poniższą komendę
[code lang=”JavaScript”]
npm install –save gulp
[/code]
W folderze ng mam same pliki *.js. Tworzę osobny plik gulpfile.js kod zawarty w pliku poniżej
[code lang=”JavaScript”]
var fs = require(’fs’)
fs.readdirSync(__dirname + '/gulp/’).forEach(function(task) {
require(’./gulp/’ + task)
})
[/code]
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.
[code lang=”JavaScript”]
var gulp = require(’gulp’)
gulp.task(’js’, function() {
return gulp.src([’ng/module.js’, 'ng/**/*.js’])
.pipe(concat(’app.js’))
.pipe(gulp.dest(’assets’))
})
[/code]
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
[code lang=”JavaScript”]
gulp js
[/code]
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 🙂