Laravel mix trong laravel 5.4

Yêu cầu cần có

Để sử dụng được Mix trong laravel hãy chắc chắn bạn đã cài Node.js và NPM. Nếu bạn đang sử dụng Homestead thì laravel đã cung làm hết cho bạn rồi. Chỉ việc dùng thôi. Còn nếu không dùng Homestead bạn có thể tìm hiểu cách cài đặt ở đây. Để kiểm tra chắc chắn máy bạn đã có Node.js và NPM hãy chạy lệnh:

node -v
npm -v

Install the dependencies

Mặc định laravel đã include mọi thứ bạn cần để start project laravel trong file package.json, nó giống với file composer.json của PHP. Để sử dụng được Mix bạn chỉ cần chạy lệnh:

npm install

Đến đây chỉ mới là cài đặt các dependencies cần thiết để sử dụng Mix thôi.

File webpack.mix.js.

Trước tiên hãy tìm hiểu nội dung file webpack.mix.js. Bạn sẽ thấy có nội dung sau:

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

Đoàn code trên có nghĩa là khi bạn chạy lệnh:

npm run dev

Thì file resources/assets/js/app.js sẽ được biên dịch thành file public/js/app.js, file resources/assets/sass/app.scss sẽ được biên dịch thành file public/css/app.css. '.js' và '.sass' là các phương thức của Mix.

Sử dụng Mix

Sau khi khai báo những file cần biên dịch trong file webpack.mix.js thì chạy lệnh:

npm run dev

Để biên dịch như mình đã nói ở trên. Nếu muốn Mix tự động biên dịch lại nhưng file như resources/assets/sass/app.scss khi bạn edit file đó thì hãy chạy lệnh:

npm run watch

Một số phương thức khác của mix.

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

Biên dịch file .less thành file .css.

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

Biên dịch file .styl thành file .css.

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

Gộp hai file .css thành một file .css Ngoài ra còn một số phương thức hữu ích khác bạn có thể tham khảo tại đây.