Quản lý file với Laravel Mix

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.

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ì?

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

$ node -v
v6.12.2  
$ npm -v
5.6.0

1. npm run dev – Thực thi tất cả các tác vụ Mix một lần.
2. 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.
3. 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.
4. 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ủ.

5.1 Làm việc với css

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:

mix.styles([
    'public/assets/foundation/css/foundation.css',
    'public/css/style.css',
], 'public/css/all.css');

Less, Sass, Stylus

Laravel Mix có các phương thức less(), sass(), stylus() để thực hiện biên dịch các ngôn ngữ tiền xử lý CSS thành ngôn ngữ CSS thông thường mà trình duyệt hiểu được. Cú pháp thực hiện như sau:

mix.less('resources/assets/less/app.less', 'public/css');

Với câu lệnh này khi thực hiện build, nó sẽ biên dịch từ file resources/assets/less/app.less thành file public/css/app.css. Bạn có thể thay đổi tên file đầu ra bằng cách đưa đường dẫn đầy đủ cùng tên file bạn cần đặt:

mix.less('resources/assets/less/app.less', 'public/stylesheets/styles.css');

Để biên dịch nhiều file Less thực hiện chuỗi các tác vụ như sau:

mix.less('resources/assets/less/app.less', 'public/css')
   .less('resources/assets/less/admin.less', 'public/css');

Cũng với cách tương tự bạn có thể thực hiện với các ngôn ngữ tiền xử lý CSS khác như Sass, Stylus bằng cách sử dụng mix.sass() hoặc mix.stylus và bằng cách thay các file với phần mở rộng là .scss, .sass, .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

.example {
    background: url('../images/example.png');
}

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:

.example {
  background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

Nếu cấu trúc thư mục của bạn đã có sẵn và bạn không muốn thực hiện rewrite đường dẫn, thiết lập tùy chọn tắt tính năng này đi như sau:

mix.sass('resources/assets/app/app.scss', 'public/css')
   .options({
      processCssUrls: false
   });

5.2 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:

mix.js(['resources/assets/js/app.js',

    'public/assets/modernizr/modernizr.js',

    'public/assets/jquery/dist/jquery.js',

    'public/assets/foundation/js/foundation/foundation.js',

], 'public/js/allscript.js')

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:

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

Tách biệt các thư viện Javascript của bên thứ ba

Có một vấn đề là các thư viện Javascript của bên thứ ba cũng được đóng gói cùng thư viện do bạn viết ra, trong hai loại thư viên này thì thư viện bên thứ ba rất ít khi thay đổi trong khi code bạn viết thì thay đổi thường xuyên hơn dẫn đến mỗi khi thay đổi, trình duyệt lại tải lại toàn bộ. Việc tách thư viện bên thứ ba ra thành file riêng giúp trình duyệt chỉ tải lại những gì cần thiết, giảm băng thông và tăng tốc độ xử lý file.

Mix cung cấp phương thức extract() cho việc này:

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['vue'])

Phương thức extract() chấp nhận đầu vào là một mảng các thư viện bên thứ ba mà bạn muốn đóng gói thành file vendor.js. Với đoạn mã trên, Laravel Mix sẽ sinh ra ba file:

• public/js/manifest.js: webpack manifest runtime.
• public/js/vendor.js: chứa các thư viện bên thứ ba.
• public/js/app.js: chứa code do bạn viết.

Trong file HTML bạn cũng phải đưa vào các file Javascript này theo thứ tự:

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

React

Mix có thể tự động cài đặt plugin Babel cần thiết cho React. Để xử lý React chỉ đơn giản thay phương thức js() thành react():

mix.react('resources/assets/js/app.jsx', 'public/js');

5.3 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():

mix.copyDirectory([

    'resources/assets/css',

], 'public/css');

Mặc định, mỗi khi một tác vụ Mix hoàn thành, một thông báo sẽ được Hệ điều hành đưa ra, để tắt thông báo này bạn có thể thêm vào phương thức disableNotifications() như sau:

mix.disableNotifications();

vào trong file webpack.mix.js

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 đó. Nguồn tham khảo : https://laravel.com/docs/5.5/mix