Kompilacja szablonu Classic Prestashop 1.7 Webpack

Kompilacja szablonu Classic Prestashop 1.7 Webpack

Z pojawieniem Prestashop wersji 1.7, w systemie zmieniło się bardzo dużo rzeczy. Pierwsze to, że CMS przeszłą na framework Symfony, co znacznie przyspieszyło i polepszyło działanie systemu.

Niespodzianką też stał w całości przerobiony podstawowy szablon. Wcześniej to był Default Bootstrap a teraz Classic. W poprzednim artykule powiedzieliśmy o jakości podstawowego szablonu oraz możliwości jego wykorzystania.

Nowy szablon Classic zebrany za pomocą dość skomplikowanej technologii dla nie doświadczonego dewelopera. W podstawie tej technologii leży platforma Node.js oraz manager paketowy Webpack. Nie będziemy wchodzić w szczegóły działania tych narzędzi a przeanalizujemy tylko te rzeczy które nam są potrzebni dla kompilacji nowego szablonu.

W tym artykule krok po kroku powiedziemy, jak skompilować js i css w szablonie Classic.

 

Przypominamy
Kompilacja plików odbywa się lokalnie. Po kompilacji, nowe pliki trzeba za wgrywać na serwer.

 

1. Pierwsze co nam trzeba zrobić to pobrać pliki źródłowe szablonu

W podstawowej paczce Prestashop niema źródłowych plików. Ich można pobrać z oficjalnego repozytoriumu na GitHub. W tej paczce nas interesuje folder szablonu classic.

 

2. Dalej nam trzeba zainstalować Node.js.

Trzeba go pobrać z oficjalnej strony. Zainstalować go można bez żadnych utrudnień. Po prostu przy instalacji klikać ‘next’.

 

3. Następnym krokiem będzie instalacja Webpack

Dla tego Państwu trzeba wejść w Terminal lub Konsole jeżeli pracujecie na Windows.
Wykonać komendę: npm install --global webpack

 

4. Dalej w konsoli trzeba wejść do folderu z plikami źródłowymi.

Dla tego trzeba wykonać komendę: cd /ścieżka/do/folderu/_dev

 

5. Kolejny krok to instalacja dodatkowego modułu Extract Text Plugin

Dla tego trzeba wykonać komendę: npm install --save-dev extract-text-webpack-plugin

 

6. Teraz możemy włączyć Webpack żeby on skompilował i dalej śledził za zmianami plików

Wykonujemy komendę: npm run watch

 

7. No i prawie wszystko

Teraz można edytować pliki źródłowe w folderze _dev i one automatycznie skompilują się w folder assets.

 

Linki:

Zostaw komentarz

Możesz zalogować się aby nie wypełniać dodatkowe pola.