Compiling Assets Laravel Elixir

Laravel Elixir cung cấp một API gọn gàng và liền mạch cho việc tạo các Gulp cho các ứng dụng Laravel. Laravel Elixir cung cấp một số pre-processor phổ biến cho CSS và Javascript Sass và Webpack. Laravel Elixir cung cấp một vài tính năng giúp bạn làm việc với các file JavaScript, như biên dịch ECMAScript 2015, module bundling, nén, hay đơn giản chỉ là nối các files plain JavaScript.

     Trước khi tìm hiểu về Compiling Assets Laravel Elixir thì chúng ta sẽ tìm hiểu qua về phương pháp minify để có thể hiểu rõ hơn về Laravel Elixir nhé.

     Chắc hẳn các bạn khi xem source code của các trang web lớn có thể các bạn sẽ thấy các tệp tin dưới dạng như là style.min.css hay plugin.min.js hay khi include các thư viện css, js … như include lib jquery vào trang web của mình bạn có thể thấy có các tên như jquery.js và jquery.min.js.

example compiling assets laravel elixir

Vậy file jquery.js và jquery.min.js khác biệt gì nhau?  Khác ở chỗ nào? Điểm khác nhau giữa file jquery.js và jquery.min.js là file jquery.min.js đã được minify. Thế việc minify mang lại tác dụng gì? Tại sao lại phải sử dụng minify? Nó giúp ích gì cho trong thiết kế web hay không?

Giờ chúng ta sẽ xem minify là gì?

Minify hay nói chính xác hơn là minify css hoặc minify js nghĩa của nó là làm giảm bớt dung lượng hiện có của tập tin css hay js. Nó là phương pháp loại bỏ toàn bộ khoảng trắng, xuống dòng, loại bỏ chú thích và dung lượng đã giảm một cách đáng kể và có thể mix các tập tin css và javacript nhỏ lẻ thành một tập tin lớn để người dùng có thể tải toàn bộ trong cùng một lúc khi truy cập vào website.

Nếu các bạn viết một trang web đơn giản hay các dự án nhỏ thì bạn có thể sẽ không nhận thấy được sự thay đổi hay tác dụng của việc minify đem lại, nhưng đối với các hệ thống lớn, cần rất nhiều module hay plugin thì việc nén js hay css này lại rất có ý nghĩa, ngoài ra nó lại còn rất tốt cho SEO vì tiết kiệm băng thông và tăng tốc độ tải của trang web, giảm thiểu thời gian tải trang. Và như vậy, với một hành động minify tuy nhỏ nhưng nó lại giúp chúng ta rất nhiều đúng ko? Thế để thực hiện việc minify các file này như thế nào đây? Chẳng lẽ lại ngồi xóa từng dấu cách hay từng dấu xuống dòng à? Chắc không ai dại gì mà làm thủ công như vậy vì hiện nay có rất nhiều cách để làm việc này. Hiện tại các IDE hay Editor hay có một vài trang web hỗ trợ minyfy online rất nhanh chóng và hiệu quả.

Sau khi biết tác dụng của việc minify đem lại nên khi code project https://nholicham.com/ bằng Framwork Laravel mình đã tìm hiểu và biết trong Framwork Laravel cũng có một tính năng hỗ trợ giúp minify các file js, css … là Laravel Elixir.

Laravel Elixir cung cấp một API gọn gàng và liền mạch cho việc tạo các gulp cho các ứng dụng Laravel. Laravel Elixir cung cấp một số pre-processor phổ biến cho CSS và Javascript Sass và Webpack. Laravel Elixir sử dụng móc nối hàm cho phép bạn tạo các nén và hợp nhất các assets (Javascript & CSS) thành một file duy nhất một cách liền mạch. Nếu bạn từng cảm thấy khó khăn trong việc bắt đầu sử dụng gulp và đóng gói asset, bạn sẽ yêu thích Laravel Elixir. Laravel Elixir cung cấp một vài tính năng giúp bạn làm việc với các file JavaScript, như biên dịch ECMAScript 2015, module bundling, nén, hay đơn giản chỉ là nối các files plain JavaScript hay khi viết ES2015 với modules, bạn có thể chọn Webpack và Rollup. Nếu đấy là những tool bạn chưa dùng bao giờ, đừng lo lắng, Laravel Elixir sẽ sử lý tất cả những việc khó khăn nhất cho bạn. Mặc định, Laravel gulpfile uses webpack để biên dịch Javascript, nhưng bạn có thể thoải mái thêm bất kỳ module bundler bạn thích. Nếu bạn có nhiều file javaScript, css, sass, less mà bạn muốn biên dịch thành một file, Laravel Elixir cũng cung cấp các phương thức để tự động kết nối , nén và source maps để mapping giữa các file đã biên dịch với file ban đầu.

