Compiling Assets (Laravel Elixir)

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 cho các ứng dụng Laravel. Elixir cung cấp một số pre-processor phổ biến cho CSS và Javascript SassWebpack. 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')
       .webpack('app.js');
});

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ả.

Cài đặt & Thiết lập

Cài đặt Node

Trước khi dùng Elixir, bạn phải cài Node.js và NPM vào máy tính của bạn.

node -v
npm -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áchtheir download page.

Gulp

Sau đó, bạn sẽ cần cài đặt Gulp như là NPM package:

npm install --global gulp-cli

Laravel Elixir

Việc còn lại là chỉ cần cài Laravel Elixir. Bên trong project Laravel, bạn sẽ thấy một file package.json trong thư mục gốc. Mặc định, file package.json chứa Elixir và the Webpack JavaScript module bundler. Bạn hãy nghĩ nó giống như file composer.json,chỉ khác là nó định nghĩa cho Node dependencies thay vì PHP. Bạn có thể dependencies bằng lệnh:

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ể chạy lệnh npm install với thông số --no-bin-links:

npm install --no-bin-links

Chạy Elixir

Elixir 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 gulp trong 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

Sau khi chạy lệnh này, chúng ta sẽ thấy một bảng hiển thị tóm tắt vể những thay đổi ở trên terminal.

Xem thay đổi của asset

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ỳ asset trong lệnh watch:

gulp watch

Làm việc với Stylesheets

The gulpfile.js file in your project's root directory contains all of your Elixir tasks. Elixir tasks can be chained together to define exactly how your assets should be compiled.

Less

Phương thức less có thể sử dụng để biên dịch Less thành CSS. Phương thức less lấy các file trong thư mục resources/assets/less. Mặc định, task sẽ được biên dịch thành CSS trong ví dụ này ở trong thư mục public/css/app.css:

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

Bạn cũng có thể biên dịch nhiều file Less thành một file CSS. Một lần nữa, file CSS sẽ được lưu ở thư mục public/css/app.css:

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

Bạn có thể tùy biến vị trí thư mục file CSS, bằng cách truyền thêm tham số thứ hai vào phương thức 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

Phương thức sass cho phép bạn biên dịch Sass thành CSS. Giả sử file Sass lưu ở thư mục resources/assets/sass, bạn có thể sử dụng phương thức như sau:

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

Một lần nữa, giống như phương thức less, bạn có thể biên dịch nhiều file Sass thành một file CSS, và tùy biến thư mục của file biên dịch CSS:

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

Tùy biến đường dẫn

Bạn nên sử dụng thư mục mặc định của Laravel. Tuy nhiên, nếu bạn muốn một thư mục khác, bạn có thể bắt đầu ở bất cứ đâu với ./. khi đó Elixir sẽ bắt đầu ở thư mục gốc, thay vì sử dụng ở thư mục mặc định.

Ví dụ, để biên dịch một file ở thư mục app/assets/sass/app.scss và kết quả ở thư mục public/css/app.css, bạn có thể làm nó bằng lệnh sass như sau:

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

Stylus

Phương thức stylus có thể sử dụng để biên dịch Stylus thành CSS. Giả sử file Stylus lưu tại resources/assets/stylus, bạn có thể sử dụng nó như sau:

elixir(function(mix) {
    mix.stylus('app.styl');
});

Cách thức hoạt động của mix.less()mix.sass() đều giống nhau.

Plain CSS

Nếu bạn muốn biên dịch một số file plain CSS stylesheets thành một file, bạn có thể sử dụng phương thức 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/css và file cuối cùng CSS sẽ lưu tại public/css/all.css:

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

Ngoài ra, Elixir cho phép bạn thay đổi thư mục file kết quả 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/site.css');
});

Source Maps

Trong Elixir, source maps đã được kích hoạt và cung cấp một số thông tin debug cho các cho bạn khi sử dụng để biên dịch assets. Đối với mỗi file được biên dịch, bạn sẽ tìm thấy một file *.css.map or *.js.map trong cùng thư mục.

Nếu bạn không muốn sinh ra source maps trong ứng dụng của bạn, có thể bỏ chúng đi bằng cách cấu hình của Elixirsourcemaps:

elixir.config.sourcemaps = false;

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

Làm việc với Scripts

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.

Khi viết ES2015 với modules, bạn có thể chọn WebpackRollup. Nếu đấy là những tool bạn chưa dùng bao giờ, đừng lo lắng, 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.

Webpack

