Laravel: Biên dịch các asset (Compiling Assets)

Khóa học qua video:

Laravel Mix , một gói được phát triển bởi Jeffrey Way, người tạo ra Laracasts , cung cấp một API thông thạo để xác định các bước xây dựng webpack cho ứng dụng Laravel của bạn bằng cách sử dụng một số bộ xử lý trước CSS và JavaScript phổ biến.

Nói cách khác, Mix giúp bạn dễ dàng biên dịch và rút gọn các tệp CSS và JavaScript của ứng dụng. Thông qua chuỗi phương pháp đơn giản, bạn có thể xác định thành thạo đường dẫn tài sản của mình. Ví dụ:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

Nếu bạn đã từng bối rối và choáng ngợp về việc bắt đầu với webpack và biên dịch tài sản, bạn sẽ thích Laravel Mix. Tuy nhiên, bạn không bắt buộc phải sử dụng nó trong khi phát triển ứng dụng của mình; bạn có thể tự do sử dụng bất kỳ công cụ phân bổ tài sản nào mà bạn muốn, hoặc thậm chí không có công cụ nào cả.

Nếu bạn cần bắt đầu xây dựng ứng dụng của mình với CSS Laravel và Tailwind , hãy xem một trong các bộ công cụ khởi động ứng dụng của chúng tôi .

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

Cài đặt Node

Trước khi chạy Mix, trước tiên bạn phải đảm bảo rằng Node.js và NPM đã được cài đặt trên máy của bạn:

node -v
npm -v

Bạn có thể dễ dàng cài đặt phiên bản mới nhất của Node và NPM bằng các trình cài đặt đồ họa đơn giản từ trang web chính thức của Node . Hoặc, nếu bạn đang sử dụng Laravel Sail , bạn có thể gọi Node và NPM thông qua Sail:

./sail node -v
./sail npm -v

Cài đặt Laravel Mix

Bước còn lại duy nhất là cài đặt Laravel Mix. Trong một cài đặt mới của Laravel, bạn sẽ tìm thấy một package.jsontệp trong thư mục gốc của cấu trúc thư mục của bạn. Tệp mặc định package.jsonđã bao gồm mọi thứ bạn cần để bắt đầu sử dụng Laravel Mix. Hãy coi tệp này giống như tệp của bạn composer.json, ngoại trừ nó định nghĩa các phần phụ thuộc Node thay vì các phần phụ thuộc PHP. Bạn có thể cài đặt các phụ thuộc mà nó tham chiếu bằng cách chạy:

npm install

Running Mix

Mix là một lớp cấu hình nằm trên webpack , vì vậy để chạy các tác vụ Mix, bạn chỉ cần thực thi một trong các tập lệnh NPM có trong package.jsontệp Laravel mặc định . Khi bạn chạy devhoặc productiontập lệnh, tất cả nội dung CSS và JavaScript của ứng dụng sẽ được biên dịch và đặt trong thư mục ứng dụng của bạn public:

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run prod

Xem tài sản để thay đổi

Các npm run watchlệnh sẽ tiếp tục chạy trong terminal của bạn và xem tất cả CSS có liên quan và các tập tin JavaScript cho thay đổi. Webpack sẽ tự động biên dịch lại nội dung của bạn khi phát hiện thay đổi đối với một trong các tệp sau:

npm run watch

Webpack có thể không phát hiện được các thay đổi tệp của bạn trong một số môi trường phát triển cục bộ. Nếu đây là trường hợp trên hệ thống của bạn, hãy xem xét sử dụng watch-polllệnh:

npm run watch-poll

Làm việc với biểu định kiểu

Tệp ứng dụng của webpack.mix.jsbạn là điểm nhập của bạn để tổng hợp tất cả nội dung. Hãy coi nó như một trình bao bọc cấu hình nhẹ xung quanh webpack . Các nhiệm vụ kết hợp có thể được xâu chuỗi với nhau để xác định chính xác cách tài sản của bạn nên được biên dịch.

CSS Tailwind

Tailwind CSS là một khung công tác hiện đại, tiện ích nhất để xây dựng các trang web tuyệt vời mà không cần rời khỏi HTML của bạn. Hãy cùng tìm hiểu cách bắt đầu sử dụng nó trong một dự án Laravel với Laravel Mix. Trước tiên, chúng ta nên cài đặt Tailwind bằng NPM và tạo tệp cấu hình Tailwind:

npm install

npm install -D tailwindcss

npx tailwindcss init

Các initlệnh sẽ tạo ra một tailwind.config.jstập tin. Trong tệp này, bạn có thể định cấu hình đường dẫn đến tất cả các mẫu và JavaScript của ứng dụng để Tailwind có thể cải tiến các kiểu không sử dụng khi tối ưu hóa CSS của bạn cho sản xuất:

