Có các tác vụ grunt để tạo hình ảnh sprites theo css không?

Question

Hãy nói rằng tôi có file style.css sau:

h1 { 
    padding: 10px; 
    background: url('/img/header.png'); 
} 
p { 
    background: url('/img/p.png'); 
} 

tôi cần phải làm cho hình ảnh sprite cho css này tự động. Tôi cần có một cái gì đó như thế này:

h1 { 
    padding: 10px; 
    background: url('/img/sprite.png') -47px 0; 
} 
p { 
    background: url('/img/sprite.png') -130px 0; 
} 

Có thể tự động hóa bằng cách sử dụng tác vụ grunt không?

Answer 1

Làm thế nào để sử dụng Grunt Imagine?

Answer 2

Dường như bạn đang tìm kiếm grunt-sprite-generator này. Từ các tài liệu:

Grunt nhiệm vụ mà tạo ra một sprite từ hình ảnh tham chiếu trong một stylesheet và sau đó cập nhật các tài liệu tham khảo với hình ảnh ma mới và vị trí

Một công cụ trông để phù hợp với hóa đơn là grunt-spritesmith