Làm cách nào để cài đặt Laravel Mix trong Laravel 8?

Laravel Mix cung cấp API rõ ràng, thông thạo để xác định các bước xây dựng webpack cơ bản cho ứng dụng của bạn. Mix hỗ trợ một số bộ xử lý trước CSS và JavaScript phổ biến

Nếu bạn đã từng bối rối về cách bắt đầu với gói mô-đun và biên dịch nội dung, thì bạn sẽ thích Laravel Mix

Laravel Mix 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. 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/assets/js/app.js', 'public/js']

.sass['resources/assets/sass/app.scss', '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. Tất nhiên, bạn có thể tự do sử dụng bất kỳ công cụ đường dẫn tài sản nào mà bạn muốn, hoặc thậm chí không có gì cả

Cài đặt & Thiết lập

Cài đặt nút

Trước khi kích hoạt 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

Theo mặc định, Laravel Homestead bao gồm mọi thứ bạn cần;

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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', '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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

2 mặc định bao gồm mọi thứ bạn cần để bắt đầu. Hãy nghĩ về điều này giống như tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

4 của bạn, ngoại trừ nó xác định các phụ thuộc Node thay vì PHP. Bạn có thể cài đặt các phụ thuộc mà nó tham chiếu bằng cách chạy

Chạy hỗn hợp

Mix là một lớp cấu hình nằm 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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

2 mặc định

// Run all Mix tasks and minify output...

Theo dõi tài sản để thay đổi

Lệnh

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

6 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 có liên quan để biết các thay đổi. Sau đó, Webpack sẽ tự động biên dịch lại nội dung của bạn khi phát hiện có thay đổi

Bạn có thể thấy rằng trong một số môi trường nhất định, Webpack không cập nhật khi tệp của bạn thay đổi. Nếu đây là trường hợp trên hệ thống của bạn, hãy cân nhắc sử dụng lệnh

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

7

Làm việc với các biểu định kiểu

Tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

8 là điểm vào của bạn cho tất cả quá trình biên dịch nội dung. 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ạn

Ít hơn

Phương pháp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

9 có thể được sử dụng để biên dịch Ít thành CSS. Hãy biên dịch tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

00 chính của chúng ta thành

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

01

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

2

Nhiều cuộc gọi đến phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

9 có thể được sử dụng để biên dịch nhiều tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

Nếu bạn muốn tùy chỉnh tên tệp của CSS đã biên dịch, bạn có thể chuyển một đường dẫn tệp đầy đủ làm đối số thứ hai cho phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

9

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

0

Nếu bạn cần ghi đè lên , bạn có thể chuyển một đối tượng làm đối số thứ ba cho

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

04

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

8

ngổ ngáo

Phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

05 cho phép bạn biên dịch Sass thành CSS. Bạn có thể sử dụng phương pháp như vậy

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

0

Một lần nữa, giống như phương pháp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

9, 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ả

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

2

Bổ sung có thể được cung cấp như đối số thứ ba

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

3

bút cảm ứng

Tương tự như Less and Sass, phương pháp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

07 cho phép bạn biên dịch Stylus thành CSS

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

5

Bạn cũng có thể cài đặt các plug-in Stylus bổ sung, chẳng hạn như Rupture. Trước tiên, hãy cài đặt trình cắm được đề cập thông qua NPM [

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

08] và sau đó yêu cầu nó trong cuộc gọi của bạn tới

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

09

// Run all Mix tasks and minify output...

0

đă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 trình cắm 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ỳ trình cắm 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 trình cắm mong muốn thông qua NPM, sau đó tham chiếu nó trong tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

8 của bạn

// Run all Mix tasks and minify output...

1

CSS đơn giản

Nếu bạn chỉ muốn ghép một số biểu định kiểu CSS đơn giản vào một tệp duy nhất, bạn có thể sử dụng phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

81

// Run all Mix tasks and minify output...

2

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 số khái niệm về Webpack. Đối với việc 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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

82 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

// Run all Mix tasks and minify output...

3

{note} Các đường dẫn tuyệt đối cho bất kỳ

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

82 cụ thể nào sẽ bị loại khỏi quá trình viết lại URL. Ví dụ:

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

84 hoặc

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

85 sẽ không được sửa đổi

Theo mặc định, Laravel Mix và Webpack sẽ tìm thấy

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

86, sao chép nó vào thư mục

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

87 của bạn, sau đó viết lại

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

82 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...

4

Dù tính năng này có hữu ích đến đâu, có thể cấu trúc thư mục hiện tại của bạn đã được định cấu hình theo cách bạn muốn. Nếu đây là trường hợp, bạn có thể vô hiệu hóa viết lại

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

82 như vậy

// Run all Mix tasks and minify output...

5

Với phần bổ sung này vào tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

8 của bạn, Mix sẽ không còn khớp với bất kỳ

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

82 nào hoặc sao chép nội dung vào thư mục chung 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...

6

Bả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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

02 trong tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

8 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...

7

Là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 2015, 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...

8

Vớ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 ES2015. - Mô-đun - Tổng hợp `. tập tin vue`. - Giảm thiểu cho môi trường sản xuất

khai 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 với các thư viện của nhà cung cấp của bạn là nó làm cho 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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

04 lớn của bạn. Phương pháp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

05 của Mix khiến việc này trở nên dễ dàng

// Run all Mix tasks and minify output...

7

Phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

05 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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

04. Sử dụng đoạn mã trên làm ví dụ, Mix sẽ tạo các tệp sau

- `công khai/js/tệp kê khai. js`. *Thời gian chạy tệp kê khai Webpack* - `public/js/vendor. js`. *Thư viện nhà cung cấp của bạn* - `public/js/app. js`. *Mã ứng dụng của bạn*

Để tránh lỗi JavaScript, hãy đảm bảo tải các tệp này theo đúng thứ tự

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

20

Phản ứng

Mix có thể tự động cài đặt các plug-in Babel cần thiết để hỗ trợ React. Để bắt đầu, hãy thay cuộc gọi

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

08 của bạn bằng

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

09

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

21

Đằng sau hậu trường, Mix sẽ tải xuống và bao gồm plugin

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

20 Babel thích hợp

vani JS

Tương tự như việc kết hợp các biểu định kiểu với

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

21, bạn cũng có thể kết hợp và thu nhỏ bất kỳ số lượng tệp JavaScript nào bằng phương pháp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

22

Tùy chọn này đặc biệt hữu ích cho các dự án cũ mà bạn không yêu cầu biên dịch Webpack cho JavaScript của mình

{tip} Một biến thể nhỏ của

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

23 là

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

24. Chữ ký phương thức của nó giống hệt với

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

25;

Cấu hình Webpack tùy chỉnh

Đằng sau hậu trường, Laravel Mix tham chiếu tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

26 được định cấu hình sẵn để giúp bạn thiết lập và chạy nhanh nhất có thể. Đôi khi, bạn có thể cần sửa đổi tệp này theo cách thủ công. Bạn có thể có một trình tải hoặc trình cắm đặc biệt cần được tham khảo hoặc có thể bạn thích sử dụng Bút stylus thay vì Sass. Trong những trường hợp như vậy, bạn có hai lựa chọn

Hợp nhất cấu hình tùy chỉnh

Mix cung cấp một phương pháp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

27 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. Đây là một lựa chọn đặ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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

26 của riêng bạn. Phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

27 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

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

22

Tệp cấu hình tùy chỉnh

Nếu bạn muốn tùy chỉnh hoàn toàn cấu hình Webpack của mình, hãy sao chép tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

30 vào thư mục gốc của dự án của bạn. Tiếp theo, trỏ tất cả các tham chiếu

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

31 trong tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

2 của bạn vào tệp cấu hình mới được sao chép. Nếu bạn chọn thực hiện phương pháp tùy chỉnh này, mọi cập nhật ngược dòng trong tương lai cho

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

26 của Mix phải được hợp nhất thủ công vào tệp tùy chỉnh của bạn

Sao chép tập tin & thư mục

Phương pháp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

34 có thể được sử dụng để sao chép tệp và thư mục đến vị trí mới. Điều này có thể hữu ích khi một nội dung cụ thể trong thư mục

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

35 của bạn cần được di chuyển đến thư mục

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

36 của bạn

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

23

Khi sao chép một thư mục, phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

34 sẽ làm phẳng cấu trúc của thư mục. Để duy trì cấu trúc ban đầu của thư mục, bạn nên sử dụng phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

38 để thay thế

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

24

Lậ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ể xử lý việc này cho bạn bằng cách sử dụng phương pháp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

39

Phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

39 sẽ tự động thêm 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...

7

Sau 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 chức năng toàn cầu

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

51 của Laravel trong chế độ xem của mình để tải nội dung được băm phù hợp. Hàm

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

51 sẽ tự động xác định tên hiện tại của tệp được băm

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

26

Vì 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.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

53

// Run all Mix tasks and minify output...

8

Đ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ợ bằng cách gọi phương thức

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

54

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

28

Bạn có thể chuyển một chuỗi [proxy] hoặc đối tượng [cài đặt BrowserSync] cho phương thức này. Tiếp theo, khởi động máy chủ phát triển Webpack bằng lệnh ________ 16. Bây giờ, khi bạn sửa đổi tập lệnh hoặc tệp PHP, hãy 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ạn

Biến môi trường

Bạn có thể đưa các biến môi trường vào Mix bằng cách đặt trước một khóa trong tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

56 của bạn bằng

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

57

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

29

Sau khi biến đã được xác định trong tệp

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

56 của bạn, bạn có thể truy cập thông qua đối tượng

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

59. Nếu giá trị thay đổi trong khi bạn đang chạy tác vụ

// Run all Mix tasks and minify output...

00, bạn sẽ cần khởi động lại tác vụ

mix.less['resources/assets/less/app.less', 'public/css']

.less['resources/assets/less/admin.less', 'public/css'];

0

thông báo

Khi khả dụng, Mix sẽ tự động hiển thị thông báo hệ điều hành cho từng gói. Điều này sẽ cung cấp cho bạn thông tin phản hồi ngay lập tức, về việc quá trình 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ị vô hiệu hóa, thông qua phương pháp

// Run all Mix tasks and minify output...

01

Làm cách nào để thiết lập hỗn hợp Laravel?

Cài đặt .
Cài đặt kết hợp. Bắt đầu bằng cách cài đặt Laravel Mix thông qua NPM hoặc Yarn. .
Tạo tệp cấu hình hỗn hợp. Tiếp theo, tạo tệp cấu hình Mix trong thư mục gốc của dự án mới của bạn. .
Xác định phần tổng hợp của bạn. Mở gói web. .
biên dịch. Bây giờ chúng tôi đã sẵn sàng để đóng gói tài sản của mình

Làm cách nào để cài đặt npm trên Laravel 8?

json tập lệnh NPM tương ứng. cp node_modules/laravel-mix/setup/webpack. cấu hình. .
Cài đặt Laravel
Chạy cài đặt npm
Truy cập webpack của bạn. pha trộn. js và bắt đầu

Trộn [] trong Laravel là gì?

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. In other words, Mix makes it a cinch to compile and minify your application's CSS and JavaScript files.

Làm cách nào để sử dụng webpack mix Laravel?

Quy trình làm việc với Laravel .
Bước 1. Cài đặt Laravel. laravel ứng dụng của tôi mới
Bước 2. Cài đặt phụ thuộc nút. cài đặt npm
Bước 3. Truy cập webpack. pha trộn. .
Bước 4. biên soạn. Hãy tiếp tục và biên dịch chúng xuống. nút_mô-đun/. bin/webpack --config=node_modules/laravel-mix/setup/webpack. cấu hình. js. .
Bước 5. Cập nhật chế độ xem của bạn

Chủ Đề