purge: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
],

Tiếp theo, bạn nên thêm từng "lớp" của Tailwind vào resources/css/app.csstệp ứng dụng của mình :

@tailwind base;
@tailwind components;
@tailwind utilities;

Khi bạn đã định cấu hình các lớp của Tailwind, bạn đã sẵn sàng cập nhật webpack.mix.jstệp ứng dụng của mình để biên dịch CSS hỗ trợ Tailwind:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

Cuối cùng, bạn nên tham chiếu biểu định kiểu của mình trong mẫu bố cục chính của ứng dụng. Nhiều ứng dụng chọn lưu trữ mẫu này tại resources/views/layouts/app.blade.php. Ngoài ra, hãy đảm bảo bạn thêm metathẻ chế độ xem đáp ứng nếu thẻ này chưa có:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet">
</head>

PostCSS

PostCSS , một công cụ mạnh mẽ để chuyển đổi CSS của bạn, được bao gồm trong Laravel Mix. Theo mặc định, Mix sử dụng plugin Autoprefixer phổ biến để tự động áp dụng tất cả các tiền tố nhà cung cấp CSS3 cần thiết. Tuy nhiên, bạn có thể tự do thêm bất kỳ plugin bổ sung nào phù hợp với ứng dụng của mình.

Đầu tiên, hãy cài đặt plugin mong muốn thông qua NPM và đưa nó vào mảng plugin của bạn khi gọi postCssphương thức của Mix . Các postCssphương pháp chấp nhận đường dẫn đến file CSS của bạn như là đối số đầu tiên của nó và thư mục chứa tập tin biên soạn nên được đặt như là đối số thứ hai của nó:

mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-custom-properties')
]);

Hoặc, bạn có thể thực thi postCssmà không cần bổ sung plugin nào để đạt được quá trình biên dịch và rút gọn CSS đơn giản:

mix.postCss('resources/css/app.css', 'public/css');

Sass

Các sassphương pháp cho phép bạn biên dịch Sass vào CSS có thể được hiểu bởi các trình duyệt web. Các sassphương pháp chấp nhận đường dẫn đến tập tin Sass của bạn như là đối số đầu tiên của nó và thư mục chứa tập tin biên soạn nên được đặt như là đối số thứ hai của nó:

mix.sass('resources/sass/app.scss', 'public/css');

Bạn có thể biên dịch nhiều tệp Sass thành các tệp CSS tương ứng của riêng chúng và thậm chí tùy chỉnh thư mục đầu ra của CSS kết quả bằng cách gọi sassphương thức nhiều lần:

mix.sass('resources/sass/app.sass', 'public/css')
    .sass('resources/sass/admin.sass', 'public/css/admin');

Xử lý URL

Vì Laravel Mix được xây dựng trên nền webpack nên điều quan trọng là bạn phải hiểu một vài khái niệm về webpack. Để biên dịch CSS, webpack sẽ viết lại và tối ưu hóa bất kỳ url()lệnh gọi nào trong bảng định kiểu của bạn. Mặc dù điều này ban đầu nghe có vẻ lạ, nhưng đó là một phần chức năng cực kỳ mạnh mẽ. Hãy tưởng tượng rằng chúng ta muốn biên dịch Sass bao gồm một URL tương đối với một hình ảnh:

.example {
    background: url('../images/example.png');
}

Các đường dẫn tuyệt đối cho bất kỳ đường dẫn nhất định nào url()sẽ bị loại trừ khỏi việc ghi lại URL. Ví dụ, url('/images/thing.png')hoặc url('http://example.com/images/thing.png')sẽ không được sửa đổi.

Theo mặc định, Laravel Mix và webpack sẽ tìm example.png, sao chép nó vào public/imagesthư mục của bạn , sau đó viết lại url()trong biểu định kiểu đã tạo của bạn. Như vậy, CSS đã biên dịch của bạn sẽ là:

