.

.

niedziela, 14 maja 2017

Automatyzacja widoku z Gulpem

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.

źródło: pixabay.com

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 oraz gulp-declare jako zależności developerskich (devDependencies w package.json) - przy użyciu komendy npm install --save-dev gulp-handlebars gulp-wrap gulp-declare.
  • Następnie w pliku gulpfile.js dodałam poniższe pluginy, używając funkcji require:
  • var handlebars = require('gulp-handlebars');
    var wrap = require('gulp-wrap');
    var declare = require('gulp-declare');
    

  • 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 z index.html).
    • Następnie utworzyłam właściwy task o nazwie templates:
    •  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.)
  • Dalszy krok to dołączenie w index.html kolejnego pliku - templates.js, będącego elementem tzw. zbudowanej aplikacji:
  • <script src="dist/templates.js"></script>
    

  • Na koniec (zmian w pliku gulpfile.js) pozostało tylko dodać 'watcher' dla nowo utworzonego taska templates (poniżej - linijka 3) oraz zaktualizować task default (linijka 6):
  • 1
    2
    3
    4
    5
    6
    gulp.task('watch', ['default'], function() {
        gulp.watch([appJs], ['scripts']);
        gulp.watch([templatesHbs], ['templates']);
    });
    
    gulp.task('default', ['scripts', 'templates']);
    

  • Ostatni krok to przeniesienie szablonów Handlebars z index.html do nowo stworzonego podfolderu templates w folderze src, zawierającym pliki źródłowe dla Gulpa (z rozszerzeniem .hbs).

PUNKT DOJŚCIA:

  • Fragmenty kodu związane z kompilacją szablonów Handlebars (czyli obiekty compileSingleHbsTemplate oraz compileHbsTemplates w globalnym obiekcie app w pliku app.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