Pembangunan Laravel: Bagaimana untuk menggunakan Laravel Mix dengan CSS dan JavaScript?

Laravel Mix ialah sebahagian daripada rangka kerja pembangunan aplikasi web Laravel, yang menyediakan pemprosesan CSS dan JavaScript yang dipermudahkan. Laravel Mix berasaskan Webpack dan menyediakan API bersatu yang membolehkan pembangun mengendalikan CSS, JavaScript dan aset lain dengan mudah.

Artikel ini akan memperkenalkan asas Campuran Laravel dan menunjukkan melalui contoh cara menggunakan Campuran Laravel untuk mengendalikan CSS dan JavaScript.

Pasang Laravel Mix

Sebelum memasang Laravel Mix, kita mesti memasang Node.js dan npm. Selepas pemasangan selesai, gunakan npm untuk memasang Laravel Mix dan kebergantungan yang berkaitan.

Kita boleh menggunakan arahan berikut untuk memasang Laravel Mix dalam direktori akar aplikasi Laravel:

npm install laravel-mix --save-dev

Selepas pemasangan selesai, kita boleh melihat Laravel Mix dan fail berkaitan dalam package.json maklumat versi Ketergantungan fail. Selain itu, kami juga boleh mencari kod sumber Laravel Mix dalam direktori node_modules/laravel-mix.

Mengkonfigurasi Laravel Mix

Laravel Mix direka bentuk untuk menjadi alat yang mudah digunakan. Fail konfigurasi lalai untuk Laravel Mix ialah webpack.mix.js, di mana kami boleh menulis kod mudah untuk menyusun CSS dan JavaScript kami.

Berikut ialah contoh menyusun CSS menggunakan Laravel Mix:

const mix = require('laravel-mix');

mix.styles([
    'resources/css/app.css',
    'resources/css/extra.css'
], 'public/css/all.css');

Apakah yang contoh ini lakukan?

Pertama, kita perlu menggunakan fungsi require untuk memperkenalkan Laravel Mix. Kemudian, kami menggunakan pemalar mix untuk memanggil API Campuran Laravel. Kaedah mix.styles() menyusun fail CSS dan mengeluarkannya kepada public/css/all.css.

Kami boleh menentukan berbilang fail CSS dan menggabungkannya menjadi satu fail. Kami juga boleh menggunakan kaedah mix.sass() untuk menyusun fail Sass, kaedah mix.less() untuk menyusun fail Kurang dan sebagainya.

Berikut ialah contoh penyusunan JavaScript menggunakan Laravel Mix:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/extra.js', 'public/js');

Contoh ini menyusun fail JavaScript daripada resources/js/app.js dan resources/js/extra.js dan mengeluarkannya ke direktori public/js.

Kami juga boleh menggunakan kaedah mix.react() untuk menyusun fail ReactJS, kaedah mix.vue() untuk menyusun fail Vue.js dan sebagainya.

Seperti CSS, kami boleh mentakrifkan berbilang fail JavaScript dalam kaedah mix.js() dan menggabungkannya menjadi satu fail JS.

Berikut ialah contoh rujuk silang fail JavaScript dan CSS dalam Laravel Mix:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .styles([
        'public/css/app.css',
        'public/css/extra.css'
    ], 'public/css/all.css')
   .scripts([
        'public/js/app.js',
        'public/js/extra.js'
    ], 'public/js/all.js');

Dalam contoh ini, kami mula-mula menyusun fail JavaScript menggunakan kaedah mix.js(). Kami kemudian menggunakan kaedah mix.sass() untuk menyusun fail Sass dan mengeluarkannya ke direktori public/css.

Seterusnya, kami menggunakan kaedah mix.styles() untuk menggabungkan public/css/app.css dan public/css/extra.css ke dalam satu fail CSS dan mengeluarkannya kepada public/css/all.css.

Akhir sekali, kami menggunakan kaedah mix.scripts() untuk menggabungkan public/js/app.js dan public/js/extra.js ke dalam satu fail JS dan mengeluarkannya ke dalam public/js/all.js.

Perlu diingatkan bahawa kami harus mengurus fail CSS dan JavaScript secara berasingan sebanyak mungkin. Dengan cara ini kita boleh mengurus dan memperhalusi aset kita dengan lebih mudah tanpa menjejaskan aset lain.

Kompilasi Aset

Selepas menulis kod dalam fail webpack.mix.js, kita boleh menggunakan arahan berikut untuk menyusun Aset:

npm run dev

Arahan di atas akan menjalankan Webpack dan akan menyusun Fail CSS dan JavaScript adalah output ke direktori public/css dan public/js.

Jika kita ingin melakukan binaan mod pengeluaran semasa menyusun Aset, kita boleh menggunakan arahan berikut:

npm run production

Arahan ini akan mengoptimumkan saiz fail Aset dan memadamkan Aset yang tidak digunakan.

Kesimpulan

Dalam artikel ini, kami memperkenalkan asas Campuran Laravel. Kami mempelajari cara menggunakan Laravel Mix untuk memudahkan kerja dengan fail CSS dan JavaScript. Menggunakan Laravel Mix, kami boleh menyusun fail CSS dan JavaScript kami dengan mudah serta mengurus dan mengoptimumkan Aset kami dengan lebih baik.

Nasib baik, Laravel Mix terbina dalam aplikasi web Laravel. Ini memudahkan kami menggunakan Laravel Mix tanpa perlu risau tentang kerumitan membina saluran paip.

Atas ialah kandungan terperinci Pembangunan Laravel: Bagaimana untuk menggunakan Laravel Mix dengan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!