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

14

Tôi biết về sprockets để kết hợp các tệp javascript, nhưng chưa thử nó. 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?

optimization  javascript  css 
— Cebjyre
nguồn
2
Ngoài ra, mặc dù không phải là một câu trả lời thực sự, bạn có thể quan tâm đến các gói tài nguyên: limi.net/articles/resource-packages Thật không may, tôi không nghĩ có ai thực hiện nó.
— luiscubal

Câu trả lời:

2

Tôi đã giải quyết vấn đề này trong một 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 lựa 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 như một viên ngọc quý. 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 điều 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ỏ.

— Evan Plaice
nguồn
1

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. Microsoft và Google đều có giải pháp (tôi chưa từng 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.

— Larry Smithmier
nguồn
1

Đố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.

— Raleigh Buckner
nguồn
1

Nếu ứng dụng web của bạn bằng 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, loại bỏ các khoảng trắng và bình luận 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.

— Tom
nguồn
1

Để biết điều này Python thực sự có thể 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ó.

— Dưa chua
nguồn
Bản thân tôi là một anh chàng Perl và tôi có thể cùng nhau hack một cái gì đó, nhưng tôi thích sử dụng một số công cụ có sẵn (với, có lẽ, thử nghiệm tốt hơn và nhiều tính năng hơn nỗ lực nhanh và bẩn của tôi).
— Cebjyre
Tự quảng cáo gớm ghiếc nhưng @Pickels, bạn có muốn giúp dự án này không? code.google.com/p/lesscss-python
— Metalshark
0

Tôi đã tạo ra 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).

— Samuel Dauzon
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.