Laravel Mix without Laravel (P1)
laravelmix
4
broswerSync
1
White

Yen Devy viết ngày 20/05/2018

Khá ấn tượng khi sử dụng Laravel Mix với dự án Laravel ở 2 bài viết trước, nên mình quyết định thử dùng nó như 1 công cụ đích thực dành cho dev front-end xem sao. Vậy nên hôm nay bài viết này của mình sẽ hướng dẫn các bạn sử dụng LaravelMix vào bất cứ project nào mà bạn muốn. Tưởng đơn giản mà hiểu thì cũng sm khi fix bug trên window(không biết các hệ điều hành khác thì sao).

0. What is LaravelMix?

LaravelMix là 1 thư viện cung cấp các API để điều khiển các hành động thường hay gặp khi sử dụng webpack(nói thế này thì khó hiểu nhỉ). Vậy bạn cứ hiểu đơn giản là chúng ta có thể đóng gói module & biên dịch các file chẳng hạn như sass,less,es6 & browserSync ... 1 cách đơn giản .

1. Install Laravel mix

Trước tiên bạn tạo 1 thư mục chứa source code của dự án. Ở đây mình sẽ tạo 1 folder tên laravelmix . Sau đó bạn tạo 1 file package.js với nội dung sau(nội dung file này mình lấy trong source của laravel5.6 vì khi mình cài theo document ở đây thì bị lỗi vs action BrowserSync mình đoán do thiếu 1 vài package khi install về).
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.17",
"bootstrap-sass": "^3.3.7",
"browser-sync": "^2.24.4",
"browser-sync-webpack-plugin": "^2.2.2",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"
}
}

Sau khi có file với thư mục như trên thì bạn chạy lệnh npm install để nodejs down toàn bộ package về thư mục node_modules nhé.

alt text

2. Config webpack.mix.js

Sau khi xong lệnh trên, lúc này chúng ta sẽ tạo thư mục code. Ở đây mình sẽ tạo file index.html, folder src (chứa source sass & js), folder public(chứa code sau khi compiled từ src)
alt text

Tiếp theo chúng ta sẽ tạo file config webpack.mix.js để tự động hoá các công việc compile sass,js(es6) & BrowserSync. Bằng cách chạy lệnh sau cp -r node_modules/laravel-mix/setup/webpack.mix.js ./ . Bạn sẽ có ngay 1 file với nội dung như dưới đây (Bao gồm config mẫu & toàn bộ các api config còn lại của LaravelMix)

alt text
Sau đó mình sẽ page nội dung sau vào file webpack.mix.js

let mix = require('laravel-mix');
mix.js('src/js/app.js', 'public/js')
.sass('src/sass/app.scss', 'public/css')
.setPublicPath('public');

với đoạn lệnh trên sẽ thông báo cho laravelmix biết rằng hãy compile source sass & js từ thư mục src/sass(js) thành css&js(Es5) vào thư mục public/css(js) tương ứng. Đặc biệt chú í trên window mình cần thêm config setPublicPath (chỉ đến thư mục chứa source sau khi compile ở đây của mình là public). Nếu k có config này thì khi bạn chạy lệnh compile(npm run dev) sẽ bị hoãn lại ở 95% và k success được.

3. Compile static file

Tiếp theo mình sẽ chạy lệnh npm run dev để thực thi compile. Lúc này bạn sẽ thấy ở thư mục public sẽ có cấu trúc code mới như sau
alt text

Lúc này chúng ta sẽ link css & js từ thư mục public vào file index.hmtl và test thử.

alt text

Ok. Bây giờ thì bạn chỉ việc viết sass & js(es6) vào app.sass & app.js . Chú í sau mỗi lần bạn muốn test thử code bạn đã viết thì bạn cần chạy lại lệnh npm run dev để compile lại source vào thư mục public.

Dưới đây là đoạn code test thử của mình kèm theo kết quả.
alt text

Nhưng các bạn thấy đấy, mỗi lần ta viết thay đổi lại cần chạy lệnh rồi f5 lại trình duyệt để xem kết quả (ntn thì thà k dùng laravelMix còn đỡ cực hơn :D ). Vì vậy mình sẽ hướng dẫn các bạn về việc autoCompile file thay đổi cũng như tự động reload trình duyệt ở bài sau nhé.

Cảm ơn các bạn đã đón đọc bài viết của mình, làm ơn để lại bình luận cho mình nếu bạn có bất kì góp í nào nhé!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Yen Devy

4 bài viết.
2 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
2 0
Mình chính xác là 1 coder lười, vì vậy mình muốn mọi thứ đều tự động hóa. Đặc biệt khi mà ngày nay có quá nhiều processor(SASS,LESS,STYLUS...) dành...
Yen Devy viết 4 tháng trước
2 0
White
1 0
Hi guys, nay mình lại quay trở lại với P2 đây. Ở phần 1 mình đã giới thiệu sơ qua cho các bạn về LaravelMix và thành quả mà nó mang lại rồi. Phần n...
Yen Devy viết 4 tháng trước
1 0
Bài viết liên quan
White
1 0
Hi guys, nay mình lại quay trở lại với P2 đây. Ở phần 1 mình đã giới thiệu sơ qua cho các bạn về LaravelMix và thành quả mà nó mang lại rồi. Phần n...
Yen Devy viết 4 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
2 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!