Khi bạn là một developer chắc hẳn bạn đã gặp không ít trường hợp khi sửa file css, js nhưng trình duyệt vẫn không thay đổi vì cache vẫn lấy file cũ do cùng tên. Rất nhiều lập trinh viên muốn thêm một timestamp vào sau file biên dịch asset hoặc một unique token để trình duyệt tải lại khi nó có thay đổi thay vì vẫn sử dụng bản cũ. Để khắc phục điều này ở trong Laravel Elixir có phương thức version sẽ giúp ta khắc phục điều này. Phương thức version sẽ thêm một timestamp vào sau file mỗi khi biên dịch. Thật dễ dàng và nhanh gọn đúng không?

Giờ chúng ta sẽ tìm hiểu xem cách cài đặt và sử dụng Laravel Elixir như thế nào trong project Laravel nhé.

  1. Cài đặt

Để sử dụng Laravel Elixir trong project của mình thì bạn phải chắc chắn rằng đã cài đặt nodejs và npm trên máy tính của bạn vì gulp được xây dựng trên nền nodejs. Sau khi đã cài đặt node js và npm bạn cần cài gulp thông qua package npm bằng câu lệnh sau:

npm install --global gulp-cli

Bước cuối cùng là cài đặt Laravel Elixir, với việc cài đặt Laravel 5 thì bạn sẽ dễ dàng tìm thấy file: package.json ở thư mục gốc. Đây là file cấu hình để cài đặt các gói cho node.js tương tự như file composer.json của PHP vậy. Để cài các gói cần thiết bạn chạy lệnh sau:

npm install

Nếu bạn đang lập trình trên Window thì bạn cần chạy câu lênh npm install với lựa chọn –no-bin-links


npm install --no-bin-links

2. Cách chạy

Laravel Elixir sẽ được build qua gulp nên để chạy các task Laravel Elixir của mình bạn chỉ cần chậy qua câu lệnh “gulp”. Bạn có thể thêm cờ –production vào câu lệnh trên để minify file css và Javascript của bạn

// Run all tasks...
gulp
// Run all tasks and minify all CSS and JavaScript...
gulp --production

Lệnh “gulp watch” sẽ tiếp tục chạy terminal và xem những thay đổi asset. Gulp sẽ tự động biên dịch lại asset nếu bạn thay đổi bất kỳ file nào.gulp watch

3. Cách sử dụng

Sau khi đã cài đặt Elixir xong bạn có thể bắt đầu tạo task cho gulp. Bạn hãy mở file gulpfile.js ở thư mục gốc lên và bắt đầu edit các task.

  • Biên dịch file less

Để biên dịch các file less thì trước hết các bạn cần đặt file less của mình vào thư mục resources/assets/less, đây sẽ là thư mục mà Elixir tìm file less của bạn.

Trong project https://nholicham.com/ mình có sử dụng file less để viết css. Để biên dịch minify file less qua Elixir thì mình viết như sau:

//compile less file
elixir(function(mix) {
   mix.less('app.less', 'public/css/app.min.css');
});

Ở đây Laravel Elixir sẽ biên dịch minify file app.less sang file public/css/app.min.css. Trong đoạn code trên mình có thêm một param thứ 2 public/css/app.min.css, tham số này truyền vào để sau khi biên dịch xong file sẽ lưu tại thư mục public/css/app.min.css. Nếu không có tham số  thứ 2 truyền vào Elixir sẽ lưu file biên dịch tại thư mục mặc định là public/css/app.css. Bạn cũng có thể biên dịch nhiều file less thành một file css như sau:


