Sử dụng laravel mix ( 6x)

311 lượt xem 1 năm trước
Các bạn có thể F12 lên để xem js và css của mình trên website previewcode. Vì sao mình lại sử dụng laravel mix, để hiểu rõ lý do thì các bạn hãy xem bài viết này nhé.

Sử dụng laravel mix giúp chúng ta optimize lại được css, js giảm tải đc dung lượng mỗi khi request ( load page ) và một phần nữa giúp chúng ta tăng điểm pagespeed. Chúng ta hãy bắt đầu nhé.

Giới thiệu

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 phương pháp xâu chuỗi đơn giản, bạn có thể xác định thành thạo đường ống tài sản của mình. Ví dụ

mix.js('resources/js/app.js', 'public/js')
mix.sass('resources/sass/app.scss', 'public/css');

Cài đặt và cấu hình

Trước khi cài đặt laravel mix thì bạn phải cài đặt trước nodejs và npm

Ở phần này các bạn chú ý tới phiên bản của npm và nodejs đi kèm sao cho phù hợp nhé

Và khi đã cài đặt xong nodejs và npm thì bạn hãy kiểm tra xem đã hoàn tất hay chưa nhé. Bằng cách sử dụng 2 câu lệnh sau 

node -vnpm -v

Ở các phiên bản 6x thì các bạn sẽ tìm thấy laravel mix ở package.json và việc còn lại bạn chỉ cần run câu lệnh sau 

npm install

Quá trình cài đặt nhanh hay chậm còn phụ thuộc vào tốc độ mạng của bạn. Nên hãy cứ chờ đợi lúc nào nó chạy xong rồi làm tiếp các bước phía sau nhé. ;)

Khởi chạy laravel mix

Ở môi trường dev thì mình hay chạy 

npm run dev

Và ở môi trường product thì mình run

npm run production

Mix Less

Để mix file less thì cũng đơn gian thôi. Các bạn cấu hình vào webpack như sau

mix.less('resources/less/app.less', 'public/css');

Các bạn muốn mix nhiều file một lúc thì mình có thể làm như sau 

mix.less('resources/less/app.less', 'public/css')
 .less('resources/less/admin.less', 'public/css');

Mix Sass

Và sass cũng tương tự như less bạn chỉ cần thay mix.less thành .sass là được nhé.

.... và còn một số cấu hình khác nữa các bạn có thể tham khảo thêm tại trang chủ của laravel tại đây

Bài viết liên quan

123code.net - Tạo cảm giác an toàn, uy tín, chất lượng đến cho mọi người

123code.net mang lại cảm giác an toàn nhất cho bạn, không làm bạn thất vọng, giúp bạn giải quyết được vấn đề đồ án tốt nghiệp ở thời điểm hiện tại và tương lai

- Đưa ra giải pháp, góp ý giúp bạn có được một đề tài đồ án tốt, phù hợp nhất

- Có nhiều tính năng mới, độc giúp thu hút, thuyết phục được giáo viên phản biện cũng như hội đồng bảo vệ đồ án

- Đúng ngày, đúng giờ, đầy đủ yêu cầu - tính năng

=> Nhanh tay đăng ký hoạc liên hệ với admin tại đây để có được một đồ án phù hợp với mình

123code.net

Bài viết nhiều người đọc

Tìm hiểu chung về công việc Embedded Software Engineer

2022-12-08 10:25:44

Embedded Software Engineer là gì? Công việc này sẽ cần phải làm những gì và mức thu nhập liệu có thực sự tốt hay không?

Embedded System là gì? Cấu trúc cơ bản của Embedded System

2022-12-07 21:37:33

Khái niệm Embedded System là gì? Cấu trúc cơ bản có trong một Embedded System. Tìm hiểu những thông tin hữu ích về hệ thống nhúng trong máy móc

Bạn có nên tự lập trình website chuyên nghiệp cho doanh nghiệp của mình?

2022-12-07 16:21:37

Khi nào bạn nên tự lập trình website chuyên nghiệp? Hãy tìm hiểu kỹ yêu cầu của website chuyên nghiệp trước khi tự thiết kế website cho mình

Những điều bạn cần biết để code đồ án website hiệu quả

2022-12-07 16:13:50

Khái niệm code đồ án website là gì? Phân loại code đồ án cho website hiện nay. Code đồ án website đảm bảo uy tín, chất lượng cao

Tổng hợp các thông tin cơ bản về code embedded

2022-12-06 22:03:07

Code embedded là gì? Để trở thành một người code embedded thuần thục thì cần trang bị những kiến thức và kỹ năng gì?

Lập trình embedded là gì? Ứng dụng của lập trình embedded trong cuộc sống

2022-12-06 00:02:09

Khái niệm lập trình embedded là gì? Lập trình embedded có phải một lĩnh vực công việc đáng mơ ước? Triển vọng của lập trình viên trong ngành

Kiến thức cơ bản cần nắm để code ứng dụng Android

2022-12-05 14:51:07

Làm thế nào để có thể code ứng dụng Android hiệu quả? Cùng tìm hiểu những kỹ năng cơ bản nhất để thực hiện code ứng dụng Android.

Dịch vụ code thuê phần mềm code thuê đồ án chất lượng cao tại 123CODE

2022-12-05 06:12:35

Dịch vụ code thuê phần mềm chạy trên máy tính mượt mà. Code thuê đồ án chủ đề xây dựng phần mềm chất lượng cao tại 123CODE

Dịch vụ code đồ án chất lượng cao tại 123CODE

2022-12-04 23:44:23

Code đồ án chất lượng cao tại 123CODE. Gói dịch vụ code website, code phần mềm ứng dụng, chương trình hoạt động trong máy móc

Bài viết liên quan

Thay đổi mật khẩu user trong postgres
122 lượt xem 2022-08-31 13:22:06
Phân trang trong nestjs
147 lượt xem 2022-08-26 02:14:03
Hướng dẫn - Cách export CSDL từ phpmyadmin
237 lượt xem 2022-05-14 13:36:04
Đồ án website quản lý HB - Bài 9
379 lượt xem 2021-12-08 15:24:47
Đồ án website quản lý HB - Bài 8
322 lượt xem 2021-12-08 15:10:50
Đồ án website quản lý HB - Bài 7
334 lượt xem 2021-12-05 00:34:06
Đồ án website quản lý HB - Bài 6
381 lượt xem 2021-12-05 00:11:05
Đồ án website quản lý HB - Bài 5
303 lượt xem 2021-12-04 09:12:24
Đồ án website quản lý HB - Bài 4
339 lượt xem 2021-12-04 08:21:47