Laravel Elixir và sử dụng bower (Phần 1: Install)

Giới thiệu

Laravel Elixir cung cấp một cách rõ ràng, định nghĩa các Gulp cơ bản cho ứng dụng Laravel của bạn. Elixir hỗ trợ cho xử lý CSS và Javascript thông dụng. Elixir cho phép bạn định nghĩa tài nguyên có sẵn của bạn. Ví dụ

elixir(function(mix) {
    mix.sass('app.scss')
       .coffee('app.coffee');
});

Nếu bạn đã từng bị nhầm lẫn về làm như thế nào để bắt đầu với Gulp và biên dịch các tài nguyên, bạn sẽ thích Laravel Elixir. Tuy nhiên, bạn không cần sử dụng nó khi phát triển ứng dụng của bạn, bạn có thể sử dụng tự do bất kỳ cái nào bạn muốn hoặc thậm chí là không có cài nào cả.

Cài đặt và thiết lập

Cài đặt Node.js

Trước khi sử dụng Elixir, đầu tiên bạn phải chắc chắn rằng Node.js được cài đặt trên maý của bạn.

node -v

Mặc định, Laravel Homestead bao gồm tất cả mọi thứ bạn cần; tuy nhiên, nếu bạn không sử dụng Vagrant, thì bạn có thể cài đặt Node.js bởi ghé thăm Install Node.js

Gulp

Tiếp theo, bạn sẽ cần để cài đặt Gulp là một gói của NPM:

npm install --global gulp-cli

Bạn có thể muốn chạy npm shrinkwrap để khóa yêu cầu NPM của bạn:

npm shrinkwrap

Một khi bạn đã chạy lệnh này, nó sẽ ghi vào file npm-shrinkwrap. json để kiểm soát mã nguồn.

Laravel Elixir

Không chỉ còn lại bước là cài đặt Elixir! Trong project của Laravel, bạn sẽ tìm thấy một tập tin package.json trong thư mục gốc. Hãy suy nghĩ về điều này như tập tin composer.json của bạn. Bạn có thể cài đặt các gói trong npm bằng cách chạy:

npm install

Nếu bạn đang phát triển trên hệ thống Windows hoặc bạn đang chạy máy ảo của bạn trên một hệ thống máy chủ Windows, bạn có thể cần để chạy các lệnh npm install với --no- bin-link:

npm install --no-bin-link

Running Elixir

Elixir được xây dựng trên đầu của Gulp, do đó, để chạy các Elixir của bạn, bạn chỉ cần chạy lệnh gulp trong terminal của bạn. Thêm --production vào lệnh sẽ chỉ dẫn Elixir để rút gọn CSS và các tập tin JavaScript của bạn:

// Run all tasks...
gulp

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

Vì nó là bất tiện để chạy các lệnh gulp trên terminal của bạn sau mỗi lần thay đổi về tài nguyên của bạn, bạn có thể sử dụng lệnh gulp watch. Lệnh này sẽ tiếp tục chạy trong terminal của bạn và xem tài nguyên của mình cho bất kỳ thay đổi. Khi thay đổi xảy ra, tập tin mới sẽ tự động được biên dịch:

gulp watch

Nguồn: Laravel Elixir