Laravel Mix

Laravel Mix mundëson definimin e hapave të ndërtimit të Webpack, duke mundësuar përdorimin e disa CSS dhe JavaScript pre-procesorëve. Nëpërmes Mix-it bëhet kompajlimi i aseteve në CSS dhe JavaScript, dhe vendosja e tyre në folderët publikë.

Instalimi i Node

Paraprakisht duhet të përdoret Mix, duhet ta kemi të instaluar Node.js në sistem. Node.js shkarkohet nga adresa vijuese: https://nodejs.org/en/download.

Në çdo instalim të ri të Laravel, do ta hasim fajllin package.json në folderin kryesor.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    }
}

Instalimi i pakove bëhet duke shënuar komandën vijuese në terminal:

npm install

Me këtë inicohet procesi i shkarkimit të të gjitha moduleve të definuara brenda package.json dhe vendosja e tyre në folderin node_modules.

Ekzekutimi i Mix

Ekzekutimi i të gjitha detyrave të definuara në ambientin lokal:

npm run dev

Ekzekutimi i të gjitha detyrave të definuara për produksion:

npm run production

Me npm run production , përveç kompajlimit bëhet edhe minifikimi i aseteve.

Përcjellja e ndryshimeve të aseteve

Me komandën npm run watch mundësohet përcjellja e ndryshimeve në fajllat e aseteve. Në momentin që ruhet fajlli i ndryshuar, Webpack e detekton këtë dhe bën rikompajlimin e aseteve të ndryshuara.

Sass

Me metodën sass mundësohet kompajlimi i Sass fajllave në CSS.

mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.sass('resources/assets/sass/app.sass', 'public/css')
   .sass('resources/assets/sass/admin.sass', 'public/css/admin');

CSS

Me Mix mund ta bëjmë bashkimin e disa CSS fajllave në një fajll të vetëm, duke e përdorur metodën styles.

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

Procesimi i URL

Gjatë kompajlimit në CSS, Webpack bën rishkrimin dhe optimizimin e thirrjeve url() brenda Sass fajllave. Rishkrimi bëhet për fajllave me adresim relativ dhe jo për ata me adresim absolut.

.example {
    background: url('../images/example.png');
}

Kjo kompajlohet në:

.example {
  background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

Nëse dëshironi ta deaktivizoni këtë mundësi, veproni kësisoj:

mix.sass('resources/assets/app/app.scss', 'public/css')
   .options({
      processCssUrls: false
   });