Sử dụng laravel mix ( 6x)

  • 2019-12-31 23:31:50
  • 491
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é.

Mục Lục

  1. Giới thiệu
  2. Cài đặt và cấu hình
  3. Khởi chạy laravel mix
  4. Mix Less
  5. Mix Sass

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

Để lại comment của bạn nếu gặp khó khăn

Bài viết liên quan