.example {
    background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

Tính năng này hữu ích đến mức có thể, cấu trúc thư mục hiện tại của bạn có thể đã được định cấu hình theo cách bạn muốn. Nếu đúng như vậy, bạn có thể tắt tính năng url()viết lại như sau:

mix.sass('resources/sass/app.scss', 'public/css').options({
    processCssUrls: false
});

Với việc bổ sung này vào webpack.mix.jstệp của bạn , Mix sẽ không còn đối sánh bất kỳ url()hoặc sao chép nội dung nào vào thư mục công cộng của bạn. Nói cách khác, CSS đã biên dịch sẽ giống như cách bạn nhập nó ban đầu:

.example {
    background: url("../images/thing.png");
}

Bản đồ nguồn

Mặc dù bị tắt theo mặc định, bản đồ nguồn có thể được kích hoạt bằng cách gọi mix.sourceMaps()phương thức trong webpack.mix.jstệp của bạn . Mặc dù nó đi kèm với chi phí biên dịch / hiệu suất, điều này sẽ cung cấp thêm thông tin gỡ lỗi cho các công cụ dành cho nhà phát triển của trình duyệt khi sử dụng nội dung đã biên dịch:

mix.js('resources/js/app.js', 'public/js')
    .sourceMaps();

Phong cách lập bản đồ nguồn

Webpack cung cấp nhiều kiểu ánh xạ nguồn khác nhau . Theo mặc định, kiểu ánh xạ nguồn của Mix được đặt thành eval-source-map, điều này cung cấp thời gian xây dựng lại nhanh chóng. Nếu bạn muốn thay đổi kiểu ánh xạ, bạn có thể làm như vậy bằng sourceMapsphương pháp:

let productionSourceMaps = false;

mix.js('resources/js/app.js', 'public/js')
    .sourceMaps(productionSourceMaps, 'source-map');

Làm việc với JavaScript

Mix cung cấp một số tính năng để giúp bạn làm việc với các tệp JavaScript của mình, chẳng hạn như biên dịch ECMAScript hiện đại, gói mô-đun, rút gọn và nối các tệp JavaScript thuần túy. Thậm chí tốt hơn, tất cả điều này hoạt động liền mạch mà không yêu cầu một chút cấu hình tùy chỉnh:

mix.js('resources/js/app.js', 'public/js');

Với một dòng mã này, bây giờ bạn có thể tận dụng lợi thế của:

Cú pháp EcmaScript mới nhất.
Mô-đun
Giảm thiểu cho môi trường sản xuất.

Vue

Mix sẽ tự động cài đặt các plugin Babel cần thiết để hỗ trợ biên dịch thành phần một tệp Vue khi sử dụng vuephương pháp này. Không cần cấu hình thêm:

mix.js('resources/js/app.js', 'public/js')
   .vue();

Khi JavaScript của bạn đã được biên dịch, bạn có thể tham chiếu nó trong ứng dụng của mình:

<head>
    <!-- ... -->

    <script src="/js/app.js"></script>
</head>

Phản ứng

Mix có thể tự động cài đặt các plugin Babel cần thiết để hỗ trợ React. Để bắt đầu, hãy thêm một lệnh gọi vào reactphương thức:

mix.js('resources/js/app.jsx', 'public/js')
   .react();

Phía sau, Mix sẽ tải xuống và bao gồm babel-preset-reactplugin Babel thích hợp . Khi JavaScript của bạn đã được biên dịch, bạn có thể tham chiếu nó trong ứng dụng của mình:

<head>
    <!-- ... -->

    <script src="/js/app.js"></script>
</head>

Khai thác nhà cung cấp

Một nhược điểm tiềm ẩn của việc gộp tất cả JavaScript dành riêng cho ứng dụng của bạn với các thư viện của nhà cung cấp như React và Vue là nó làm cho bộ nhớ đệm dài hạn trở nên khó khăn hơn. Ví dụ: một bản cập nhật cho mã ứng dụng của bạn sẽ buộc trình duyệt tải xuống lại tất cả các thư viện của nhà cung cấp của bạn ngay cả khi chúng không thay đổi.

Nếu bạn có ý định cập nhật thường xuyên JavaScript của ứng dụng của mình, bạn nên xem xét trích xuất tất cả các thư viện của nhà cung cấp thành tệp riêng của họ. Bằng cách này, một thay đổi đối với mã ứng dụng của bạn sẽ không ảnh hưởng đến bộ nhớ đệm của vendor.jstệp lớn của bạn . extractPhương pháp của Mix làm cho điều này trở nên dễ dàng:

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])

Các extractphương pháp chấp nhận một mảng của tất cả các thư viện hoặc mô-đun mà bạn muốn trích xuất vào một vendor.jstập tin. Sử dụng đoạn mã ở trên làm ví dụ, Mix sẽ tạo các tệp sau:

public/js/manifest.js: Thời gian chạy tệp kê khai Webpack
public/js/vendor.js: Thư viện nhà cung cấp của bạn
public/js/app.js: Mã ứng dụng của bạn

Để tránh lỗi JavaScript, hãy đảm bảo tải các tệp này theo thứ tự thích hợp:

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

Cấu hình Webpack tùy chỉnh

Đôi khi, bạn có thể cần phải sửa đổi cấu hình Webpack bên dưới theo cách thủ công. Ví dụ: bạn có thể có một trình tải hoặc plugin đặc biệt cần được tham chiếu.

