Laravel Elixir và sử dụng bower (Phần cuối: Làm việc với Scripts)
This post hasn't been updated for 7 years
Làm việc với Scripts
Elixir cung cấp một vài tính năng làm việc với các file JavaScript, như biên dịch ECMAScript, 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 Webpack và Rollup. 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
sử dụng 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 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 đầu ra 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à xử lý chúng.
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 ở thư mục public/js
:
elixir(function(mix) {
mix.rollup('app.js');
});
Như phương thức webpack
, bạn có thể tùy chỉnh đường dẫn đầu vào và đầu ra 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:
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ể sử dụng phương thức scriptsIn
. 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');
});
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í tương đối 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ức elixir
để 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 browserSync
truyề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: Laravel Working With Scripts
All Rights Reserved