Oficjalnie cofam to, co napisałam tutaj. Nie wszystko oczywiście ;), a tylko kawałek o tym, że nie mam palącej potrzeby używania narzędzia do automatyzacji, bo apka mała i piszę ją sama, w pojedynkę. Otóż - po zainstalowaniu Handlebarsowego pluginu do Gulpa dobitnie przekonałam się, o ile szybciej i wygodniej jest z Gulpem niż bez niego. Tak więc - potrzebuję go. To więcej niż pewne.
W ogóle wraz z wprowadzeniem Gulpa w kodzie mojej aplikacji zaszły spore zmiany. (Nie spodziewałam się, że Gulp aż tyle zmieni.) Pewne rzeczy nabrały przyspieszenia i stały się o wiele prostsze. Ale po kolei.
Co i jak się zmieniło?
Przede wszystkim, dodanie pluginu Handlebars znacząco uprościło tworzenie warstwy widoku, ustrukturyzowało pliki i skróciło kod o kilkanaście linijek. Przed zastosowaniem Gulpa miałam w index.html
kilka osobnych szablonów Handlebars. Każdy z nich wymagał skomplilowania oraz wywołania - z odpowiednimi danymi, które docelowo miały znaleźć się w widoku. Do kompilowania szablonów (linijki 9-19) używałam funkcji compileSingleHbsTemplate
(linijki 5-8):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var app = { templates: {}, models: {}, helper: { compileSingleHbsTemplate: function(selector) { var source = $(selector).html(); return Handlebars.compile(source); }, compileHbsTemplates: function() { app.templates.homePage = app.helper.compileSingleHbsTemplate('#home'); app.templates.addAndEditBookFormTemplate = app.helper.compileSingleHbsTemplate('#add-edit-book'); app.templates.filterBooksPageTemplate = app.helper.compileSingleHbsTemplate('#filter-books'); app.templates.wishListPage = app.helper.compileSingleHbsTemplate('#wish-list'); app.templates.booksListPage = app.helper.compileSingleHbsTemplate('#books-list'); app.templates.submenuFormsTemplate = app.helper.compileSingleHbsTemplate('#submenu-forms'); app.templates.submenuGenresTemplate = app.helper.compileSingleHbsTemplate('#submenu-genres'); app.templates.formsListTemplate = app.helper.compileSingleHbsTemplate('#forms'); app.templates.genresListTemplate = app.helper.compileSingleHbsTemplate('#genres'); }, (...) } |
Po zastosowaniu Gulpa cały powyższy kod stał się zbędny, ponieważ kompilację szablonów wykonuje - odpowiednio wcześniej skonfigurowany -
task Gulpa. Dodatkowo plik index.html
stał się czytelniejszy, ponieważ wszystkie szablony Handlebars zostały z niego wycięte i znalazły się w osobnych plikach.
Gulp Handlebars - konfiguracja
PUNKT WYJŚCIA
- Do instalowania Handlebarsowego pluginu zabrałam się, mając już zainstalowanego Gulpa na moim komputerze i w projekcie, więc te kroki tutaj pomijam (o tym, jak to zrobić, można przeczytać pod tym linkiem).
- Posiłkowałam się dokumentacją dostępną pod adresem npmjs.com/package/gulp-handlebars.
KROKI:
- Zaczęłam od doinstalowania
gulp-handlebars
,gulp-wrap
orazgulp-declare
jako zależności developerskich (devDependencies wpackage.json
) - przy użyciu komendynpm install --save-dev gulp-handlebars gulp-wrap gulp-declare
. - Następnie w pliku
gulpfile.js
dodałam poniższe pluginy, używając funkcjirequire:
- Kolejnym krokiem była konfiguracja Gulpowego taska, odpowiedzialnego za kompilowanie szablonów Handlebars:
- Najpierw utworzyłam zamienną
templatesHbs
, do której przypisałam (jako string w liście) ścieżkę dostępu do plików źródłowych, zawierających poszczególne szablony Handelbars (które zostaną wycięte i przeniesione tu zindex.html
). - Następnie utworzyłam właściwy task o nazwie
templates
: - Dalszy krok to dołączenie w
index.html
kolejnego pliku -templates.js
, będącego elementem tzw. zbudowanej aplikacji: - Na koniec (zmian w pliku
gulpfile.js
) pozostało tylko dodać 'watcher' dla nowo utworzonego taskatemplates
(poniżej - linijka 3) oraz zaktualizować taskdefault
(linijka 6): - Ostatni krok to przeniesienie szablonów Handlebars z
index.html
do nowo stworzonego podfolderutemplates
w folderzesrc
, zawierającym pliki źródłowe dla Gulpa (z rozszerzeniem.hbs
).
var handlebars = require('gulp-handlebars'); var wrap = require('gulp-wrap'); var declare = require('gulp-declare');
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var templatesHbs = ['./src/templates/*.hbs']; gulp.task('templates', function(){ gulp.src(templatesHbs) .pipe(handlebars({ handlebars: require('handlebars') })) .pipe(wrap('Handlebars.template(<%= contents %>)')) .pipe(declare({ namespace: 'app.templates', noRedeclare: true, })) .pipe(concat('templates.js')) .pipe(gulp.dest('./dist/')); }); |
Tutaj konieczne okazało się uzgodnienie wersji biblioteki Handlebars używanej przez Gulpa z wersją, jakiej ja używam w BUCE - powyżej linijka 6. (Nie można używać jednej wersji Handlebars do kompilowania szablonów - czym zajmuje się od teraz Gulp - a drugiej, innej wersji, do wywoływania tych szablonów w aplikacji; taka sytuacja skutkuje błędem i w efekcie odpowiednie dane nie są prezentowana w widoku.)
<script src="dist/templates.js"></script>
1 2 3 4 5 6 | gulp.task('watch', ['default'], function() { gulp.watch([appJs], ['scripts']); gulp.watch([templatesHbs], ['templates']); }); gulp.task('default', ['scripts', 'templates']); |
PUNKT DOJŚCIA:
- Fragmenty kodu związane z kompilacją szablonów Handlebars (czyli obiekty
compileSingleHbsTemplate
orazcompileHbsTemplates
w globalnym obiekcieapp
w plikuapp.js
) zostały usunięte. - Wszystkie szablony Handlebars zawarte w pliku
index.html
zostały przeniesione jako osobne pliki do folderu z plikami źródłowymi dla Gulpa (src
). - Robota robi się sama. :) Od teraz to Gulp zajmuje się kompilowaniem szablonów Handlebars, ja je tylko wywołuję.
Brak komentarzy:
Prześlij komentarz