Kompilacja i minifikacja plików

Wskazówka

Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce.

Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Kompilacja i minifikacja plików

W standardowych szablonach style napisane są za pomocą preprocesora języka CSS jakim jest Sass. W efekcie style są umieszczane w plikach .scss. Niestety, przeglądarki nie potrafią ich odczytać, dlatego należy je przekompilować do plików .css, które już mogą zostać przez nie zidentyfikowane.

Minifikacja plików to inaczej kompresja pliku, dzięki temu zmniejszamy wagę pliku. Zastosowanie minifikacji spowoduje, że strona internetowa będzie działać szybciej. Minifikację można przeprowadzić ręcznie, jednak jest to praca żmudna i mało wydajna.

W tym artykule dowiesz się, jak automatycznie kompilować i minifikować pliki. Podczas tych operacji będziesz pracować na plikach lokalnych. Z pomocą przyjdzie Ci narzędzie Liquid Sync.

1. Node.js

Na początku musisz zainstalować Node.js. Instalator dostępny jest tutaj. W efekcie otrzymasz środowisko do dalszej pracy z plikami.

2. Folder nodejs

Po instalacji Node.js, należy dodać specjalny folder w plikach szablonu o nazwie nodejs. W tym folderze będą znajdować się wszystkie pliki wymagane do uruchomienia minifikacji.

Wskazówka

Pracuj na plikach lokalnych na swoim komputerze, a nie na tych znajdujących się w panelu administracyjnym.

3. Gulp

Gulp to narzędzie, które za Ciebie wykona automatyczną kompilację i minifikację plików. W nowym folderze (nodejs) dodaj plik gulpfile.js o zawartości jak poniżej:

var gulp = require(’gulp’);
var gulpsass = require(’gulp-sass’)(require(’sass’));
var uglify = require(’gulp-uglify-es’).default;
var rename = require(’gulp-rename’);
var minify = require(’gulp-minify’);
var chokidar = require(’chokidar’);

function sass() {
return gulp.src(’../scss/**/*.scss’)
.pipe(gulpsass())
.pipe(gulp.dest(’../css’))
};

function watch() {
gulp.watch(’../scss/**/*.scss’, sass);
};

