Przygotowanie MyBB do korzystania z pakietów Bowera.

Poradnik pokazuje w jaki sposób można łatwo i przyjemnie przygotować MyBB do korzystania z pakietów Bowera.

Co to jest Bower? Bower to menadżer pakietów-bibliotek typowo front-endowych, który pozwala nam na szybkie zainstalowanie aktualnej, potrzebnej nam biblioteki. W tym poradniku pokażę w jaki sposób wykorzystać go do używania frameworka UI-Kit, z LESS jako język styli.
To do dzieła

1 Instalacja wymaganych pakietów

Przygotowałem specjalny skrypt w Node.JS, który pomoże nam przy kompilowaniu LESS do CSS, oraz połączy wszystkie biblioteki JS do jednego pliku. Aby z niego korzystać potrzebujemy Bowera, Gulp, Node.JS oraz Gita. Oprócz instalacji Bowera i Gulpa, reszta zależy od systemu operacyjnego, dlatego ja tę kwestię pominę, tylko napiszę jak to zrobić przy użyciu Linuksa (Ubuntu).

sudo apt-get install -y nodejs git #instalacja git i nodejs
sudo npm install -g bower gulp

2 Wdrożenie skryptu

Okej, jeśli mamy już wszystko zainstalowane, pobierzmy skrypt z repozytorium i przygotujmy go do pracy.
Wchodzimy najpierw do katalogu z MyBB i klonujemy repozytorium, ja je zapiszę do katalogu src:

cd /katalog/mybb
git clone https://github.com/MLPPolska/ThemeBuilder.git src

Instalujemy zależności skryptu:

npm install

3 Użycie skryptu

I teraz... Wszystko zależy od tego co potrzebujesz. Jeśli chcesz również skorzystać z ui-kita, po prostu wykonujesz następną komendę. Jeśli chcesz użyć np. Bootstrapa, to musisz zedytować plik bower.json oraz /resources/assets/less/app.less i dodać własne zależności. Ja jak napisałem na samym początku tego nie zrobię i pozostawię wszystko jak jest.

Zatem instalujemy teraz zależności Bowera:

bower install

Oraz generujemy CSS i JS:

gulp

To wszystko! Twoje pliki zostały zapisane do katalogu "public" w głównym katalogu MyBB (czyli np. /var/www/public). Teraz pozostaje tylko podpiąć je do Twojego stylu w MyBB i cieszyć się aktualnymi bibliotekami

Jeśli chcesz dodać własne poprawki co do stylu, wchodzimy do katalogu resources/assets/less/app.less - Dodajemy nasz LESS/CSS. 

4 Dodanie własnego skryptu .js

Jeśli chcesz natomiast dodać jakiś własny skrypt JS, wchodzimy do gulpfile.js i znajdujemy:

    mix.scripts([
        '../bower/jquery/dist/jquery.js',
        '../bower/uikit/js/uikit.js',
        '../bower/uikit/js/components/parallax.js'
    ], '../public/js/app.js');

Przykładowo dodajmy masz skrypt, który dodaliśmy do katalogu resources/assets/js/app.js:

   mix.scripts([
       '../bower/jquery/dist/jquery.js',
       '../bower/uikit/js/uikit.js',
       '../bower/uikit/js/components/parallax.js',
       'js/app.js'
   ], '../public/js/app.js');

Zwróć uwagę, że wpisałem tylko "js/app.js", a nie "resources/assets/js/app.js", to dlatego, że głównym katalogiem skryptów i styli będzie zawsze "resources/assets".

Pamiętaj też, że jeśli edytujesz LESS w czasie rzeczywistym, możesz uruchomić skrypt w takim trybie:

gulp watch

Tym sposobem, jeśli zostanie edytowany skrypt, albo styl, automatycznie zostaną one wygenerowane.

To tyle, mam nadzieję, że tym prostym poradnikiem pomogłem niektórym osobom w tworzeniu pięknych styli dla MyBB