Edit campuran aset
Pengenalan
- Pasang Nod
- Run Mix Run Mix
- Less
- Stylus
- PostCSS
- Native CSS
- URS processing
- URL
- Gunakan JavaScript
- Vendor untuk mengekstrak
- . Salin fail & direktori
- Pengurusan versi/ Kemusnahan cache
- Browsersync Reload
- Pembolehubah persekitaran
- Pemberitahuan
Kompilasi Sumber (Campuran)
- Pengenalan
- Pemasangan & Persediaan
- Run Mix
- Gunakan Lembaran Gaya
- Gunakan JavaScript
- ekstrak React
- Vanila JS
- Penyesuaian Konfigurasi Webpack
- Kawalan versi / Cache kosong
- Muat Semula Browsersync
- Notifikasi
- Environment
Laravel Mix
menyediakan API untuk menentukan langkah binaan Webpack untuk menggunakan prapemproses CSS dan JavaScript biasa dalam aplikasi anda. Dengan merangkaikan panggilan kepada kaedah ringkas ini, saluran paip sumber boleh ditakrifkan dengan lancar. Contohnya: Pemasangan & PersediaanPasang NodSebelum mencetuskan Campuran, pastikan Node.js dan NPM dipasang pada mesin.
Secara lalai, Laravel Homestead menyertakan semua yang anda perlukan; tetapi jika anda menggunakan Vagrant, anda juga boleh memasang versi terkini Node dan NPM menggunakan pemasang grafik yang lebih mudah digunakan yang tersedia daripadanode -v npm -v
halaman muat turun mereka
. Laravel MixSatu-satunya perkara yang tinggal ialah memasang Laravel Mix. Dalam pemasangan Laravel yang bersih, failboleh ditemui dalam akar struktur direktori, kecuali ia mentakrifkan kebergantungan untuk Node, bukan PHP. Pasang kebergantungan yang dirujuknya dengan menjalankan arahan berikut:
npm install
package.json文件。默认的package.json文件包含了起步所需的所有东西，把它想像成composer.jsonRunning Mix
Mix ialah konfigurasi peringkat teratas Webpack, jadi untuk menjalankan tugas Mix, anda hanya perlu melaksanakan skrip yang terkandung dalam fail lalai
package.jsonLaravel:package.json文件中的脚本：// 运行 Mix 任务... npm run dev // 运行所有的 Mix 任务并最小化输出结果... npm run production
监听资源变化
npm run watch命令能够在终端持续运行并且监听相关文件的变化。一旦它发现改变，Webpack 将自动重新编译资源：npm run watch
你会发现在特定环境下，文件发生改变并不会促使 Webpack 更新。如果系统中出现这种情况，不妨考虑使用
watch-poll命令：npm run watch-poll
使用样式表
webpack.mix.js文件所有资源编译的切入点。把它想像为 Webpack 的轻量级配置封装。Mix 任务可以与如何编译资源的配置一起被链式调用。Less
less方法可用于将 Less 编译成 CSS。下面的语句将app.less文件编译为public/css/app.css：mix.less('resources/less/app.less', 'public/css');可以通过多次调用
less方法完成多文件编译：mix.less('resources/less/app.less', 'public/css') .less('resources/less/admin.less', 'public/css');如果希望自定义编译后的 CSS 文件名，可以把完整的文件路径作为传递给
less方法的第二个参数：mix.less('resources/less/app.less', 'public/stylesheets/styles.css');如果需要覆盖 隐含的 Less 插件选项 ，可以传递一个对象作为
mix.less()的第三个参数：mix.less('resources/less/app.less', 'public/css', { strictMath: true });Sass
sass方法能将 Sass 编译成 CSS。可以像下面这样使用这个方法：mix.sass('resources/sass/app.scss', 'public/css');和
less方法类似，可以将多个 Sass 文件编译为各自的 CSS 文件，并为结果 CSS 自定义输出目录：mix.sass('resources/sass/app.sass', 'public/css') .sass('resources/sass/admin.sass', 'public/css/admin');额外的 Node-Sass 插件选项 可以作为第三个参数：
mix.sass('resources/sass/app.sass', 'public/css', { precision: 5 });Stylus
与 Less 和 Sass 相似，
stylus方法将 Stylus 编译成 CSS：mix.stylus('resources/stylus/app.styl', 'public/css');还可以安装额外的 Stylus 插件，比如 Rupture 。先通过 NPM （
npm install rupture）安装有插件，然后在调用mix.stylus()mix.stylus('resources/stylus/app.styl', 'public/css', { use: [ require('rupture')() ] });Dengar untuk perubahan sumber
npm run watchPerintah itu boleh terus dijalankan di terminal dan memantau perubahan dalam fail berkaitan. Webpack akan menyusun semula sumber secara automatik sebaik sahaja ia mengesan perubahan:mix.sass('resources/sass/app.scss', 'public/css') .options({ postCss: [ require('postcss-css-variables')() ] });Anda akan mendapati bahawa dalam keadaan tertentu, menukar fail tidak menggesa Webpack untuk mengemas kini. Jika keadaan ini berlaku dalam sistem anda, anda boleh mempertimbangkan untuk menggunakan perintahwatch-poll:mix.styles([ 'public/css/vendor/normalize.css', 'public/css/vendor/videojs.css'], 'public/css/all.css' );
🎜🎜🎜Gunakan helaian gaya🎜🎜 Failwebpack.mix.jsialah titik masuk untuk menyusun semua sumber. Anggap ia sebagai pembalut konfigurasi yang ringan untuk Webpack. Tugas campuran boleh dirantai bersama dengan konfigurasi cara sumber disusun. 🎜🎜🎜🎜🎜Kurang
🎜kurang kaedah boleh digunakan untuk tukarkan < a href="http://lesscss.org/">Less🎜 dikompilasi menjadi CSS. Pernyataan berikut menyusun fail app.lesske dalampublic/css/app.css: 🎜.example { background: url('../images/example.png'); }🎜Ini boleh dilakukan dengan memanggillesskaedah berbilang kali Penyusunan berbilang fail: 🎜.example { background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e); }🎜Jika anda ingin menyesuaikan nama fail CSS yang disusun, anda boleh menghantar laluan fail lengkap sebagai parameter kedua kepada kaedahless: 🎜mix.sass('resources/app/app.scss', 'public/css') .options({ processCssUrls: false });🎜Jika anda perlu mengatasi Pilihan pemalam Kurang Tersirat🎜, anda boleh menghantar objek sebagai parameter ketigacampuran. less() Parameter: 🎜 .example { background: url("../images/thing.png"); }🎜🎜🎜🎜Sass
🎜kaedah sassBoleh menyusun Sass🎜 ke dalam CSS. Anda boleh menggunakan kaedah ini seperti ini: 🎜mix.js('resources/js/app.js', 'public/js') .sourceMaps();🎜Sama seperti kaedahless, anda boleh menyusun berbilang fail Sass ke dalam fail CSS mereka sendiri dan menyesuaikan direktori output untuk CSS yang terhasil: 🎜mix.js('resources/js/app.js', 'public/js');🎜Tambahan < a href="https://github.com/sass/node-sass#options">Pilihan pemalam Node-Sass 🎜 boleh digunakan sebagai parameter ketiga: 🎜mix.js('resources/js/app.js', 'public/js') .extract(['vue'])🎜🎜🎜🎜Stylus
🎜Serupa dengan Less and Sass, kaedahstylusakan Stylus🎜 disusun ke dalam CSS: 🎜<script src="/js/manifest.js"></script> <script src="/js/vendor.js"></script> <script src="/js/app.js"></script>
🎜 Anda juga boleh memasang pemalam Stylus tambahan, seperti Rupture🎜. Mula-mula pasang pemalam melalui NPM (npm install rupture), kemudian masukkannya apabila memanggilmix.stylus(): 🎜mix.react('resources/js/app.jsx', 'public/js');🎜🎜🎜🎜🎜🎜PostCSS
PostCSS ialah alat yang berkuasa untuk menukar CSS, dan ia sudah disertakan dalam Laravel Mix. Secara lalai, Mix memanfaatkan pemalam Autoprefixer yang popular untuk menambahkan semua awalan pihak ketiga CSS3 yang diperlukan secara automatik. Walau bagaimanapun, anda bebas untuk menambah sebarang pemalam tambahan yang anda inginkan dalam apl anda. Mula-mula pasang pemalam yang diperlukan melalui NPM, kemudian rujuknya dalam fail
webpack.mix.js:webpack.mix.js文件引用：mix.scripts([ 'public/js/admin.js', 'public/js/dashboard.js'], 'public/js/all.js' );
原生 CSS
如果想要将几个原生 CSS 样式表合并到单个文件中，可以使用
styles方法。mix.webpackConfig({ resolve: { modules: [ path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js') ] } } );URL 处理
因为是基于 Webpack 之上构建，了解几个 Webpack 概念就很重要了。对于 CSS 编译，Webpack 将重写和优化任何带有样式表的
url()调用。虽然初听上去好像很奇怪，但这确实是个强大的功能。 想像一下我们想要编译包含图片相对 URL 的 Sass：mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');{note} 任何给定
url()的绝对路径将被排除在 URL 重写之外。例如url('/images/thing.png')或url('http://example.com/images/thing.png')将不会被修改。默认情况下，Laravel Mix 和 Webpack 将找到
example.png, 将其复制到public/images文件夹，然后重写生成的样式表中的url()。如此一平，编译后的 CSS 将变成：mix.copyDirectory('resources/img', 'public/img');尽管此功能可能很有用，但是已有文件夹结构可能已经按你的预期做了配置。这种情况下，你可以禁用
url()重写：mix.js('resources/js/app.js', 'public/js') .version();在
webpack.mix.js文件中加入这项配置，Mix 将不再匹配任何url()或者复制资源到 public 目录。换句话说，编译后的 CSS 看上去和你原来输入的内容一样：<script src="{{ mix('/js/app.js') }}"></script>源码映射
虽然默认情况下源码映射被禁用，但是可以通过在
webpack.mix.js文件中调用mix.sourceMaps()mix.js('resources/js/app.js', 'public/js'); if (mix.inProduction()) { mix.version(); }CSS asliJika anda ingin menggabungkan beberapa helaian gaya CSS asli ke dalam satu fail, anda boleh menggunakan kaedahstyles. 🎜mix.browserSync('my-domain.test'); // 或... // https://browsersync.io/docs/options mix.browserSync({ proxy: 'my-domain.test' });🎜🎜🎜🎜🎜URL processing🎜🎜Oleh kerana ia dibina pada Webpack, memahami beberapa konsep Webpack sudah memadai sangat penting. Untuk kompilasi CSS, Webpack akan menulis semula dan mengoptimumkan sebarang panggilanurl()dengan helaian gaya. Walaupun ia mungkin kedengaran pelik pada mulanya, ia sememangnya ciri yang berkuasa. Bayangkan kita ingin menyusun Sass yang mengandungi URL relatif kepada imej: 🎜MIX_SENTRY_DSN_PUBLIC=http://example.com
🎜{note} Sebarang laluan mutlak yang diberikan kepada
🎜Secara lalai, Laravel Mix dan Webpack akan menemuiurl()akan dikecualikan daripada penulisan semula URL. Contohnya,url('/images/thing.png')atauurl('http://example.com/images/thing.png')tidak akan diubahsuai. 🎜example.png, menyalinnya ke folderpublic/images, dan kemudian menggantikan gayaurl()dalam jadual. Setelah ini selesai, CSS yang disusun akan kelihatan seperti: 🎜process.env.MIX_SENTRY_DSN_PUBLIC
🎜Walaupun ciri ini mungkin berguna, struktur folder sedia ada mungkin sudah dikonfigurasikan seperti yang anda jangkakan. Dalam kes ini, anda boleh melumpuhkan penulisan semulaurl(): 🎜mix.disableNotifications();
🎜Tambah konfigurasi ini dalam failwebpack.mix.jsdan Mix tidak lagi sepadan dengan apa-apaurl()Atau salin sumber ke direktori awam. Dalam erti kata lain, CSS yang disusun kelihatan sama seperti yang anda masukkan pada asalnya: 🎜rrreee🎜🎜🎜🎜🎜 Peta Sumber🎜🎜Walaupun peta sumber dilumpuhkan secara lalai, ia boleh diaktifkan dengan memanggil kaedahmix.sourceMaps()dalam failwebpack.mix.js. Walaupun ia meningkatkan kos penyusunan/pelaksanaan, ia boleh memberikan maklumat penyahpepijatan tambahan kepada alatan pembangunan penyemak imbas semasa menyusun sumber. 🎜rrreee🎜🎜🎜🎜🎜🎜Bekerja dengan JavaScript
Mix menyediakan beberapa ciri yang memudahkan kerja dengan fail JavaScript, seperti menyusun ECMAScript 2015, pembungkusan modul, meminimumkan dan menggabungkan fail JavaScript asli. Lebih baik lagi, semua ini berfungsi hebat tanpa konfigurasi diperlukan.
rrreeeHanya dengan baris kod ini, anda boleh menyokong:
- Sintaks ES2015
- modul
- Kompilasi fail
.vue..vue文件。 - 为生产环境最小化代码。
Vendor 提取
将应用自身的 JavaScript 和第三方库绑定在一起有个潜在的缺点：会使长期缓存变得困难。例如，应用代码的单独更新将强制浏览器重新下载全部第三方库，即使第三方库没有发生变化。
如果你打算频繁地更新应用中的 JavaScript，应该考虑将第三方库提取到它自己的文件中。这样一来，应用代码的改变将不影响
rrreeevendor.js文件缓存。Mix 的extract方法为之提供了便利：extract方法接受你想要提取到vendor.js的全部库或模块的数组作为参数。使用上面例子中的代码片段，Mix 将生成如下文件：public/js/manifest.js: Webpack 运行时清单public/js/vendor.js: 第三方库代码public/js/app.js: 应用代码
为避免 JavaScript 错误，应确保按适应顺序加载这些文件：
rrreeeReact
Mix 能自动安装 React 支持所需的 Babel 插件。要达成此目的，只需要用
rrreeemix.react()替换mix.js()：Mix 将在后台下载并包含适用的
babel-preset-reactBabel 插件。Vanilla JS
与利用
rrreeemix.styles()整合样式表类似，你也可以使用scripts()方法整合并最小化任意数量的 JavaScript 文件：对于不需要使用 Webpack 编译 JavaScript 的遗留代码，这个选项尤其有用。
{tip}
Minimumkan kod untuk persekitaran pengeluaran.mix.babel()是mix.scripts()的一个小变种。它的方法签名与scriptsakan menggunakan JavaScriptnya sendiri Terdapat potensi kelemahan penggabungan dengan perpustakaan pihak ketiga: ia boleh menyukarkan caching jangka panjang. Sebagai contoh, kemas kini berasingan kepada kod aplikasi akan memaksa penyemak imbas untuk memuat turun semula semua perpustakaan pihak ketiga, walaupun jika perpustakaan pihak ketiga tidak berubah. 🎜🎜Jika anda merancang untuk kerap mengemas kini JavaScript dalam aplikasi anda, anda harus mempertimbangkan untuk mengekstrak pustaka pihak ketiga ke dalam failnya sendiri. Dengan cara ini, perubahan pada kod aplikasi anda tidak akan menjejaskan cache failVendor extraction
vendor.js. KaedahextractMix menyediakan kemudahan untuk ini: 🎜rrreee🎜 Kaedahextractmenerima semua pustaka atau modul yang anda ingin ekstrak ke tatasusunanvendor.jssebagai parameter. Menggunakan coretan kod daripada contoh di atas, Mix akan menjana fail berikut: 🎜🎜🎜🎜public/js/manifest.js: Manfes masa jalan pek web🎜🎜public /js/vendor.js: Kod perpustakaan pihak ketiga🎜🎜 public/js/app.js: Kod aplikasi 🎜< /ul>🎜🎜Untuk mengelakkan ralat JavaScript, pastikan anda memuatkan fail ini dalam susunan penyesuaian: 🎜rrreee🎜🎜🎜🎜React
🎜Mix boleh memasang pemalam Babel secara automatik yang diperlukan untuk sokongan React. Untuk melakukan ini, cuma gantikanmix.js()denganmix.react(): 🎜rrreee🎜Mix akan dimuat turun di latar belakang dan sertakanbabel - yang berkenaan - preset-reactpemalam Babel. 🎜🎜🎜🎜🎜Vanilla JS
🎜 dan menggunakanmix.styles()Sama seperti mengintegrasikan lembaran gaya, anda juga boleh menggunakan kaedahscripts()untuk menyepadukan dan meminimumkan sebarang bilangan fail JavaScript: 🎜rrreee🎜Untuk kod warisan yang tidak memerlukan Webpack menyusun JavaScript, pilihan ini Sangat berguna. 🎜🎜{tip}
mix.babel()ialah varian kecilmix.scripts(). Tandatangan kaedahnya betul-betul sama denganskrip tetapi fail bersepadu akan disusun oleh Babel, yang menukar kod ES2015 kepada JavaScript vanila yang difahami oleh penyemak imbas. 🎜🎜🎜🎜🎜🎜🎜🎜 Konfigurasi Pek Web Tersuai
Lavarel Mix merujuk kepada fail
webpack.config.jsprakonfigurasi di latar belakang untuk mempercepatkan permulaan dan operasi. Kadangkala, anda mungkin perlu mengedit fail ini secara manual. Anda mungkin mempunyai pemuat atau pemalam khas yang perlu anda rujuk, atau anda mungkin lebih suka menggunakan Stylus dan bukannya Sass. Dalam kes ini, anda mempunyai dua pilihan:webpack.config.js文件以加速启动和运行。有时，你可能需要手动编辑这个文件。你可能有一个特殊的加载器或插件需要引用，或者可能更愿意用 Stylus 代替 Sass。这种情况下，你有两个选择：合并自定义配置
Mix 提供了
rrreeewebpackConfig方法来合并任意简短的 Webpack 配置以覆盖已有配置。这是个非常勾人的选择，因为它不要求你复制和维护你自己的webpack.config.js副本。webpackConfig方法接受一个对象作为作参数，它包含你想要应用的任何 Webpack 特定配置 ，自定义配置文件
如果你想完全自定义 Webpack 配置，将
node_modules/laravel-mix/setup/webpack.config.js文件复制到项目的根目录。然后将package.json文件中所有的--config引用都指向新复制的配置文件。如果选择用这种方式自定义配置，Mixwebpack.config.js后续的任何更新，都必须手动合并到你的自定义配置文件中。复制文件 & 目录
rrreeecopy方法可以用于将文件和目录复制到新位置。当node_modules目录中特殊的资源需要重新定位到public文件夹时，这个方法很有用。复制文件夹时，
rrreeecopy方法将扁平化目录结构。想要保持目录的原始结构，需要使用copyDirectory方法：版本管理 / 缓存销毁
许多开发者在他们编译后的资源添加时间戳或唯一令牌作后缀，强制浏览器加载新的资源，以替换旧的代码副本。Mix 可以使用
version方法替你处理它们。.
rrreeeversion方法自动在所有编译后的文件名后追加唯一的哈希值，从而实现更方便的缓存销毁：在生成版本化文件后，你不会知道确切的文件名。因此，你需要在 views 中使用 Laravel 的全局
rrreeemix函数载入相应的哈希资源。mix函数自动判断哈希文件的当前文件名：通常在开发阶段不需要版本化文件，你可以仅在运行
npm run productionGabung konfigurasi tersuai
Mix menyediakan
webpackConfigKaedah untuk menggabungkan sebarang konfigurasi Webpack pendek untuk menimpa konfigurasi sedia ada. Ini adalah pilihan yang sangat menarik kerana ia tidak memerlukan anda menyalin dan mengekalkan salinanwebpack.config.jsanda sendiri. KaedahwebpackConfigmenerima sebagai argumen objek yang mengandungi sebarang konfigurasi khusus Webpack , rrreee yang anda mahu gunakanFail konfigurasi tersuai
Jika anda ingin menyesuaikan sepenuhnya konfigurasi Webpack, tambah🎜🎜🎜node_modules/laravel-mix/setup/webpack Salin .config.jsfail ke direktori akar projek anda. Kemudian halakan semua rujukan--configdalam failpackage.jsonke fail konfigurasi yang baru disalin. Jika anda memilih untuk menyesuaikan konfigurasi dengan cara ini, sebarang kemas kini seterusnya kepada Mixwebpack.config.jsmesti digabungkan secara manual ke dalam fail konfigurasi tersuai anda.🎜Menyalin fail & direktori
🎜salin Kaedah boleh digunakan untuk menyalin fail dan direktori ke lokasi baharu. Kaedah ini berguna apabila sumber khas dalam direktori node_modulesperlu dipindahkan ke folderpublic. 🎜rrreee🎜Apabila menyalin folder, kaedahcopyakan meratakan struktur direktori. Untuk mengekalkan struktur asal direktori, anda perlu menggunakan kaedahcopyDirectory: 🎜rrreee🎜🎜🎜🎜Pengurusan versi/pemusnahan cache
🎜Ramai pembangun menambah cap masa atau token unik sebagai akhiran pada sumber terkumpul mereka untuk memaksa penyemak imbas memuatkan sumber baharu bagi menggantikan salinan kod lama. Mix boleh mengendalikannya untuk anda menggunakan kaedahversion. Kaedah .🎜🎜versi secara automatik menambahkan nilai cincangan unik kepada semua nama fail yang disusun, membolehkan pemusnahan cache yang lebih mudah: 🎜rrreee🎜Selepas menjana fail versi, anda tidak akan tahu Nama fail yang tepat . Oleh itu, anda perlu menggunakan fungsi mixglobal Laravel dalam paparan untuk memuatkan sumber cincang yang sepadan. Fungsimixsecara automatik menentukan nama fail semasa fail cincang: 🎜rrreee🎜 Biasanya tidak ada keperluan untuk fail versi semasa fasa pembangunan, anda hanya boleh melaksanakan versi apabila menjalankannpm run pengeluaranRawatan kimia: 🎜rrreee🎜🎜🎜🎜🎜🎜Browsersync Reload
BrowserSync boleh mengesan perubahan fail secara automatik dan menyuntik perubahan ke dalam penyemak imbas tanpa muat semula manual. Anda boleh memanggil kaedah
rrreeemix.browserSync()untuk mendayakan sokongan ini:mix.browserSync()方法开启此项支持：可以传递字符串（代理）或对象 Y（BrowserSync 设置）给此方法。然后使用
npm run watch命令启动 Webpack 的开发服务器。再编辑脚本或者 PHP 文件，就会看到浏览器立即刷新以响应你的修改。环境变量
可以通过在
rrreee.env文件中添加MIX_前缀，将环境变量注入到 Mix：一旦此变量被定义在
rrreee.env文件中，就可以借助process.env对象访问它。如果在运行watch任务时这个值发生改，就需要重启任务：通知
如果可用，Mix 将自动为每次绑定显示操作系统通知。这将为你提供编译是否成功的实时反馈。不过，可能在某些情况下，你希望禁用通知。一个例子是在生产服务器上触发 Mix。通知可以借助
Anda boleh menghantar rentetan (proksi) atau objek Y (tetapan BrowserSync) kepada kaedah ini. Kemudian gunakan perintahdisableNotificationsrrreeenpm run watchuntuk memulakan pelayan pembangunan Webpack. Kemudian edit skrip atau fail PHP dan anda akan melihat penyemak imbas dimuat semula serta-merta sebagai tindak balas kepada pengubahsuaian anda. 🎜environment variables🎜🎜 boleh ditambah dalam fail.envAwalanMIX_untuk menyuntik pembolehubah persekitaran ke dalam Campuran: 🎜rrreee🎜Setelah pembolehubah ini ditakrifkan dalam fail.env, anda boleh menggunakanprocess.envobjek mengaksesnya. Jika nilai ini berubah apabila menjalankan tugaswatch, anda perlu memulakan semula tugasan: 🎜rrreee🎜🎜🎜🎜🎜Pemberitahuan🎜🎜Jika tersedia, Mix akan memaparkan pemberitahuan sistem pengendalian secara automatik untuk setiap pengikatan. Ini akan memberi anda maklum balas masa nyata sama ada kompilasi itu berjaya. Walau bagaimanapun, mungkin terdapat situasi di mana anda ingin melumpuhkan pemberitahuan. Contohnya ialah mencetuskan Campuran pada pelayan pengeluaran. Pemberitahuan boleh dikonfigurasikan menggunakan kaedahdisableNotifications. 🎜rrreee🎜Artikel ini pertama kali diterbitkan di laman web 🎜LearnKu.com🎜. 🎜🎜Laman web PHP Cina
- Laravel Mix
