Làm cách nào để chạy kết hợp trong Laravel?
Winter mang đến sự hỗ trợ hạng nhất để xử lý quá trình biên dịch dựa trên Nút cho nội dung giao diện người dùng thông qua các lệnh Mix. Các comamnd sử dụng trình bao bọc Laravel Mix, một giao diện đơn giản và thân thiện với người dùng để thiết lập biên dịch nhiều loại nội dung giao diện người dùng thông qua Webpack và các thư viện khác nhau Show
Yêu cầuĐể tận dụng lợi thế của trình biên dịch nội dung Mix, bạn phải cài đặt Node và trình quản lý gói Node (NPM) trong môi trường phát triển của mình. Điều này sẽ phụ thuộc vào hệ điều hành của bạn - vui lòng xem lại trang Tải xuống NodeJS để biết thêm thông tin về cách cài đặt Node Laravel Mix cũng phải có trong tệp 7 cho bất kỳ gói nào sẽ sử dụng nó (trong 8 hoặc 9) nhưng nếu nó không được chỉ định trong tệp 7 của dự án thì nó có thể được thêm tự động tùy chọn khi chạy lệnhĐăng ký một góiĐăng ký tổng hợp nội dung thông qua Mix rất dễ dàng. Đăng ký tự động sẽ đáp ứng nhu cầu của bạn hầu hết thời gian và nếu không, có một số phương pháp có sẵn để đăng ký gói Mix theo cách thủ công đăng ký tự độngTheo mặc định, Winter sẽ quét tất cả các mô-đun, plugin và chủ đề có sẵn và đã bật để tìm tệp 2 trong thư mục gốc của mỗi tiện ích mở rộng (i. e. 3, 4 hoặc 5)Nếu tìm thấy tệp 2, nó sẽ tự động được đăng ký dưới dạng gói có tên gói được tạo tự động và sẽ hiển thị khi chạy các lệnh Trộn. Hầu hết thời gian, đây sẽ là tất cả những gì bạn cần làm để bắt đầu biên dịch nội dung Laravel Mix trong Winter CMSĐăng ký pluginĐể đăng ký nội dung giao diện người dùng được biên dịch thông qua Mix trong plugin của bạn, chỉ cần trả về một mảng có tên gói làm khóa và đường dẫn gói liên quan đến thư mục plugin làm giá trị để đăng ký từ phương thức 8 của tệp đăng ký 7 của bạn. Xem ví dụ bên dưới 1Đăng ký chủ đềViệc đăng ký tài sản tổng hợp các chủ đề thậm chí còn dễ dàng hơn và có thể được thực hiện bằng cách thêm định nghĩa 9 vào ( 30) của bạn
Định nghĩa 9 lấy bất kỳ số lượng gói đã đăng ký nào làm đối tượng YAML, với khóa là tên của gói dưới dạng chuỗi kebab-case và vị trí tệp 2 của bạn so với thư mục gốc của chủ đềVí dụ: nếu bạn muốn đăng ký hai gói tên là 33 và 34 nằm trong thư mục nội dung, bạn sẽ sử dụng định nghĩa sau
trộn cấu hìnhTệp cấu hình Mix ( 2) là tệp cấu hình quản lý cấu hình của chính Laravel Mix. Cùng với tệp 7 xác định các phụ thuộc của bạn, tệp này xác định cách Laravel Mix sẽ biên dịch nội dung của bạnBạn có thể xem lại các ví dụ hoặc Mix API đầy đủ tại trang web Laravel Mix Tệp 2 của bạn phải bao gồm Trộn theo yêu cầu và cũng phải xác định đường dẫn công khai đến thư mục hiện tại, như sau 3đường dẫnKhi tệp 2 được đánh giá, bất kể bạn đã chạy 39 từ đâu, thư mục làm việc được đặt thành thư mục mẹ của tệp 2. Điều đó có nghĩa là bất kỳ đường dẫn tương đối nào được sử dụng trong cấu hình sẽ liên quan đến thư mục hiện tại của tệp 2
ví dụDưới đây là một số ví dụ về cách cài đặt các thư viện lối vào phổ biến để sử dụng với quá trình biên dịch nội dung CSS đuôi gióĐối với các chủ đề muốn sử dụng Tailwind CSS, hãy bao gồm các thành phần phụ thuộc 93, 94 và 95 trong tệp 7 của bạn 9Thao tác này sẽ tạo một tệp cấu hình Tailwind ( 97) bên trong chủ đề của bạn mà bạn có thể định cấu hình theo nhu cầu của chủ đề cụ thể của mìnhSau đó, thêm tệp cấu hình 2 sẽ biên dịch Tailwind khi cần 6Trong ví dụ trên, chúng ta có một tệp CSS cơ sở chứa kiểu dáng Tailwind - 99 - tệp này sẽ biên dịch thành tệp CSS được biên dịch cuối cùng trong 60Chủ đề của bạn hiện đã sẵn sàng để phát triển CSS Tailwind VueNếu bạn muốn sử dụng Vue 3 trong dự án của mình, trong phần phụ trợ hoặc trong một thành phần hoặc chủ đề, bạn có thể làm theo các bước sau Đầu tiên, xác định Vue là một phụ thuộc trong plugin của bạn 7 0Chạy 62 để cài đặt Vue và các phụ thuộc mà Vue yêu cầuSau đó, thêm tệp cấu hình 2 vào thư mục plugin của bạn. Thao tác này sẽ tạo một tệp điểm đầu vào cụ thể, trong trường hợp này là 64 và tạo phiên bản dựng sẵn của ứng dụng Vue của bạn dưới dạng 65 5Tiếp theo, bạn có thể tạo các tệp nguồn Vue của mình trong thư mục nội dung của plugin. Mix hỗ trợ kết xuất các thành phần tệp đơn, cho phép bạn xác định mẫu, tập lệnh và tạo kiểu tất cả trong một tệp 6 7Bây giờ nếu bạn hoàn thành nội dung của mình trong thư mục gốc của dự án với ________ 366, Mix sẽ tạo thành phần Vue được biên dịch và xây dựng của bạn dưới dạng tệp JS Tiếp theo trong tệp mẫu của bộ điều khiển của bạn (ví dụ:. bộ điều khiển/myvuecontroller/index. php), bạn có thể bao gồm tệp 67 đã tạo và hiển thị nội dung trong div với thuộc tính 68 0lệnhCài đặt phụ thuộc nút 1Lệnh 1 sẽ cài đặt các phụ thuộc Node cho tất cả các gói Mix đã đăng kýLệnh này sẽ thêm từng gói đã đăng ký vào thuộc tính 00 của tệp gốc 7 của bạn, sau đó chạy và hiển thị kết quả của 02 từ gốc dự án của bạn để cài đặt tất cả các phụ thuộc cho tất cả các gói đã đăng ký cùng một lúcBạn có thể tùy chọn cung cấp cờ 03 hoặc 04 để cài đặt các phụ thuộc cho một hoặc nhiều gói. Để xác định nhiều gói, chỉ cần thêm nhiều cờ 03 vào cuối lệnhNếu lệnh được chạy với cờ 03 hoặc 04 và tên gói được cung cấp chưa được đăng ký và tên này khớp với tên gói mô-đun, plugin hoặc chủ đề hợp lệ (mô-đun có tiền tố là 08, chủ đề có tiền tố là 09 và plugin có tiền tố là Cờ 52 cũng có thể được cung cấp nếu bạn có đường dẫn tùy chỉnh đến chương trình 53. Nếu điều này không được cung cấp, hệ thống sẽ cố gắng đoán vị trí của 53 2Lệnh 55 sẽ cập nhật các phụ thuộc Node cho tất cả các gói Mix đã đăng kýLệnh này hoạt động rất giống với 1, ngoại trừ việc nó chỉ cập nhật các gói đã cài đặt trước đó. Điều này cho phép bạn luôn cập nhật các phụ thuộc, đặc biệt trong trường hợp sửa lỗi bảo mật hoặc phá vỡ các bản cập nhật từ các phụ thuộc Node của bạnVui lòng xem tài liệu 1 để biết các đối số và tùy chọn có sẵnLiệt kê các gói Mix đã đăng ký 3Lệnh 58 sẽ liệt kê tất cả các gói Mix đã đăng ký được tìm thấy trong bản cài đặt Winter. Điều này hữu ích để xác định xem plugin hoặc chủ đề của bạn có được đăng ký chính xác hay khôngLệnh sẽ liệt kê tất cả các gói, cũng như thư mục cho nội dung và tệp cấu hình đã được xác định trong quá trình đăng ký Biên dịch gói Mix 4Lệnh 39 biên dịch tất cả các gói Mix đã đăng ký, chạy từng gói thông qua Laravel Mix để biên dịchBằng cách chỉ định cờ 03, bạn có thể biên dịch một hoặc nhiều gói đã chọn. Để xác định nhiều gói, chỉ cần thêm nhiều cờ 03 vào cuối lệnhTheo mặc định, tất cả các gói được xây dựng ở chế độ "phát triển". Nếu bạn muốn biên dịch ở chế độ "sản xuất", chế độ này có thể bao gồm nhiều tối ưu hóa hơn cho các trang sản xuất, hãy thêm cờ 62 hoặc 63 vào lệnhLệnh sẽ tạo một báo cáo về tất cả các tệp đã biên dịch và kích thước cuối cùng của chúng sau khi hoàn tất Nếu bạn muốn chuyển các tùy chọn bổ sung cho Webpack CLI, đối với các trường hợp biên dịch đặc biệt, bạn có thể thêm 64 vào cuối lệnh, theo sau là bất kỳ tham số nào theo tùy chọn CLI của WebpackXem một gói Mix 5Lệnh 65 tương tự như lệnh 39, ngoại trừ việc nó vẫn hoạt động và theo dõi mọi thay đổi được thực hiện đối với các tệp sẽ bị ảnh hưởng bởi quá trình biên dịch của bạn. Khi có bất kỳ thay đổi nào, quá trình biên dịch sẽ tự động được thực thi. Điều này hữu ích cho sự phát triển trong việc cho phép bạn nhanh chóng thực hiện các thay đổi và xem lại chúng trong trình duyệt của mình
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 Làm cách nào để trộn CSS trong Laravel?cách thêm tệp css bên ngoài vào laravel-mix s . sao chép tệp css của bạn vào /resources/assets/css/yourfile. css thêm @nhập khẩu ". /css/tệp của bạn. css"; xuống cuối /resources/assets/sass/app. scss Nếu bạn chưa cài đặt các phụ thuộc nút, hãy chạy cài đặt npm chạy npm chạy dev Làm cách nào để chạy cài đặt npm trong Laravel?json tập lệnh NPM tương ứng. cp node_modules/laravel-mix/setup/webpack. cấu hình. js. /. . 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 |