24.01.2016, 21:39
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
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).
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:
Instalujemy zależności 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:
Oraz generujemy CSS i JS:
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.
Jeśli chcesz natomiast dodać jakiś własny skrypt JS, wchodzimy do gulpfile.js i znajdujemy:
Przykładowo dodajmy masz skrypt, który dodaliśmy do katalogu resources/assets/js/app.js:
To tyle, mam nadzieję, że tym prostym poradnikiem pomogłem niektórym osobom w tworzeniu pięknych styli dla MyBB
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).
Kod:
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:
Kod:
cd /katalog/mybb
git clone https://github.com/MLPPolska/ThemeBuilder.git src
Instalujemy zależności skryptu:
Kod:
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:
Kod:
bower install
Oraz generujemy CSS i JS:
Kod:
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:
Kod:
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:
Kod:
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:
Tym sposobem, jeśli zostanie edytowany skrypt, albo styl, automatycznie zostaną one wygenerowane.
Kod:
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