Laravel 5 Elixir

Trong các tính năng mới của Laravel 5 thì với mình mình chú ý nhất đến Elixir. Việc tích hợp GULP vào core của Laravel 5 khiến cho việc thao tác với js, css dễ dàng và thuận tiện hơn rất nhiều.

Laravel Elixir cung cấp cách làm mới sáng sủa cùng với fluent API nhằm thực hiện các công việc cơ bản của GULP 1 cách đơn giản cho ứng dụng Laravel. Elixir hỗ trợ khá nhiều các trình dịch css và javascript thông dụng và cả các công cụ test nữa.

Cài đặt Node.js

Để cài đặt Elixir trước mắt bạn cần cài Node.js, cái này thì chắc là nhiều bạn biết rồi, nếu ko bạn lên trang web: https://nodejs.org/ tham khảo nhé, việc cài đặt rất dễ dàng.

Gulp

Tiếp theo bạn cần cài đặt gulp, có thể tham khảo ở trang chủ của gulp: http://gulpjs.com/, để đơn giản bạn mở node lên và chạy lệnh sau để cài đặt

npm install --global gulp

Laravel Elixir

Bước cuối cùng là cài đặt 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

Cách sử dụng

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

• Biên dịch file less

elixir(function(mix) {
    mix.less("app.less");
});

Trong ví dụ trên, Elixir sẽ biên dịch các file .less trong thư mục: resources/assets/less

• Dịch nhiều file less

elixir(function(mix) {
    mix.less([
        'app.less',
        'something-else.less'
    ]);
});

• Dịch file Sass

elixir(function(mix) {
    mix.sass("app.sass");
});

Trong ví dụ trên, Elixir sẽ biên dịch các file .less trong thư mục: resources/assets/sass . Mặc định thì Elixir sẽ dùng thư viện LibSass để dịch, nhưng nếu bạn muốn dùng gem của Ruby để dịch thì bạn chạy lệnh gem install sass sau đó cấu hình elixir như sau:

elixir(function(mix) {
    mix.rubySass("app.sass");
});

• Dịch bỏ qua source maps:

Để bỏ qua việc tạo ra các file source map, bạn chỉ việc thêm dòng elixir.config.sourcemaps = false; ở trước khi gọi các hàm của elixir.

• Dịch CoffeeScript

elixir(function(mix) {
    mix.coffee();
});

Trong ví dụ trên, Elixir sẽ biên dịch các file .less trong thư mục: resources/assets/coffee

• Dịch tất cả Less và CoffeeScript

elixir(function(mix) {
    mix.less()
       .coffee();
});

• Gọi PHPUnit Tests

elixir(function(mix) {
    mix.phpUnit();
});

• Gọi PHPSpec Tests

elixir(function(mix) {
    mix.phpSpec();
});

• Kết hợp các file Stylesheets

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ]);
});

Đường dẫn đến các file này là tương đối trong thư mục resources/assets/css

• Kết hợp các file Stylesheets và lưu vào thư mục khác

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ], 'public/build/css/everything.css');
});

• Kết hợp các file Stylesheets từ thư mục bất kỳ

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ], 'public/build/css/everything.css', 'public/css');
});

• Kết hợp tất cả các file Styles trong 1 thư mục

elixir(function(mix) {
    mix.stylesIn("public/css");
});

• Kết hợp các file Scripts

elixir(function(mix) {
    mix.scripts([
        "jquery.js",
        "app.js"
    ]);
});

Thư mục chứa các file trong ví dụ sẽ là resources/assets/js

• Kết hợp tất cả các file Scripts trong 1 thư mục

elixir(function(mix) {
    mix.scriptsIn("public/js/some/directory");
});

• Kết hợp nhiều tập hợp các file Scripts

elixir(function(mix) {
    mix.scripts(['jquery.js', 'main.js'], 'public/js/main.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

• Tạo Version/Hash cho 1 file

elixir(function(mix) {
    mix.version("css/all.css");
});

Kết quả sẽ gen ra file với định dạng kiểu như: all-16d570a7.css. Để tạo link đến file kiểu này thì bạn khai báo dùng helper elixir() của Laravel như sau:

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

• Xâu chuỗi các hành động:

Bạn có thể xâu chuỗi tất cả các hành động trong Elixir với nhau như sau:

elixir(function(mix) {
    mix.less("app.less")
       .coffee()
       .phpUnit()
       .version("css/bootstrap.css");
});

Gulp

Sau khi đã viết xong các task cho Elixir thì bạn chỉ việc dùng lệnh của Gulp để chạy và các task đã khai báo sẽ được thực thi

Thực thi tất cả các task trong 1 lần chạy

gulp

Theo dõi các assets khi có thay đổi thì tự động chạy lại task

gulp watch

Chỉ biên dịch các scripts

gulp scripts

Chỉ biên dịch các styles

gulp styles

Kết luận

Laravel Elixir là 1 công cụ rất hữu hiệu giúp bạn thao tác với css và javascript 1 cách đơn giản, hiệu quả. Chúc các bạn áp dụng vào dự án của mình thành công!