HomeOur Team
Laravel Mix
Solutions
Laravel Mix
chung.nguyen1
chung.nguyen1
September 18, 2020
2 min

Giới thiệu

Laravel Mix được dùng để gói (bundle) các file SCSS, CSS và Javascript thành 1 file .css.js duy nhất để giảm số lượng tài nguyên cần tải cho trang web từ đó nâng cao hiệu suất của website.

Cài đặt

Cài đặt Node

Trước khi sử dụng Laravel Mix chúng ta phải cài đặt Node.js và NPM tại trang chủ của Nodejs

Cài đặt Laravel Mix

Các bước còn lại để cài đặt Laravel Mix là cài đặt các phụ thuộc (dependencies) sử dụng trong dự án tại file package.json ở thư mục gốc. Để cài đặt chúng ta cần chạy lệnh:

npm install

Chạy Laravel Mix

Để chạy Mix tasks chúng ta cần thực hiện một trong những câu lệnh mặc định ở file package.json

// Chạy tất cả các Mix tasks
npm run dev

// Chạy tất cả các Mix tasks và minify các file output
npm run production

Lắng nghe sự thay đổi của file

Để tự động biên dịch lại các file css, js mỗi lần chúng ta thay đổi file thì chúng ta sử dụng câu lệnh

npm run watch

Làm việc với Stylesheets

webpack.mix.js là file tổng hợp tất cả các nội dung cần biên dịch của dự án

Less

Phương thức less dùng để biên dịch Less thành CSS. Để biên dịch file app.less thành file app.css ta dùng config

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

Để biên dịch nhiều file less cùng 1 lúc thì chúng ta có thể sử dụng phương thức less nhiều lần

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

Nếu chúng ta muốn thay đổi tên file css, chúng ta có thể truyền đường dẫn đầy đủ vào tham số thứ 2 của phương thức less

mix.less('resources/less/app.less', 'public/stylesheets/styles.css');

Sass

Phương thức sass dùng để biên dịch Sass thành CSS. Để biên dịch file app.sass thành file app.css ta dùng config

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

Để biên dịch nhiều file sass cùng 1 lúc thì chúng ta có thể sử dụng phương thức sass nhiều lần

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

PostCSS

PostCSS là một công cụ để thêm các tiền tố như -webkit, -ms, -moz để css tương thích các thuộc tính CSS3 trên các trình duyệt cũ. Cách sử dụng

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-css-variables')()
        ]
    });

Styles

Khi bạn muốn gộp nhiều file css thành 1 file css duy nhất. Bạn có thể sử dụng phương thức styles

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

Xử lý URL

Laravel Mix được xây dựng dựa trên Webpack nên có 1 vài khái niệm quan trọng cần biết. Khi biên dịch CSS, Webpack sẽ viết lại (rewrite) và tối ưu (optimize) bất cứ url() được gọi bên trong các file css

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

Mặc định, Laravel Mix và Webpack sẽ tìm example.png, copy nó tới thư mục public/images, và sau đó viết lại url() bên trong file stylesheet

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

Để disable tính năng viết lại url() thì bạn có thể config

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

Với config bên trên, Mix sẽ không copy file assets tới thư mục public. Và khi biên dịch CSS vẫn sẽ giữ nguyên cú pháp

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

Source Maps

Mặc định trạng thái của source maps là disabled, source maps có thể được active bằng cách gọi phương thức mix.sourceMaps() trong webpack.mix.js file. Tuy nhiên điều này sẽ làm giảm hiệu suất khi biên dịch nhưng sẽ giúp chúng ta có thêm thông tin khi debug trên môi trường production

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

Làm việc với Javascript

Mix cung cấp 1 vài tính năng để giúp bạn làm việc với các file Javascript như là biên dịch ECMAScript 2015, module bundling, minification và gộp các file Javascript với nhau

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

Với đoạn code bên trên, Webpack sẽ thực hiện các tính năng

  • ES2015 syntax.
  • Modules
  • Biên dịch file .vue.
  • Minification các file js trên môi trường production

Vanilla JS

Tương tự như khi gộp các file stylesheet với mix.styles() bạn cũng có thể gộp các file javascript khi sử dụng phương thức scripts()

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

Ngoài phương thức scripts(), ta còn phương thức babel(). Về cách sử dụng thì phương thức babel() giống với phương thức scripts(). Tuy nhiên phương thức babel() sẽ biên dịch mã ES2015 sang mã javascript thuần để trình duyệt cũ hiểu được

Copy file và thư mục

Phương thức copy được sử dụng để copy file và thư mục tới 1 địa chỉ mới. Điều này đặc biệt hữu ích khi copy các file asset bên trong thư mục node_modules tới thư mục public

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

Khi copy thư mục, phương thức copy sẽ làm phẳng cấu trúc thư mục. Để khắc phục điều này, chúng ta nên sử dụng phương thức copyDirectory

mix.copyDirectory('resources/img', 'public/img');

Tags

#laravel#php#092020
chung.nguyen1

chung.nguyen1

Developer

Related Posts

Realtime Chat App Using Laravel & Pusher
Realtime Chat App Using Laravel & Pusher
October 26, 2020
4 min
Sự khác biệt giữa Data Analyst, Data Engineer và Data Scientist
Others
Sự khác biệt giữa Data Analyst, Data Engineer và Data Scientist
September 28, 2020
1 min
Imperative và Declarative trong Swift
Articles
Imperative và Declarative trong Swift
September 28, 2020
2 min
iOS 14 SDK có gì mới
News
iOS 14 SDK có gì mới
September 25, 2020
5 min
© 2021, All Rights Reserved.

Quick Links

HomeOur Team

Social Media