Nếu đường dẫn tệp bạn chuyển không phải là một URL hoàn chỉnh, Laravel sẽ sử dụng URL của ứng dụng của bạn để tạo một URL hoàn chỉnh
Bạn có thể chuyển các thuộc tính bổ sung trong một mảng làm đối số thứ hai. Điều này cũng cho phép bạn ghi đè lên các thuộc tính mặc định
Laravel Mix, một gói được phát triển bởi Jeffrey Way, người tạo ra Laracasts, cung cấp API thông thạo để xác định các bước xây dựng webpack cho ứng dụng Laravel của bạn bằng cách sử dụng một số bộ xử lý trước CSS và JavaScript phổ biến
Nói cách khác, Mix làm cho việc biên dịch và thu nhỏ các tệp CSS và JavaScript của ứng dụng của bạn trở nên dễ dàng. Thông qua chuỗi phương thức đơn giản, bạn có thể xác định thành thạo quy trình tài sản của mình. Ví dụ
mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css'];
Nếu bạn đã từng bối rối và choáng ngợp khi bắt đầu với webpack và biên dịch nội dung, thì bạn sẽ thích Laravel Mix. Tuy nhiên, bạn không bắt buộc phải sử dụng nó trong khi phát triển ứng dụng của mình;
{tip} Nếu bạn cần bắt đầu xây dựng ứng dụng của mình bằng Laravel và Tailwind CSS, hãy xem một trong các bộ công cụ dành cho người mới bắt đầu ứng dụng của chúng tôi
Cài đặt & Thiết lập
Cài đặt nút
Trước khi chạy Mix, trước tiên bạn phải đảm bảo rằng Node. js và NPM được cài đặt trên máy của bạn
Bạn có thể dễ dàng cài đặt phiên bản mới nhất của Node và NPM bằng trình cài đặt đồ họa đơn giản từ trang web chính thức của Node. Hoặc, nếu bạn đang sử dụng Laravel Sail, bạn có thể gọi Node và NPM thông qua Sail
Cài đặt Laravel Mix
Bước duy nhất còn lại là cài đặt Laravel Mix. Trong bản cài đặt mới của Laravel, bạn sẽ tìm thấy tệp
mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
2 trong thư mục gốc của cấu trúc thư mục của mình. Tệp mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
2 mặc định đã bao gồm mọi thứ bạn cần để bắt đầu sử dụng Laravel Mix. Hãy coi tệp này giống như tệp mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
4 của bạn, ngoại trừ nó xác định các phần phụ thuộc của Nút thay vì các phần phụ thuộc của PHP. Bạn có thể cài đặt các phụ thuộc mà nó tham chiếu bằng cách chạyChạy hỗn hợp
Mix là một lớp cấu hình trên cùng của webpack, vì vậy để chạy các tác vụ Mix của bạn, bạn chỉ cần thực thi một trong các tập lệnh NPM được bao gồm trong tệp Laravel
mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
2 mặc định. Khi bạn chạy tập lệnh mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
6 hoặc mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
7, tất cả nội dung CSS và JavaScript của ứng dụng của bạn sẽ được biên dịch và đặt trong thư mục mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
8 của ứng dụng________số 8_______Theo dõi tài sản để thay đổi
Lệnh
mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
9 sẽ tiếp tục chạy trong thiết bị đầu cuối của bạn và xem tất cả các tệp CSS và JavaScript có liên quan để biết các thay đổi. Webpack sẽ tự động biên dịch lại nội dung của bạn khi phát hiện thay đổi đối với một trong các tệp nàyWebpack có thể không phát hiện được các thay đổi tệp của bạn trong một số môi trường phát triển cục bộ. Nếu trường hợp này xảy ra trên hệ thống của bạn, hãy cân nhắc sử dụng lệnh
0Làm việc với các biểu định kiểu
Tệp
1 của ứng dụng của bạn là điểm khởi đầu cho tất cả quá trình biên dịch tài sản. Hãy nghĩ về nó như một trình bao bọc cấu hình nhẹ xung quanh webpack. Các tác vụ hỗn hợp có thể được xâu chuỗi lại với nhau để xác định chính xác cách biên dịch nội dung của bạnCSS đuôi gió
Tailwind CSS là một khung hiện đại, ưu tiên tiện ích để xây dựng các trang web tuyệt vời mà không cần rời khỏi HTML của bạn. Hãy tìm hiểu cách bắt đầu sử dụng nó trong dự án Laravel với Laravel Mix. Trước tiên, chúng ta nên cài đặt Tailwind bằng NPM và tạo tệp cấu hình Tailwind
Lệnh
2 sẽ tạo tệp
3. Phần
4 của tệp này cho phép bạn định cấu hình đường dẫn đến tất cả các mẫu HTML, thành phần JavaScript và bất kỳ tệp nguồn nào khác có chứa tên lớp Tailwind để mọi lớp CSS không được sử dụng trong các tệp này sẽ bị xóa khỏi sản phẩm của bạn './storage/framework/views/*.php',
'./resources/**/*.blade.php',
Tiếp theo, bạn nên thêm từng "lớp" của Tailwind vào tệp
5 của ứng dụngSau khi định cấu hình các lớp của Tailwind, bạn đã sẵn sàng cập nhật tệp
1 của ứng dụng để biên dịch CSS do Tailwind cung cấpmix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
Cuối cùng, bạn nên tham chiếu biểu định kiểu của mình trong mẫu bố cục chính của ứng dụng. Nhiều ứng dụng chọn lưu trữ mẫu này tại
7. Ngoài ra, đảm bảo bạn thêm thẻ chế độ xem đáp ứng
8 nếu thẻ này chưa có
đăngCSS
PostCSS, một công cụ mạnh mẽ để chuyển đổi CSS của bạn, được bao gồm trong Laravel Mix ngay lập tức. Theo mặc định, Mix tận dụng plugin Autoprefixer phổ biến để tự động áp dụng tất cả các tiền tố nhà cung cấp CSS3 cần thiết. Tuy nhiên, bạn có thể tự do thêm bất kỳ plugin bổ sung nào phù hợp với ứng dụng của mình
Trước tiên, hãy cài đặt plugin mong muốn thông qua NPM và đưa nó vào mảng plugin của bạn khi gọi phương thức
9 của Mix. Phương thức
9 chấp nhận đường dẫn đến tệp CSS của bạn làm đối số đầu tiên và thư mục chứa tệp đã biên dịch sẽ được đặt làm đối số thứ haimix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
Hoặc, bạn có thể thực thi
9 mà không cần bổ sung plugin để đạt được quá trình biên dịch và thu nhỏ CSS đơn giảnmix.postCss['resources/css/app.css', 'public/css'];
ngổ ngáo
Phương pháp
mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
2 cho phép bạn biên dịch Sass thành CSS mà trình duyệt web có thể hiểu được. Phương thức mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
2 chấp nhận đường dẫn đến tệp Sass của bạn làm đối số đầu tiên và thư mục chứa tệp đã biên dịch sẽ được đặt làm đối số thứ haimix.sass['resources/sass/app.scss', 'public/css'];
Bạn có thể biên dịch nhiều tệp Sass thành các tệp CSS tương ứng của riêng chúng và thậm chí tùy chỉnh thư mục đầu ra của CSS kết quả bằng cách gọi phương thức
mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
2 nhiều lầnmix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
Xử lý URL
Bởi vì Laravel Mix được xây dựng trên webpack, điều quan trọng là phải hiểu một vài khái niệm về webpack. Để biên dịch CSS, webpack sẽ viết lại và tối ưu hóa bất kỳ lệnh gọi
mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
5 nào trong biểu định kiểu của bạn. Mặc dù điều này ban đầu nghe có vẻ lạ, nhưng đây là một phần chức năng cực kỳ mạnh mẽ. Hãy tưởng tượng rằng chúng tôi muốn biên dịch Sass bao gồm một URL tương đối thành một hình ảnh background: url['../images/example.png'];
{note} Đường dẫn tuyệt đối cho bất kỳ
5 cụ thể nào sẽ bị loại trừ khỏi quá trình viết lại URL. Ví dụ:
mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
7 hoặc
mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
8 sẽ không được sửa đổi
mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
Theo mặc định, Laravel Mix và webpack sẽ tìm thấy
mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
9, sao chép nó vào thư mục mix.postCss['resources/css/app.css', 'public/css'];
0 của bạn, sau đó viết lại mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
5 trong biểu định kiểu đã tạo của bạn. Như vậy, CSS được biên dịch của bạn sẽ là// Run all Mix tasks and minify output...
0Dù tính năng này có hữu ích đến đâu, cấu trúc thư mục hiện tại của bạn có thể đã được định cấu hình theo cách bạn muốn. Nếu trường hợp này xảy ra, bạn có thể vô hiệu hóa việc viết lại
mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
5 như vậy// Run all Mix tasks and minify output...
1Với việc bổ sung này vào tệp
1 của bạn, Mix sẽ không còn khớp với bất kỳ mix.postCss['resources/css/app.css', 'public/css', [
require['postcss-custom-properties']
5 nào hoặc sao chép nội dung vào thư mục công khai của bạn. Nói cách khác, CSS được biên dịch sẽ trông giống như cách bạn gõ ban đầu// Run all Mix tasks and minify output...
2Bản đồ nguồn
Mặc dù bị tắt theo mặc định, bản đồ nguồn có thể được kích hoạt bằng cách gọi phương thức
mix.postCss['resources/css/app.css', 'public/css'];
5 trong tệp
1 của bạn. Mặc dù nó đi kèm với chi phí biên dịch/hiệu suất, nhưng điều này sẽ cung cấp thêm thông tin gỡ lỗi cho các công cụ dành cho nhà phát triển của trình duyệt của bạn khi sử dụng nội dung đã biên dịch// Run all Mix tasks and minify output...
3Phong cách lập bản đồ nguồn
Webpack cung cấp nhiều loại. Theo mặc định, kiểu ánh xạ nguồn của Mix được đặt thành
mix.postCss['resources/css/app.css', 'public/css'];
7, cung cấp thời gian xây dựng lại nhanh. Nếu bạn muốn thay đổi kiểu ánh xạ, bạn có thể làm như vậy bằng cách sử dụng phương pháp mix.postCss['resources/css/app.css', 'public/css'];
8// Run all Mix tasks and minify output...
4Làm việc với JavaScript
Mix cung cấp một số tính năng để giúp bạn làm việc với các tệp JavaScript của mình, chẳng hạn như biên dịch ECMAScript hiện đại, gói mô-đun, thu nhỏ và nối các tệp JavaScript đơn giản. Thậm chí tốt hơn, tất cả điều này hoạt động trơn tru mà không yêu cầu một chút cấu hình tùy chỉnh nào
// Run all Mix tasks and minify output...
5Với một dòng mã này, giờ đây bạn có thể tận dụng lợi thế của
- Cú pháp EcmaScript mới nhất
- mô-đun
- Giảm thiểu cho môi trường sản xuất
Vue
Mix sẽ tự động cài đặt các plugin Babel cần thiết để hỗ trợ biên dịch thành phần tệp đơn Vue khi sử dụng phương thức
mix.postCss['resources/css/app.css', 'public/css'];
9. Không cần cấu hình thêm// Run all Mix tasks and minify output...
3Khi JavaScript của bạn đã được biên dịch, bạn có thể tham khảo nó trong ứng dụng của mình
// Run all Mix tasks and minify output...
7Phản ứng
Mix có thể tự động cài đặt các plugin Babel cần thiết để hỗ trợ React. Để bắt đầu, hãy thêm lệnh gọi vào phương thức
mix.sass['resources/sass/app.scss', 'public/css'];
0// Run all Mix tasks and minify output...
8Phía sau hậu trường, Mix sẽ tải xuống và bao gồm plugin
mix.sass['resources/sass/app.scss', 'public/css'];
1 Babel thích hợp. Khi JavaScript của bạn đã được biên dịch, bạn có thể tham khảo nó trong ứng dụng của mình// Run all Mix tasks and minify output...
7khai thác nhà cung cấp
Một nhược điểm tiềm ẩn khi kết hợp tất cả JavaScript dành riêng cho ứng dụng của bạn với các thư viện của nhà cung cấp như React và Vue là nó khiến việc lưu vào bộ nhớ đệm dài hạn trở nên khó khăn hơn. Ví dụ: một lần cập nhật mã ứng dụng của bạn sẽ buộc trình duyệt tải xuống lại tất cả các thư viện của nhà cung cấp của bạn ngay cả khi chúng không thay đổi
Nếu bạn có ý định cập nhật thường xuyên cho JavaScript của ứng dụng của mình, bạn nên cân nhắc trích xuất tất cả các thư viện của nhà cung cấp vào tệp của riêng họ. Bằng cách này, thay đổi đối với mã ứng dụng của bạn sẽ không ảnh hưởng đến bộ nhớ đệm của tệp
mix.sass['resources/sass/app.scss', 'public/css'];
2 lớn của bạn. Phương pháp mix.sass['resources/sass/app.scss', 'public/css'];
3 của Mix khiến việc này trở nên dễ dàng// Run all Mix tasks and minify output...
3Phương thức
mix.sass['resources/sass/app.scss', 'public/css'];
3 chấp nhận một mảng gồm tất cả các thư viện hoặc mô-đun mà bạn muốn trích xuất thành tệp mix.sass['resources/sass/app.scss', 'public/css'];
2. Sử dụng đoạn mã trên làm ví dụ, Mix sẽ tạo các tệp sau
6. Thời gian chạy tệp kê khai Webpackmix.sass['resources/sass/app.scss', 'public/css'];
7. Thư viện nhà cung cấp của bạnmix.sass['resources/sass/app.scss', 'public/css'];
8. Mã ứng dụng của bạnmix.sass['resources/sass/app.scss', 'public/css'];
Để tránh lỗi JavaScript, hãy đảm bảo tải các tệp này theo đúng thứ tự
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
1Cấu hình Webpack tùy chỉnh
Đôi khi, bạn có thể cần sửa đổi cấu hình Webpack bên dưới theo cách thủ công. Ví dụ: bạn có thể có một trình tải hoặc plugin đặc biệt cần được tham khảo
Mix cung cấp một phương pháp
mix.sass['resources/sass/app.scss', 'public/css'];
9 hữu ích cho phép bạn hợp nhất bất kỳ ghi đè cấu hình Webpack ngắn nào. Điều này đặc biệt hấp dẫn, vì nó không yêu cầu bạn sao chép và duy trì bản sao tệp mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
0 của riêng bạn. Phương thức mix.sass['resources/sass/app.scss', 'public/css'];
9 chấp nhận một đối tượng, đối tượng này sẽ chứa bất kỳ cấu hình dành riêng cho Webpack nào mà bạn muốn áp dụng './storage/framework/views/*.php',
'./resources/**/*.blade.php',
2Lập phiên bản/Xóa bộ nhớ cache
Nhiều nhà phát triển thêm vào nội dung đã biên dịch của họ một dấu thời gian hoặc mã thông báo duy nhất để buộc trình duyệt tải nội dung mới thay vì cung cấp các bản sao cũ của mã. Mix có thể tự động xử lý việc này cho bạn bằng cách sử dụng phương thức
mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
2Phương thức
mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
2 sẽ nối một hàm băm duy nhất vào tên tệp của tất cả các tệp đã biên dịch, cho phép xóa bộ nhớ cache thuận tiện hơn// Run all Mix tasks and minify output...
3Sau khi tạo tệp được phiên bản, bạn sẽ không biết tên tệp chính xác. Vì vậy, bạn nên sử dụng hàm toàn cầu
mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
4 của Laravel trong chế độ xem của mình để tải nội dung được băm phù hợp. Hàm mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
4 sẽ tự động xác định tên hiện tại của tệp được băm './storage/framework/views/*.php',
'./resources/**/*.blade.php',
4Vì các tệp được tạo phiên bản thường không cần thiết trong quá trình phát triển, nên bạn có thể hướng dẫn quy trình tạo phiên bản chỉ chạy trong thời gian
mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
6// Run all Mix tasks and minify output...
5URL cơ sở kết hợp tùy chỉnh
Nếu nội dung đã biên dịch Kết hợp của bạn được triển khai tới CDN tách biệt với ứng dụng của bạn, thì bạn sẽ cần thay đổi URL cơ sở được tạo bởi hàm
mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
4. Bạn có thể làm như vậy bằng cách thêm tùy chọn cấu hình mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
8 vào tệp cấu hình mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
9 của ứng dụng của bạn './storage/framework/views/*.php',
'./resources/**/*.blade.php',
6Sau khi định cấu hình URL trộn, hàm
mix.sass['resources/sass/app.sass', 'public/css']
.sass['resources/sass/admin.sass', 'public/css/admin'];
4 sẽ thêm tiền tố vào URL đã định cấu hình khi tạo URL cho nội dung './storage/framework/views/*.php',
'./resources/**/*.blade.php',
7Đang tải lại đồng bộ hóa trình duyệt
BrowserSync có thể tự động giám sát các tệp của bạn để biết các thay đổi và đưa các thay đổi của bạn vào trình duyệt mà không yêu cầu làm mới thủ công. Bạn có thể kích hoạt hỗ trợ cho việc này bằng cách gọi phương thức
background: url['../images/example.png'];
1 './storage/framework/views/*.php',
'./resources/**/*.blade.php',
8Các tùy chọn BrowserSync có thể được chỉ định bằng cách chuyển một đối tượng JavaScript tới phương thức
background: url['../images/example.png'];
2Tiếp theo, khởi động máy chủ phát triển của webpack bằng lệnh
mix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
9. Giờ đây, khi bạn sửa đổi tập lệnh hoặc tệp PHP, bạn có thể xem khi trình duyệt làm mới trang ngay lập tức để phản ánh các thay đổi của bạnBiến môi trường
Bạn có thể đưa các biến môi trường vào tập lệnh
1 của mình bằng cách thêm tiền tố vào một trong các biến môi trường trong tệp background: url['../images/example.png'];
5 của bạn bằng ____________6 './storage/framework/views/*.php',
'./resources/**/*.blade.php',
9Sau khi biến đã được xác định trong tệp
background: url['../images/example.png'];
5 của bạn, bạn có thể truy cập nó thông qua đối tượng background: url['../images/example.png'];
8. Tuy nhiên, bạn sẽ cần khởi động lại tác vụ nếu giá trị của biến môi trường thay đổi trong khi tác vụ đang chạymix.js['resources/js/app.js', 'public/js']
.postCss['resources/css/app.css', 'public/css', [
0thông báo
Khi khả dụng, Mix sẽ tự động hiển thị các thông báo của hệ điều hành khi biên dịch, cung cấp cho bạn phản hồi tức thì về việc biên dịch có thành công hay không. Tuy nhiên, có thể có những trường hợp bạn muốn tắt các thông báo này. Một ví dụ như vậy có thể đang kích hoạt Mix trên máy chủ sản xuất của bạn. Thông báo có thể bị hủy kích hoạt bằng phương pháp
background: url['../images/example.png'];
9