Tìm hiểu về Elixir trong Laravel

1. Giới thiệu

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 task cho ứng dụng Laravel. Elixir cung cấp một số pre-processor phổ biến cho CSS và Javascript, cùng một số công cụ testing. Sử dụng móc nối hàm, Elixir cho phép bạn tạo các asset pipeline một cách liền mạch. Ví dụ:

elixir(function(mix) {
    mix.sass('app.scss')
        .browserify('app.js', 'public/js/app.js');
    mix.copy('./node_modules/font-awesome/fonts', 'public/fonts');
});

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. Tuy nhiên, bạn không cần thiết phải sử dụng nó khi phát triển ứng dụng. Bạn hoàn toàn thoải mái chọn lựa công cụ đóng gói asset nào bạn muốn, hoặc thậm chi không dùng gì cả.

2. Cài đặt

• Trước khi dùng Elixir, bạn phải đảm báo có NodeJS được cài trên máy của bạn. Kiểm tra :

node -v 

Mặc định, Laravel Homestead đã có sẵn tất cả mọi thứ; tuy nhiên, nếu bạn không sử dụng Vagrant, thì bạn có thể dễ dàng cài Node bằng cách download NodeJS tại trang chủ.

• Sau đó bạn cần cài đặt Gulp vào thư viện global :

npm install --global gulp

Nếu bạn sử dụng một hệ thống quản lý version, bạn có thể muốn chạy npm shrinkwrap để khoá các yêu cầu về npm:

npm shrinkwrap

Khi đã chạy lệnh này, bạn có thể thoải mái commit file npm-shrinkwrap.json lên source control.

• Tiếp tục , việc còn lại của chúng ta là cài đặt Elixir : Đi cùng với bản cài mới đầy đủ của Laravel, bạn sẽ thấy một file package.json tại thư mục gốc. Hãy nghĩ đó tương tự file composer.json, chỉ khác là nó khai báo các dependency cho Node. Bạn có thể tiến hành cài đặt các dependency bằng cách chạy lệnh sau:

npm install

Nếu bạn đang phát triển trên hệ điều hành Windows hay bạn đang trong VM trên host là Windows, bạn có thể cần chạy lệnh npm install với thông số --no-bin-links:

npm install --no-bin-links

• Chạy Elixir

Elixir được xây dựng dựa trên Gulp, vì thế, để chạy các Elixir task, bạn chỉ cần chạy lệnh gulp trên terminal. Thêm vào cờ --production vào câu lệnh để yêu cầu Elixir thực hiện minify CSS và Javascript:

// Run all tasks...
gulp

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

• Theo dõi sự thay đổi của asset Sẽ khá là bất tiện khi phải chạy lệnh gulp mỗi khi có sự thay đổi về assets, bạn có thể dùng gulp watch. Câu lệnh này sẽ tiếp tục chạy trên terminal và theo dõi sự thay đổi của asset, nếu phát hiện có sự thay đổi, hay file mới, thì asset sẽ lập tức được đóng gói lại:

gulp watch

3. Làm việc với Stylesheets

• Less: Để đóng gói Less thành CSS, bạn có thể sử dụng hàm less. Hàm này lấy các file Less trong thư mục resources/assets/less. Mặc định, task sẽ đặt các file CSS đã đóng gói vào trong public/css/app.css:

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

Bạn cũng có thể gộp các file Less thành một file CSS:

elixir(function(mix) {
    mix.less([
        'app.less',
        'controllers.less'
    ]);
});

Bạn có thể thay đổi vị trí file CSS cuối cùng, bằng cách truyền vào tham số thứ hai trong hàm less:

elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets');
});

// Specifying a specific output filename...
elixir(function(mix) {
    mix.less('app.less', 'public/stylesheets/style.css');
});

• Sass : Hàm sass cho phép bạn đóng gói Sass thành file CSS. Với các file Sass lưu trong resources/assets/sass, bạn có thể sử dụng như sau:

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

Tương tự với hàm less, bạn có thể đóng gói nhiều file Sass thành một file CSS duy nhất, và chọn vị trí lưu file:

elixir(function(mix) {
    mix.sass([
        'app.scss',
        'controllers.scss'
    ], 'public/assets/css');
});

• Plain CSS: Nếu bạn muốn gộp các file CSS thuần vào trong một file, bạn có thể sử dụng hàm styles. Các đường dẫn truyền vào trong hàm này là tương đối với thư mục resources/assets/cssvà file cuối cùng sẽ được lưu tại public/css/all.css:

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

Dĩ nhiên, bạn có thể thay đổi vị trí file kết quả vào một vị trí khác bằng cách truyền vào tham số thứ hai của hàm styles:

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

4 . Làm việc với Scripts

• CoffeeScript

Hàm coffee được dùng để đóng gói các file CoffeeScript thành file Javascript thuần. Hàm này nhận một chuỗi hay một mảng các file CoffeeScript tương đối trong thư mục resources/assets/coffeevà tạo ra file app.js trong thư mục public/js:

elixir(function(mix) {
    mix.coffee(['app.coffee', 'controllers.coffee']);
});

• Scripts

Nếu bạn có nhiều file Javascript mà bạn muốn đóng gói thành một file, bạn có thể sử dụng hàm scripts.

Hàm scripts sẽ lấy tất cả các file trong thư mục resources/assets/js và tạo ra file Javascript cuối dùng tại thư mục public/js/all.js:

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

Nếu bạn muốn tạo các tập hợp file scripts khác nhau, bạn có thể gọi nhiều hàm scripts.

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

Nếu bạn muốn gộp tất cả các scripts trong một thư mục, bạn có thể sử dụng hàm scriptsIn .File kết quả cuối cùng sẽ được đặt tại public/js.all.js

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

• Tạo Version/Hash cho 1 file:

elixir(function(mix) {
    mix.version("css/all.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") }}">

5. 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ả .Hi vọng bài viết này có thể giúp các bạn hiểu thêm về Elixir , chúc các bạn thành công :

• Bạn có thể tham khảo chi tiết hơn về Elixir : https://laravel.com/docs/5.2/elixir