Quản lý file với Laravel Mix

CHUYỆN NGHỀ1 Comment

You Are Here:Quản lý file với Laravel Mix

 

Chào các bạn,lại là mình đây.Sau khoảng thời gian sml với project  trên công ty nay mới có thời gian viết bài lại.Trong dự án mình làm được anh trainer suggest sử dụng laravel mix để quản lí file css và js trong  laravel.Mình thấy khá là hay lên hôm nay vừa chia sẻ vừa note lại cho chính bản thân mình.

Tại sao nên dùng Laravel Mix trong Laravel

Trong một dự án phầm mềm, viết code chỉ là một trong những công việc cần làm, ngay cả với những website nhỏ, các công việc vẫn cần thực hiện như nén ảnh, tối ưu hóa các file css, javascript… giúp giảm kích thước lưu trữ và tối ưu băng thông. Việc làm này tạo ra trải nghiệm tốt cho người dùng do tốc độ tải trang nhanh chóng hơn, đặc biệt Google cũng rất thích điều này, Google sẽ đánh giá website của bạn tốt hơn và dẫn đến thứ hạng SEO cũng tốt hơn. Laravel Mix là một công cụ như vậy, nó giúp xây dựng file css từ các CSS pre-processing như Sass, Less dễ dàng hơn bao giờ hết. Laravel Mix giúp bạn giảm rất nhiều thời gian trong các công việc có thể tự động hóa được.

 

Quản lý mã CSS, Javascript, tổng hợp và biên dịch tài nguyên Laravel Mix

Các phiên bản từ Laravel 5.3 trở về trước Laravel sử dụng Laravel Elixir. Laravel Elixir xuất hiện lần đầu vào tháng 10 năm 2014, công cụ này cho phép tự động gắn kết các file và kiểm soát các tài nguyên liên quan dễ dàng. Laravel Elixir được xây dựng dựa trên Gulp (Một công cụ xây dựng hệ thống mã nguồn mở sử dụng để tự động hóa các tác vụ thông qua Gulp task). Laravel Mix là cái tên mới từ phiên bản Laravel 5.4, nó được xây dựng dựa trên Webpack.js. Từ nãy đến giờ hơi dông dài chút, giờ chúng ta sẽ tiến hành cài đặt và sử dụng Laravel Mix trong những ví dụ thực tế giúp hiểu rõ hơn Laravel Mix là gì?

Cài đặt Laravel Mix

Laravel sử dụng npm để quản lý các thư viện lập trình javascript, css của mình, do đó bạn cần cài đặt npm trước tiên. Do Node.js đã tích hợp npm vào bộ cài, do đó bạn cần cài đặt Node.js là đã có npm. Tải bộ cài Node.js về, lựa chọn phiên bản cho phù hợp với môi trường của mình, nó hỗ trợ các môi trường thông dụng hiện nay như Linux, OSX, Windows. Trong bài viết này tôi sử dụng môi trường Linux, sau khi cài đặt xong để kiểm tra phiên bản node.js và npm chúng ta sử dụng lệnh

 

Run Laravel Mix

Trong thư mục gốc dự án xây dựng bằng Laravel sẽ có một file là package.json, file này chính là file cấu hình cho các công cụ quản lý thư viện lập trình như npm hoặc yarn.File package.json chứa các gói thư viên lập trình Javascript sẽ được cài đặt trong dự án và một số các kịch bản xây dựng như sau:

  • npm run dev – Thực thi tất cả các tác vụ Mix một lần.
  •  npm run watch – Thực thi tất cả các tác vụ Mix và tiếp tục theo dõi các tài nguyên, nếu có sự thay đổi này đó sẽ tự động biên dịch lại tài nguyên, kịch bản này rất hay được dùng khi phát triển ứng dụng.
  •  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ó thực hiệ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ó tải lại tài nguyên.
  • npm run production – Thực thi tất cả các tác vụ Mix và tối ưu (minify) các file kết quả đầu ra, khi đó bạn có thể sử dụng các kết quả để triển khai ứng dụng trên máy chủ.

Các xử lý và cài đặt trong Laravel Mix

CSS thông thường

Nếu bạn muốn gộp nhiều file CSS thành một file duy nhất, bạn có thể sử dụng phương thức style:

Xử lí URL trong file CSS

Trong biên dịch CSS, Webpack sẽ tối ưu và rewrite lại các phương thức url() gọi trong các file stylesheet. Xem xét ví dụ sau:

Laravel Mix sẽ tìm file example.png và copy vào thư mục public/images và thực hiện rewrite url() như sau:

Làm việc với Javascript

Laravel Mix cung cấp rất nhiều tính năng để làm việc với Javascript như biên dịch ECMAScript 2015 hay còn gọi là ES6, đóng gói module, minify đầu ra, kết hợp nhiều file thuần Javascript… Nó làm rất tốt công việc của mình mà không cần cấu hình nào:


Với một dòng code như thế này bạn đã có thể có sử dụng những ưu thế của Mix như sau:

  • Sử dụng cú pháp của ES6
  • Module hóa.
  • Biên soạn các file .vue (Khi dự án sử dụng Vue.js)
  • Minify với các đầu ra khi sử dụng kịch bản npm run production.

Copy file và thư mục

Laravel Mix cung cấp phương thức copy()  và copyDirectory() để thực hiện việc copy file và thư mục đến một vị trí nào đó trong dự án. Tính năng này rất hữu ích khi bạn muốn copy file hoặc thư mục từ node_modules vào thư mục public.

Để duy trì cấu trúc thư mục khi copy một thư mục Mix khuyến cáo bạn sử dụng phương thức copyDirectory() thay cho phương thức copy():

Lời kết

Laravel Mix là một công cụ tuyệt vời giúp hệ sinh thái Laravel trở nên phong phú đa dạng, Mix giúp bạn tự động hóa các công việc, giảm thiểu thời gian build trong phát triển ứng dụng.

Nhưng bạn cũng đừng lên lạm dụng chúng nhé,khi bạn mix quá nhiều file css hoặc js của các thư viện khác nhau dẫn đến hiện tượng conflicts đó.

Ngoài ra còn một số các xử lý khác.Tham khảo thêm tại Laravel Mix.

 

About the author:

Top