Use laravel mix with cakePHP

Laravel mix là công cụ biên dịch, tối ưu các file css, javascript, image, ... Laravel mix dựa trên base của webpack build tất cả các file css, js, css pre-prosessor(SCSS, SASS, LESS, STYLUS), compile ES6 thành ES5, giúp trang web của bạn tải nhanh hơn, tạo trải nghiệm người dùng tốt hơn, tối ưu SEO. Laravel mix được viết dành riêng cho laravel, nhưng nó cũng có thể sử dụng cho bất kì framwork nào khác. Hôm nay chúng ta sẽ tích hợp laravel mix với cakePHP.

Install laravel mix with cakePHP

Để cài đặt laravel mix bạn cần phải cài node trước, mình dùng node 16. Nếu bạn muốn thay đổi các version node hãy dùng nvm

➜  ~ node -v
v16.16.0

Để cài đặt laravel mix, từ thư mục gốc của dự án chạy các command sau

// Tạo file package.json, quản lý các packagist sử dụng
npm init -y

// Cài laravel mix
npm install laravel-mix --save-dev

// Tạo file config cho laravel mix
touch webpack.mix.js

Thêm các scritp sau vào file package.json

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
}

Define Compilation laravel mix

Chúng ta sẽ định nghĩa các cách biên dịch file css, js, images, SCSS, SASS, LESS, STYLUS... trong file webpack.mix.js

let mix = require('laravel-mix');

mix.setPublicPath('webroot');

Các phương thức hay dùng

Các phương thức compile hay dùng trong file webpack.mix.js

// Compile file less ra file css
mix.less('resources/assets/less/app.less', 'webroot/css/app.css');

// Biên dịch file SCSS
mix.sass('resources/assets/sass/app.scss', 'webroot/css/app.css');

// Compile stylus file
mix.stylus('resources/assets/stylus/app.styl', 'webroot/css/app.css');

// Compile css file
mix.styles([
    'resources/assets/css/normalize.css',
    'resources/assets/css/videojs.css',
    ...
], 'webroot/css/app.css');

// Conpile js file
mix.js([
     'resources/assets/js/bootstrap-datepicker.js',
     'resources/assets/js/jquery.timepicker.min.js'
 ], 'webroot/js/datetimepicker.js');

// Copy file
mix.copy('node_modules/foo/bar.css', 'webroot/css/bar.css');

// Copy folder
mix.copyDirectory('resources/assets/images', 'webroot/images');

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

// Tắt thông báo khi compile
mix.disableNotifications();

Run compile

Khi đã định nghĩa cách compile trong file webpack.mix.js xong, giờ chúng ta chỉ việc chạy lệnh để complie file là xong. Các script này đã được config trong file package.json

• npm run dev Các file sẽ được compile một lần.
• npm run watch Thực thi mix các file hiện tại và theo dõi các file cần mix (là những file trong thư mục webpack.mix.js) khi có sự thay đổi thì nó sẽ mix luôn.
• npm run hot Thực thi tất cả các tác vụ mix nhưng vẫn active và theo dõi sự thay đổi các tài nguyên, nếu có sự thay đổi, nó cập nhật chỉ các module có sự thay đổi, sau đó nó báo cáo với ứng dụng về sự thay đổi và cập nhật mã trong trình duyệt mà không cần tải lại tài nguyên.
• npm run prod Thực thi tất cả các tác vụ Mix và tối ưu (minify) các file, dùng khi deploy cho môi trường production

Laravel Mix v6.0.49   
                         
✔ Compiled Successfully in 114ms

Như vậy chúng ta đã tích hợp thành công laravel mix cho dự án sử dụng cakephp framework. Chúng ta sẽ sử dụng nó để tạo giao diện trang admin, frontend sau này.