elixir(function(mix) {
   mix.less([
     'app.less',
     'controllers.less'
  ]);
});
  • Biên dịch các file Script

Để biên dịch minify các file script trong project https://nholicham.com/ thì trước hết các bạn cần đặt file js của mình vào thư mục resources/assets/js và sau đây là đoạn code mình viết trong project https://nholicham.com/:

 


//login page
elixir(function(mix) {
   mix.scripts(['login_page.js'], 'public/js/login_page.js');
});

Nếu không có tham số thứ 2 truyền vào thì file sau khi được lưu mặc định ở đường dẫn public/js/all.js, Nhưng ở đây mình đã chọn vị trí lưu sau khi biên dịch là public/js/login_page.js. Để biên dịch tất cả các file js trong cùng một folder một lúc thì có thể viết như sau :


//show event page
elixir(function(mix) {
   mix.scriptsIn('resources/assets/js/date_picker', 'public/js/libs/date_picker.js');
});

Trong project https://nholicham.com/ mình có sử dụng angularjs và mình muốn add nó vào một file js chung nhưng không muốn nó bị minify mình sẽ dùng từ khóa combine.


elixir(function(mix) {
mix.scriptsIn('resources/assets/js/layout', 'public/js/layout.js')
   .combine([
       'public/js/libs/bootstrap.min.js',
       'public/js/layout.js'], 'public/js/layout.js')
   .scripts(['calendar/home.js', 'calendar/save_events.js', 'calendar/share_facebook.js'], 'public/js/calendar.js')
   .combine([
      'public/js/calendar.js',
      'public/js/libs/angular.min.js',
      'public/js/angular/BaseClass.js',
      'public/js/angular/CalendarController.js',
      'public/js/angular/CalendarFilter.js',
      'public/js/angular/CalendarService.js',
      'public/js/libs/date_picker.js',
      'public/js/libs/velocity.min.js'], 'public/js/calendar.js')
   .scripts('link_facebook.js', 'public/js/my_calendar.js')
   .combine([
      'public/js/calendar.js',
      'public/js/angular/MyCalendarSerivce.js',
      'public/js/angular/MyCalendarController.js',
      'public/js/my_calendar.js'], 'public/js/my_calendar.js')
   .scripts(['PushNotification/main.js'], 'public/js/PushNotification/main.js')
   .scripts(['show_form_resetPassword.js'], 'public/js/popup/show_form_resetPassword.js')
   .scripts(['service-worker.js'], 'public/service-worker.js');
});

Sau khi bạn tạo các task bạn nên sử dụng method version để tạo version cho file như sau:


elixir(function(mix) {
   mix.version(['css/app.min.css', 'js/layout.js', 'js/calendar.js', 'js/my_calendar.js', 'js/show_event.js', 'js/login_page.js', 'js/register_page.js', 'js/share_event.js']);
});

Nhiều bạn sẽ nghĩ tại sao lại phải tạo version để làm gì, các tác dụng gì? Mình sẽ giải thích như sau sau khi load page các file sẽ được lưu trong cache và khi bạn ko tạo version thì sau khi có thay đổi gì và bạn chạy lại lện gulp –production thì Browser sẽ bị lỗi load lại cache tức là load loại file trước khi sửa. Để khác phục tình trạng này bạn tạo version cho các file để trình duyệt luôn load file mới nhất của bạn.Và sau khi viết các task và run xong thì có thể include file css, js của mình sau khi minify như sau

<link rel="stylesheet" href="{{ elixir('css/app.min.css') }}">

<script type="text/javascript" src="{{ elixir('js/layout.js') }}"></script>

Nếu bạn muốn tìm hiểu nhiều hơn về Laravel Elixir bạn có thể tham khảo trên trang chủ của Laravel với đường dẫn https://laravel.com/docs/5.3/elixir