laravel 7.x

Laravel Mix là gì? Hãy dùng mix trong các dự án laravel mà các bạn đang làm

Công thành

18 Th12 2021 • 5 min read

1. Laravel Mix là gì?

Laravel Mix cung cấp một API, linh hoạt, định nghĩa các bước xây dựng webpack cơ bản cho ứng dụng Laravel của bạn. Laravel Mix hỗ trợ một số bộ xử lý trước CSS và JavaScript phổ biến.

Nói dễ hiểu: Laravel Mix quản lý tất cả tài nguyên (assets) như img, css, js trong dự án của bạn, đồng thời nó dự trên base là webpack build cho tất cả các file css, js pre-processors như SCSS, SASS thành css, chuyển ES6 thành ES5 (trình duyệt không hiểu cú pháp ES6).

2. Sử dụng Mix trong Laravel project

2.1. Cài Nodejs & npm

Nếu bạn nào chưa download Nodejs về thì vào trang chủ download và cài đặt các gói phù hợp với máy tính của các bạn nhé. Link minh để đây nhé link

Sau khi cài xong các bạn kiểm tra trên teminal hoặc cmd xem version của bạn các bạn cài là bao nhiêu nhé. Với comman dưới đây

node -v
npm -v

các bạn cài thành công thì sẽ có kết quả là có trả về version thì oke rồi nhé như hình bên dưới đây là version hiện tại mình đang dùng

Các bạn có thể cài thêm yarn, vì yarn quản lý packages nhanh hơn npm, mình khuyến khích bạn cài thêm cái này: Link

2.2. Cài đặt các gói phụ thuộc

Trong project Laravel mặc định có file package.json, file này định nghĩa các gói cần thiết cơ bản để Laravel Mix chạy suôn sẻ. Các bạn hãy chạy lênh sau để cài các gói phụ thuộc: npm install hoặc yarn install nếu dùng yarn.

2.3. Chạy laravel Mix

Laravel Mix là 1 lớp phủ bên ngoài của webpack nên bạn không cần biết bên trong như thế nào chỉ cần chạy lệnh sau là sẽ auto compiles các file assets theo cài đặt như cài đặt trong file webpack.mix.js (phần cấu hình compile nói ở dưới)

// Chạy trên môi trường dev, local
npm run dev
// Chạy khi đưa lên host, deploy app, 2 lệnh này giống nhau
npm run prod
npm run production
// Chạy khi vừa dev, vừa chỉnh các file assets (css, sass, scss)
npm run watch

2.4. Làm việc với các file Css

+ LESS

Ví dụ các bạn có file resources/assets/less/app.less và muốn build nó thành css bỏ vào thư mục public/css/app.css

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

Nếu các bạn muốn buid thêm một hoặc nhiều file less nữa thành các file css thì các bạn viết nối tiếp ví dụ như sau:

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

Nếu bạn không muốn output app.less ra app.css mà muốn ra thành style.css thì:

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

+ SASS, SCSS

Ví dụ các bạn có file resources/assets/sass/app.scss và muốn build nó thành css bỏ vào thư mục public/css/app.css

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

Tương tự như các bạn buid các file less thì SASS và SCSS cũng tương tự như sau:

mix.sass('resources/assets/sass/admin.scss', 'public/css')
   .sass('resources/assets/sass/app.scss', 'public/stylesheets/styles.css');

+ Các file CSS:
Nếu các bạn muốn gộp chục file css thành một file css thì:

mix.styles([
    'public/css/normalize.css',
    'public/css/videojs.css',
    ...
], 'public/css/all.css');

+ Javascript

Laravel Mix có thể compiles

file js thường
cú pháp es2015
file vue
modules
bằng 1 hàm duy nhất đó là mix.js

mix.js('resources/assets/js/app.js', 'public/js');

2.5. Tùy chỉnh cấu hình Webpack

Như mình đã nói ở trên Laravel Mix là một lớp phủ bên ngoài webpack và việc biên dịch file vẫn phải chạy trên webpack. Nên hoàn toàn có thể tùy chỉnh cấu hình webpack thông qua file webpack.mix.js. Cái này cần phải có kiến thức về webpack các bạn nhé.

2.6. Sao chép tệp và thư mục

Giả sử bạn cần copy file node_modules/foo/app.css ra thư mục public/css/app.css thì:

mix.copy('node_modules/foo/app.css', 'public/css/app.css');

Giả sử bạn cần copy thư mục assets/img ra thư mục public/img thì:

mix.copyDirectory('assets/img', 'public/img');

2.7. Quản lý phiên bản và Xóa cache

Khi các file assets có sự sửa đổi và build lại, nghiễm nhiên nó sẽ không thay đổi ngay với tất cả mọi người, bởi vì trình duyệt đã cache lại. Cho nên version() chính là giải pháp hoàn hảo, bắt buộc trình duyệt của các bạn phải lấy về file mới nhất.

mix.js('resources/assets/js/app.js', 'public/js')
   .version();

Laravel Mix sẽ generate ra một mã hash tại thời điểm chạy, và các bạn sẽ không muốn gõ tay cái mã này nên hãy dùng Laravel helper function mix() nhé

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

Nếu các bạn chỉ muốn gắn version khi build trên production thì:

// chạy npm run prod sẽ generate ra version
if (mix.inProduction()) {
    mix.version();
}

2.8. Tắt thông báo

Nếu các bạn dùng npm run watch thì mỗi khi file thay đổi, webpack sẽ phát hiện và biên dịch lại, biên dịch đã xong thì phải báo message done hay fail, nếu bạn chỉnh sửa liên tục sẽ rất phiền. Muốn tắt thì các bạn thêm đoạn code này trong file webpack.mix.js của các bạn như sau:

mix.disableNotifications();

3. Kết luận

Trên đây có thể coi là cách tối ưu khi bạn muốn sử dụng Laravel Mix cho các dự án nhỏ hơn mà không sử dụng Laravel. Sau khi làm quen rồi thì việc thiết lập chỉ mất vài phút, trong khi cấu hình Webpack mất rất nhiều thời gian.

Mình thấy bài này sẽ bổ ích cho các bạn mới tìm hiều về laravel và học về laravel. Có gì sai sót thì xin nhận comment ở phía bên dưới. Cảm ơn các bạn đã theo dõi bài viết!

Tài liệu tham khảo
https://www.sitepoint.com/use-laravel-mix-non-laravel-projects/