Hãy dùng Laravel Mix cho các dự án Laravel

Khi được hỏi Laravel có gì đặc biệt? từ các nhà phỏng vấn tuyển dụng ắt hẳn nhiều bạn không hề có ý nghĩ đưa ra câu trả lời là: Laravel Mix

Thường khi nói đến Laravel Mix một số bạn newbie sẽ có những comment vui như thế này: "chưa nghe Laravel Mix bao giờ 🤣🤣🤣", "sao không dùng webpack, gulp cho khỏe 🐌"... Trong bài viết hôm nay, Chung sẽ mổ xẻ Laravel Mix và hướng dẫn các bạn dùng Laravel trong các dự án Laravel nhé!

1. Laravel Mix là gì?

Laravel Mix cung cấp một API sạch, linh hoạt để định nghĩ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 ngắn gọn là: 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 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).

Đọc đoạn trên nhiều bạn thắc mắc là mình có cần phải biết webpack hay không? ⇒ Không bắt buộc nhé.

2. Sử dụng Laravel Mix trong Laravel project

2.1. Cài Nodejs & NPM

Vào trang chủ nodejs cài đặt theo hướng dẫn nhé https://nodejs.org/en/download/ quá easy nên mình không viết vào đây.

Sau khi cài xong bạn kiểm tra trên terminal lệnh:

node -v
npm -v

Có trả về version thì ok nhé

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: https://yarnpkg.com/lang/en/docs/install/ 

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ẻ. Bạn hãy chạy lệnh sau để cài đặt 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
npm run watch

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

+ LESS

Giả sử 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');

Giả sử muốn build thêm 1 file resources/assets/less/admin.less nữa.

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

Giả sử 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');

Giả sử muốn build thêm 1 file resources/assets/sass/admin.scss nữa.

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

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

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

+ Stylus

Cũng giống như Less, Sass

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

+ File CSS thường

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

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/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

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

+ React JS

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

+ Vanilla JS

Tương tự như mix.styles(), biên dịch nhiều file JavaScript gộp thành một file nào bằng phương thức scripts():

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

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

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 nè 😁😁

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

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

mix.copy('node_modules/foo/bar.css', 'public/css/bar.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/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, ép trình duyệt 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à bạn sẽ không muốn gõ tay cái mã này đâu 😆😆 hãy dùng Laravel helper function mix() nhé

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

Nếu bạn chỉ muốn gắn version khi build 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 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 chứ, nếu bạn chỉnh sửa liên tục sẽ rất phiền. Muốn tắt thì:

// easy
mix.disableNotifications();

Hãy thả 👍❤️cho Chung nhé!