it-swarm-vi.com

Tôi nên sử dụng gì để tự động kết hợp các tệp css / js?

Tôi biết sprockets để kết hợp các tệp javascript, nhưng chưa thử. Một số tùy chọn khác là gì và làm thế nào để chúng xếp chồng lên nhau?

14
Cebjyre

Tôi đã viết một trình xử lý cho Asp.Net sử dụng YUI để nén, ghép và lưu trữ đầu ra.

Đây là nguồn: http://Gist.github.com/13091

4
travis

Tôi đã giải quyết vấn đề này trong câu hỏi khác

Nhìn nhận lại, tôi nên đã hỏi nó trên Webmaster thay vì trang Lập trình viên.

Bạn có 3 tùy chọn:

  1. Hãy để khung của bạn tự động xử lý nó
  2. Hãy để máy chủ web của bạn tự động xử lý nó
  3. Cuộn tùy chọn của riêng bạn để làm điều đó bằng tay

Tùy chọn 1 (sử dụng tiện ích mở rộng CakePHP):

Tải xuống và cài đặt AssetPacker vào trang web của bạn (cũng yêu cầu jsmin và CSSTidy). Sửa đổi một vài dòng nguồn của bạn bao gồm các tệp js. Rửa-> Rửa-> Lặp lại. Voila, phần còn lại được thực hiện tự động cho bạn.

Nếu bạn sử dụng một số khung công tác khác, rất có thể, có một công cụ sẽ thực hiện điều này cho bạn. Đó là một yêu cầu khá phổ biến trong thế giới webdev.

Tùy chọn 2 (sử dụng mod Apache):

Hãy xem mod Google Pagespeed cho Apache . Nó làm mọi thứ bạn mô tả và nhiều hơn nữa.

Hãy chắc chắn để theo dõi tài nguyên máy chủ sản xuất của bạn mặc dù. Một số người đã nhìn thấy các vấn đề trong đó điều này làm tăng tải trên máy chủ của họ theo cách xấu. Tôi không tích cực nhưng nó có thể yêu cầu một chiến lược nội dung tĩnh đủ để trở thành một lựa chọn hiệu quả.

Tùy chọn 3:

Nếu bạn thực sự muốn, bạn có thể tạo một số phép thuật PHP kết hợp phía máy chủ tệp JS và kết hợp tất cả các liên kết liên kết thành một nhưng ... Đó chính xác là những gì hai chiến lược đã thực hiện.

Cá nhân, tôi khuyên bạn nên chống lại tùy chọn này.


Theo như tôi biết thì Sprockets ghép các tệp JS giống như AssetPacker, nó chỉ được triển khai dưới dạng Ruby Gem. Những gì nó không làm là thu nhỏ mã js. Vì vậy, nếu bạn sử dụng nó, có lẽ cũng nên lấy viên ngọc jsmin. Để biết thông tin về cách sử dụng Sprockets + JSMin trong CakePHP, hãy kiểm tra cái này .

Tôi biết tôi đã nhấn mạnh vào CakePHP nhưng ... Tôi cho rằng, nếu một plugin có thể được điều chỉnh theo CakePHP, thì việc điều chỉnh nó theo một khung khác cũng là chuyện nhỏ.

2
Evan Plaice

Nếu ứng dụng web của bạn ở trong PHP bạn nên xem xét sử dụng minify :

Nó kết hợp nhiều tệp CSS hoặc Javascript, xóa các khoảng trắng và nhận xét không cần thiết và phục vụ chúng với mã hóa gzip và các tiêu đề bộ đệm phía máy khách tối ưu.

1
Tom

Một tìm kiếm nhanh trên google tìm thấy điều này để kết hợp các tệp CSS: http://www.tothepc.com/archives/combine-merge-mult Môn-css-files /

1
Macha

Bạn có chắc chắn rằng bạn muốn kết hợp chúng? Nếu bạn sử dụng một thư viện chung, bạn có thể tận dụng CDN để phân phối javascripts của mình. Sau đó, bạn có thể tận dụng bộ nhớ đệm của trình duyệt (giả sử các trang web khác đang sử dụng cùng CDN) và phân phối phân phối. MicrosoftGoogle mỗi giải pháp đều có (tôi chưa sử dụng một cách trung thực, nhưng tôi chắc chắn sẽ bắt đầu) và có thể có những giải pháp khác.

1
Larry Smithmier

Đối với các dự án ASP.NET, tôi đã biến nó thành một phần của quá trình xây dựng của mình dựa trên hướng dẫn của Karl Seguin .

Karl mô tả nó tốt nhất trên blog của mình, nhưng phiên bản ngắn là để thiết lập một ứng dụng giao diện điều khiển gói YUICompressor. Sau đó, bạn có thể thiết lập một tác vụ hậu xây dựng để gọi ứng dụng bảng điều khiển đó dựa vào vị trí của các tệp JS trong trang web của bạn.

1
Raleigh Buckner

Để biết điều này Python có thể thực sự hữu ích. Bạn có thể học Python khá nhanh. Tôi đã bắt đầu khoảng 2 tuần trước và ứng dụng đầu tiên của tôi (vẫn chưa hoàn thành) sẽ thực hiện chính xác những gì bạn muốn. Giống như trình biên dịch DotLess, nó sẽ có chức năng theo dõi sẽ xem các tệp hoặc thư mục và nếu chúng thay đổi, nó sẽ tạo ra một tệp mới.

Python cũng tuyệt vời cho các nhiệm vụ bảo trì khác và tôi đọc rất nhiều quản trị viên hệ thống thích sử dụng nó.

1
Pickels

Tôi đã tạo Solitairepy : một công cụ được viết bằng Python3 (tương thích với Mac OS, Windows và Linux) để hợp nhất và thu nhỏ tệp JS và CSS bằng cách sử dụng Python.

Solitairepy sử dụng tệp cấu hình JSON rất dễ dàng để xác định tệp nào phải được hợp nhất, thu nhỏ hay không:

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

Bạn cũng có thể sử dụng công cụ này trong CLI.

Solitairepy phát hiện bất kỳ sửa đổi nào trên các tệp JS/CSS và tự động hợp nhất/thu nhỏ chúng (hữu ích cho việc phát triển).

0
Samuel Dauzon