function css(){
return gulp.src(’../scss/**/*.scss’)
.pipe(rename({suffix: ’.min’}))
.pipe(gulpsass({outputStyle: 'compressed’}))
.pipe(gulp.dest(’../css’))
};

function js(){
return gulp.src(’../js/**/*.js’)
.pipe(rename({suffix: ’.min’}))
.pipe(uglify())
.pipe(gulp.dest(’../js’))
};

const watchSapphireScssFilesDependencies = {
„_collection-points.scss”: „../scss/collection-points.scss”,
„_globals1.scss”: „../scss/desktop1.scss”,
„_header.scss”: „../scss/desktop1.scss”,
„_country-flags.scss”: „../scss/desktop1.scss”,
„_tooltip.scss”: „../scss/desktop1.scss”,
„_stepper.scss”: „../scss/desktop1.scss”,
„_pagination.scss”: „../scss/desktop1.scss”,
„_sliders.scss”: „../scss/desktop1.scss”,
„_categories-navigation.scss”: „../scss/desktop1.scss”,
„_home.scss”: „../scss/desktop1.scss”,
„_product-list.scss”: „../scss/desktop1.scss”,
„_categories-map.scss”: „../scss/desktop1.scss”,
„_order.scss”: „../scss/desktop1.scss”,
„_globals2.scss”: „../scss/desktop2.scss”,
„_globals-m.scss”: „../scss/mobile.scss”,
„_offline.scss”: „../scss/offline.scss”
};

const watchSapphireJsFiles = [’../js/init.js’, ’../js/init-ui1.js’, ’../js/init-ui2.js’, ’../js/js.js’];

exports.sass = sass;
exports.watch = watch;
exports.css = css;
exports.js = js;
exports.minify = gulp.parallel(js, css);
exports.watchTopazRelease = watchTopazRelease;
exports.watchSapphireRelease = watchSapphireRelease;

4. NPM

Ostatni krok, to dodanie NPMa (Node Package Manager). Do tej operacji potrzebny jest terminal. Jeśli nie posiadasz programu do edycji kodu, który udostępniałby taki terminal, to nic nie szkodzi. Wystarczy uruchomić terminal, który jest dostępny w systemie w następujący sposób:

Wskazówka

Jeśli używasz narzędzia Liquid Sync to upewnij się, że jest ono wyłączone przed wykonaniem następnego kroku.

Otwórz folder nodejs, wciśnij i przytrzymaj na klawiaturze lewy Shift, a następnie kliknij prawym przyciskiem myszy w dowolne pole tego otwartego folderu,
Otworzy się lista opcji, na której wybierz: Otwórz okno polecenia tutaj (w systemie Windows 10 opcja ta nazywa się: Otwórz tutaj okno programu PowerShell),
Teraz możesz zainstalować NPM w swoim projekcie. Wystarczy, że wpiszesz komendę: npm init, a następnie zatwierdzisz ją klawiszem ENTER,
Podczas instalacji pojawią się pola z informacjami do uzupełnienia (m.in. package name, version, description, entry point, test command, git repository, keywords, author, license) oraz pytanie o poprawność wprowadzonych danych. Informacji tych nie trzeba uzupełniać (z wyjątkiem pierwszej, gdzie wystarczy wpisać cokolwiek), można je pomijać klawiszem ENTER,
Gdy operacja się zakończy, wpisz kolejną komendę:
npm install –save-dev gulp@4.0.0 chokidar@3.6.0 sass@1.74.1 gulp-minify@3.1.0 gulp-rename@2.0.0 gulp-uglify-es@3.0.0 gulp-sass@5.1.0
Powyższa komenda zainstaluje paczki, które umożliwią poprawne działanie funkcji z pliku gulpfile.js. Komendę najlepiej przekopiować do okna polecenia. Jeśli jednak wpisujesz ją ręcznie, to zwróć uwagę, że przed słowem save są dwa myślniki, a nie jeden.

Wskazówka

Jeśli używasz narzędzia Liquid Sync to teraz należy zmienić nazwę folderu z nodejs na .nodejs. Dzięki dodaniu tej kropki na początku nazwy folderu, będzie on pomijany przy synchronizacji plików.

Komendy do kompilacji i minifikacji

Po wykonaniu powyższych kroków, możesz już przystąpić do kompilacji i minifikacji. W pliku gulpfile.js jest zdefiniowanych kilka funkcji. Poniżej krótki opis funkcji oraz sposób ich wywołania:

Kompilacja plików .scss do .css: (Agat, Bursztyn, Opal)

Komenda gulp sass spowoduje przekompilowanie plików .scss do plików .css. Dzięki temu będziesz mógł edytować style w plikach .scss.

Automatyczna kompilacja plików .scss do .css: (Agat, Bursztyn, Opal)

Jeśli komenda gulp sass przypadła Ci do gustu, to ta spodoba Ci się jeszcze bardziej. Komenda gulp watch spowoduje, że automatycznie po każdej zmianie w dowolnym pliku .scss zostanie uruchomiona kompilacja do pliku .css.

Minifikacja plików .css: (Agat, Bursztyn, Opal)

Otrzymane pliki .css możemy zminifikować. Odpowiada za to komenda gulp css. Po jej uruchomieniu wszystkie pliki .scss zostaną przekompilowane do plików .min.css. Taki plik będzie dużo mniejszy od zwykłego pliku .css.

Minifikacja plików .js: (Agat, Bursztyn, Opal)

Nie tylko pliki ze stylami mogą być zminifikowane. Warto zminifikować również pliki .js. Zrobisz to komendą gulp js. Tworzy ona kopie z dopiskiem .min w nazwie dla wszystkich plików .js (z folderu JS znajdującego się w Twoim szablonie).

Minifikacja plików: (Agat, Bursztyn, Opal)

Ostatnia komenda to gulp minify. Minifikuje jednocześnie pliki .css i pliki .js.

Automatyczna minifikacja wszystkich plików: (Topaz)

Komenda gulp watchTopazRelease spowoduje, że automatycznie po każdej zmianie w dowolnym pliku .scss oraz .js zostanie utworzona jego zminifikowana wersja.