Mix cung cấp một webpackConfigphương pháp hữu ích cho phép bạn hợp nhất bất kỳ ghi đè cấu hình Webpack ngắn nào. Điều này đặc biệt hấp dẫn, vì nó không yêu cầu bạn sao chép và duy trì bản sao webpack.config.jstệp của riêng bạn . Các webpackConfigphương pháp chấp nhận một đối tượng, mà nên chứa bất kỳ cấu hình Webpack cụ thể mà bạn muốn áp dụng.

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

Phiên bản / chặn bộ nhớ cache

Nhiều nhà phát triển gắn các nội dung đã biên dịch của họ bằng dấu thời gian hoặc mã thông báo duy nhất để buộc các trình duyệt tải nội dung mới thay vì cung cấp các bản sao cũ của mã. Mix có thể tự động xử lý điều này cho bạn bằng cách sử dụng versionphương pháp này.

Các versionphương pháp sẽ nối thêm một băm duy nhất cho các tên tập tin của tất cả các tập tin biên dịch, cho phép Busting bộ nhớ cache thuận tiện hơn:

mix.js('resources/js/app.js', 'public/js')
    .version();

Sau khi tạo tệp được phiên bản, bạn sẽ không biết tên tệp chính xác. Vì vậy, bạn nên sử dụng mixchức năng toàn cục của Laravel trong chế độ xem của mình để tải nội dung được băm thích hợp. Các mixchức năng sẽ tự động xác định tên hiện tại của tập tin băm:

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

Vì các tệp được tạo phiên bản thường không cần thiết trong quá trình phát triển, bạn có thể hướng dẫn quy trình tạo phiên bản chỉ chạy trong thời gian npm run prod:

mix.js('resources/js/app.js', 'public/js');

if (mix.inProduction()) {
    mix.version();
}

URL cơ sở kết hợp tùy chỉnh

Nếu phần tử đã biên dịch Mix của bạn được triển khai cho một CDN tách biệt với ứng dụng của bạn, bạn sẽ cần thay đổi URL cơ sở được tạo bởi mixhàm. Bạn có thể làm như vậy bằng cách thêm mix_urltùy chọn config/app.phpcấu hình vào tệp cấu hình của ứng dụng :

'mix_url' => env('MIX_ASSET_URL', null)

Sau khi định cấu hình URL kết hợp, mixHàm sẽ đặt tiền tố cho URL đã định cấu hình khi tạo URL cho nội dung:

https://cdn.example.com/js/app.js?id=1964becbdd96414518cd

Tải lại trình duyệt đồng bộ hóa

BrowserSync có thể tự động theo dõi các tệp của bạn để tìm các thay đổi và đưa các thay đổi của bạn vào trình duyệt mà không yêu cầu làm mới thủ công. Bạn có thể kích hoạt hỗ trợ cho việc này bằng cách gọi mix.browserSync()phương thức:

mix.browserSync('laravel.test');

Tùy chọn BrowserSync có thể được chỉ định bằng cách chuyển một đối tượng JavaScript vào browserSyncphương thức:

mix.browserSync({
    proxy: 'laravel.test'
});

Tiếp theo, khởi động máy chủ phát triển của webpack bằng npm run watchlệnh. Bây giờ, khi bạn sửa đổi tập lệnh hoặc tệp PHP, bạn có thể xem khi trình duyệt làm mới trang ngay lập tức để phản ánh các thay đổi của bạn.

Các biến môi trường

Bạn có thể đưa các biến môi trường vào webpack.mix.jstập lệnh của mình bằng cách thêm tiền tố vào một trong các biến môi trường trong .envtệp của mình bằng MIX_:

MIX_SENTRY_DSN_PUBLIC=http://example.com

Sau khi biến đã được xác định trong .envtệp của bạn , bạn có thể truy cập nó thông qua process.envđối tượng. Tuy nhiên, bạn sẽ cần phải khởi động lại tác vụ nếu giá trị của biến môi trường thay đổi trong khi tác vụ đang chạy:

process.env.MIX_SENTRY_DSN_PUBLIC

Thông báo

Khi có sẵn, Mix sẽ tự động hiển thị thông báo của hệ điều hành khi biên dịch, cung cấp cho bạn phản hồi tức thì về việc biên dịch có thành công hay không. Tuy nhiên, có thể có những trường hợp bạn muốn tắt các thông báo này. Một ví dụ như vậy có thể đang kích hoạt Mix trên máy chủ sản xuất của bạn. Thông báo có thể bị vô hiệu hóa bằng cách sử dụng disableNotificationsphương pháp:

mix.disableNotifications();

» Tiếp: Hàng đợi (Queues)

« Trước: Mail

Khóa học qua video:

Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript

Đăng ký Hội viên

Tất cả các video dành cho hội viên