Laravel Elixir và sử dụng bower (Phần cuối: Làm việc với Scripts)

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