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

Làm việc với Stylesheets

File gulpfile.js trong thư mục gốc project của bạn chứa tất cả nhiệm vụ Elixir. Nhiệm vụ Elixir có thể được xích lại với nhau để xác định chính xác các tài nguyên của bạn sẽ được biên dịch như thế nào.

Less

Để biên dịch Less bên trong CSS, bạn có thể sử dụng phương thức less. Phương thức less giả định rằng file Less của bạn được lưu trữ trong resources/assets/less. Mặc định, nhiệm vụ sẽ đặt biên dịch CSS cho ví dụ này trong public/css/app.css:

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

Bạn có thể kết hợp nhiều file Less thành một file CSS đơn lẻ. Quay lại, kết quả CSS sẽ được đặt trong public/css/app.css:

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

Nếu bạn muốn chỉnh lại vị trí đầu ra của CSS được biên dịch, bạn có thể truyền tham số thứ 2 trong 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. File Sass của bạn được lưu trữ tại resources/assets/sass, bạn có thể sử dụng phương thức kiểu này:

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

Trở lại, giống phương thức less, bạn có thể biên dịch nhiều file Sass thành một file CSS đơn lẻ, và tùy chỉnh thư mục đầu ra của kết quả CSS:

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

Plain CSS

Nếu bạn chỉ muốn để kết hợp một vài plain CSS stylesheets thành một file đơn lẻ, bạn có thể sử dụng phương thức styles. Đường dẫn truyền vào phương thức là tương đối đến thư mục resources/assets/css và kết quả CSS sẽ được thay thế trong public/css/all.css:

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

Dĩ nhiên, bạn có thể cho file kết quả đến một vị trí tùy chỉnh bằng tham số tiếp theo trong phương thức styles;

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

Source Maps

Source Maps được kích hoạt ngoài hộp. Vì vậy, đối với mỗi tập tin được biên dịch, bạn sẽ tìm thấy một tập tin *. css.map đồng hành trong cùng thư mục. Bản đồ này cho phép bạn theo dõi bộ chọn kiểu biên dịch của bạn trở lại Sass ban đầu của bạn hoặc ít hơn trong khi gỡ lỗi trong trình duyệt của bạn. Nếu bạn không muốn Source Maps tạo ra cho CSS của bạn, bạn có thể vô hiệu hóa chúng bằng cách sử dụng tùy chọn cấu hình đơn giản:

elixir.config.sourcemaps = false;

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