Phương thức webpack có thể sử dụng để biên dịch và bundle ECMAScript 2015 thành plain JavaScript. Hàm này cho phép một đường dẫn tương đối với thư mục resources/assets/js và tạo ra một file bundled trong thư mục public/js:

elixir(function(mix) {
    mix.webpack('app.js');
});

Để chọn một thư mục output khác hoặc thư mục base, đơn giản là chỉ việc thêm . vào trường đường dẫn. Khi đó bạn có thể xác định đường dẫn tương đối với thư mục gốc. Ví dụ, để biên dịch app/assets/js/app.js thành public/dist/app.js:

elixir(function(mix) {
    mix.webpack(
        './app/assets/js/app.js',
        './public/dist'
    );
});

Nếu bạn muốn tận dụng những tính năng khác của Webpack, Elixir sẽ đọc bất kỳ file webpack.config.js ở trong thư mục gốc và factor its configuration thành build process.

Rollup

Giống như Webpack, Rollup là thế hệ tiếp theo để bundler với ES2015. Hàm này truyền vào một mảng các đường dẫn file tương đối với resources/assets/js, và tạo ra một file ở public/js directory:

elixir(function(mix) {
    mix.rollup('app.js');
});

Như phương thức webpack, bạn có thể tùy chỉnh đường dẫn input và output cùa file bằng phương thức rollup:

elixir(function(mix) {
    mix.rollup(
        './resources/assets/js/app.js',
        './public/dist'
    );
});

Scripts

Nếu bạn có nhiều file JavaScript mà bạn muốn biên dịch thành một file, bạn có thể sử dụng phương thức scripts, nó tự động cung cấp source maps, kết nối, và nén.

Phương thức scripts sẽ coi tất cả các đường dẫn tương đối so với thư mục resources/assets/js, và kết quả JavaScript sẽ nằm ở thư mục public/js/all.js:

elixir(function(mix) {
    mix.scripts([
        'order.js',
        'forum.js'
    ]);
});

Nếu bạn cần kết nối nhiều file scripts thành những file khác nhau, bạn có thể gọi nhiều phương thức scripts. Tham số thứ hai của phương thức định nghĩa kết quả của tên file tương ứng với mỗi lần kết nối:

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 cần biên dịch tất cả scripts trong một thư mục, bạn có thể sử dụng phương thức scriptsIn. Kết quả JavaScript được thay thế trong public/js/all.js:

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

Nếu bạn có ý định két nôi nhiều thư viện pre-minified vendor, như jQuery, cân nhăc việc sử dụng mix.combine(). Nó sẽ biên dịch các file , nó sẽ bỏ qua việc những bước source map và nén. như vậy, thời gian biên dịch sẽ được cải thiện.

Copying Files & Directories

Phương thức copy được dùng để copy files và thư mục tới các vị trí mới. Tất cả đều ở vị trí relative tới thư mục gốc của project:

elixir(function(mix) {
    mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});

Versioning / Cache Busting

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ũ. Elixir có thể xử lý điều đó giúp bạn bằng phương thức version.

Phương thức version sẽ truyền vào một đường dẫn tương đối với thư mục public, và sẽ thêm một unique hash cho tên filename, cho phép cache-busting. Ví dụ, tên file được sinh sẽ nhìn giống như: all-16d570a7.css:

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

Sau khi sinh ra version file, bạn có thể sử dụng phương thức global elixir của Laravel trong views để tải hashed asset. Phương thức elixir sẽ tự động định nghĩa tên hiện tại của hashed file:

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

Đánh version cho nhiều file

Bạn có thể truyền vào một mảng file của phương thức version sinh ra version cho nhiều file:

elixir(function(mix) {
    mix.version(['css/all.css', 'js/app.js']);
});

Khi các version file đã được tạo ra, bạn có thể sử dụng phương thứcelixir để tạo link đến hashed file. Nhớ rằng, bạn chỉ cần truyền tên file un-hashed vào phương thức elixir. Hàm đó sẽ tự động un-hashed tên và xác định hashed version hiện tại của file:

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

<script src="{{ elixir('js/app.js') }}"></script>

BrowserSync

BrowserSync tự động refreshes lại trình duyệt sau khi bạn thay đổi file assets. Phương thức browserSynctruyền vào một JavaScript object với một thuộc tính proxy chứa URL ứng dụng. Sau đó, khi bạn chạy gulp watch bạn có thể truy cập ứng dụng web sử dụng cổng 3000 (http://project.dev:3000) để trình duyệt syncing:

elixir(function(mix) {
    mix.browserSync({
        proxy: 'project.dev'
    });
});
Nguồn: https://laravel.com/docs/5.3/elixir