Laravel Mix without Laravel (P2)
Laravel
23
laravelmix
4
browserSync
1
White

Yen Devy viết ngày 03/06/2018

Chào các bạn, ở phần trước mình đã hướng dẫn các bạn tích hợp Laravel Mix vào project rồi. Nhưng sau khi làm theo P1 thì mình thấy việc sử dụng Laravel Mix như vậy vẫn khá là nông dân. Vì vậy , hôm nay mình sẽ hướng dẫn các bạn tiếp tục sử dụng nó để tự động hoá mọi việc.

1. Auto Compile

Việc bạn cần làm duy nhất lúc này là chạy lệnh npm run watch thay vì chạy lệnh npm run dev.Giờ đây, sau mỗi lần Ctrl+S file thay đổi ở thư mục src/js(sass) thì nó sẽ ngay lập tức được compile sang thư mục public/js(css).

2. BrowserSync

Sau khi chạy lệnh npm run watch thì việc compile các file đã đc diễn ra 1 cách tự động rồi, giảm được lượng lớn các thao tác. Giờ các bạn sẽ thêm đoạn code .browserSync('http://localhost/laravelmix') vào file webpack.mix.config để trình duyệt tự động reload sau mỗi lần có file thay đổi . Chú í bạn cần thay đổi link http://localhost/laravelmix sao cho phù hợp với đường vẫn trỏ đến thư mục của bạn trên local.

3. Sau tất cả

Tổng kết lại từ P1 -> P2 thì file webpack.mix.js của mình sẽ full nội dung như sau

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

Các bạn nhớ để í đến cấu trúc thư mục & lệnh** npm run watch**(giúp compile thay đổi liên tục).

Thật ra thì mình có hơi dốt văn chút nên viết bài hơi lủng củng >< . Nếu bạn k hiểu chỗ nào or có góp í gì thì comment phía dưới giúp mình nhé.
Thank guys.

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 2 tháng trước
2 0
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 2 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 2 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 2 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á!