Tự động hóa front-end vs Laravel Mix trong Laravel(P1)

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 cho CSS, hay việc ES6 đã xuất hiện từ 2015 giúp việc code front-end của chúng ta trở nên uyển chuyển & chuyên nghiệp hơn rất nhiều. Nhưng điều đáng buồn là các trình duyệt hiện tại thì vẫn chưa hỗ trợ đọc trực tiếp những thứ này. Vì vậy sớm muộn gì sau khi code xong bạn cũng phải compile chúng ra thành CSS & ES5. Cái việc compile này thì có đến n cách , nhưng hôm nay mình sẽ hướng dẫn các bạn cách sử dụng Laravel Mix để thực hiện chúng.

1.Laravel Mix là gì?

Theo mình thấy thì Laravel Mix giống như ông chủ của Webpack vậy, nó đã tích hợp cho webpack cách thực hiện những công việc phổ biến, nó giúp chúng ta thông qua các config đơn giản trong webpack.mix.js để báo cho webpack rằng nó sẽ phải thực hiện những lệnh gì. Còn nếu bạn chưa biết webpack là gì thì xem thêm ở đây nhé .
(Mà nếu bạn vẫn lo lắng là mình chưa biết gì về Webpack thì có nên làm theo bài viết này không thì hoàn toàn được nhé. Chúng ta đang làm việc vs Laravel Mix cơ mà * :D *)

2. Thành quả khi follow bài viết

Giờ thì mình sẽ khái quát qua thành quả sau khi mình sử dụng những config đơn giản nhất của Laravel-Mix.
+, Tự động compile SASS => CSS
+, Tự động compile ES6 => ES5(Tích hợp Reactjs)
+, Auto reload trình duyệt sau mỗi lần lưu thay đổi(Ctrl+S)

Nó sẽ trông cool ngầu như thế này này .
https://drive.google.com/file/d/1SkoUExvKpbnGroDeZ9GxGdQy3hvh-XZo/view

3. Install

Trước tiên để cài đặt Laravel Mix thì bạn cần cài Node js & NPM trước. Bạn đừng thắc mắc là tại sao nó lại lằng nhằng đến thế. Nếu bạn xác định còn làm web coder thì sớm muộn gì cũng phải cài 2 cái này thôi.

Ở bài này mình sẽ sử dụng source code của Laravel để demo vì vậy các bạn cần cài đặt thêm Laravel nữa.

Sau khi chắc chắn là đã cài 3 thằng ở trên trước rồi, thì giờ bạn mở gitbash(or cmd) ở thư mục chứa source code dự án Laravel của bạn ra và chạy lệnh sau cho mình.

npm install

alt text

Như vậy là bạn đã cài đặt xong Laravel Mix rồi đấy. Ở bài viết sau mình sẽ hướng dẫn bạn cách config và sử dụng nó.
Chào thân ái & hẹn gặp lại.

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
1 0
Khá ấn tượng khi sử dụng Laravel Mix với dự án Laravel ở 2 (Link) 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...
Yen Devy viết 6 tháng trước
1 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 6 tháng trước
1 0
Bài viết liên quan
White
2 2
Bash script to fast serve Laravel project Lười gõ dòng lệnh quá nên tạo ra cái script để gõ nhanh :D laravelstart.sh /bin/bash if z "$1" ] ...
Vũ Hoàng Chung viết hơn 1 năm trước
2 2
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 6 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á!