Bất kỳ đề xuất cho một công cụ khai thác CSS? [đóng cửa]


289

Bất kỳ đề xuất cho một công cụ khai thác CSS?

Tôi sẽ root trên Google và dùng thử, nhưng tôi nghi ngờ rằng cộng đồng StackOverflow thông minh, thành thạo và tò mò có thể đã đánh giá ưu và nhược điểm của các đối thủ nặng ký.



20
Bầm. Tôi đã đọc 'Cách kết bạn và gây ảnh hưởng đến mọi người'. Không đủ chặt chẽ mặc dù .
Paul D. Chờ

17
Các bạn thật kỳ lạ. Chúng tôi thông minh, thành thạo và tò mò đẹp trai.
Chuck Le Mông


3
+1 chỉ để hiểu "bản chất thay đổi" của những thứ xung quanh đây, và hiểu và giải thích lý do cho những câu hỏi đóng như thế này - mặc dù đó là của bạn! ;)
Andrew Barber

Câu trả lời:


98

Các YUI Compressor là tuyệt vời. Nó hoạt động trên JavaScript và CSS. Kiểm tra nó ra.


4
Thêm vào đây, đây là một Makefile sẽ tải xuống Trình nén YUI, đóng gói các tệp của bạn và thu nhỏ chúng. github.com/balupton/jquery-sparkle/blob/ từ
balupton


@ JuniorMayhé Tôi đã sử dụng nó và phong cách của tôi đã hoàn toàn bị rối tung mặc dù tôi đã kiểm tra "Chỉ rút gọn, không có biểu tượng che giấu." tùy chọn) ... thật đáng buồn mỗi công cụ khai thác tôi thử luôn phá vỡ phong cách của tôi. Có phải bởi vì các công cụ khai thác trực tuyến là tất cả các crap? Không nên như vậy.
dialex

1
@DiAlex Tôi hiểu rất nhiều trong số chúng gây rối với mã của chúng tôi, chúng tôi phải sử dụng chúng cẩn thận, luôn chọn cách tiếp cận "bảo thủ" và không phải là bao thanh toán lại tích cực. Một người bảo thủ sẽ chỉ loại bỏ các không gian không cần thiết, dấu chấm phẩy, kiểu trùng lặp, v.v. Tôi nghĩ rằng một phong cách có thể bị phá hủy dễ dàng bởi các công cụ khai thác này nếu chúng ta sử dụng một số hack css bên trong mã css. Dấu gạch chéo ngược và ký hiệu wierd có thể khiến máy nén phát điên.
Junior Mayhé

Bạn có thể thử dịch vụ trực tuyến zbugs.com - nó sử dụng máy nén yui để thu nhỏ các tệp của bạn.
Tamik Soziev

45

Ngoài ra còn có một cổng .NET của YUI Compressor cho phép bạn: -

  • kết hợp việc thu nhỏ / tập tin kết hợp vào các sự kiện hậu kỳ của Visual Studio
  • tích hợp vào TFS Build (bao gồm CI)
  • nếu bạn muốn chỉ sử dụng dll trong mã của riêng bạn (ví dụ: trên đường bay nhỏ).

CẬP NHẬT 2011: Và hiện tại nó cũng có sẵn thông qua NuGet :)


Tôi có chút bối rối. Máy nén YUI không được dùng trong UglifyJS ( bản demo ). Liệu nó có ý nghĩa để làm việc trên một cổng .NET?
Martin Vseticka

Người bạn đời. Tôi đã bắt đầu cổng đó vào năm 2008 hoặc lâu hơn. Đó là 6 năm trước. Tôi cũng đã đăng câu trả lời này trong '09. Vì vậy, vui lòng kiểm tra ngày và nhận một số bối cảnh trước khi bạn hỏi q ngớ ngẩn. Bây giờ, hãy ra ngoài và chơi một chút thôi :)
Pure.Krom

Pure.Krom: Tôi xin khác. Tôi đã xem xét repo GitHub và nó đã được vài tháng tuổi và các cam kết là từ năm nay. Đó là lý do tại sao tôi hỏi. "Người bạn đời".
Martin Vseticka

: vỗ tay chậm: phát hiện tốt! bạn thực sự rất cao --- oh. Chờ đợi. Tôi bắt đầu proj trên codeplex : yuicompressor.codeplex.com . Cam kết đầu tiên vào ngày 7 tháng 7 năm 2008 ( yuicompressor.codeplex.com/SourceControl/changeset/ mẹo ). Sau đó chuyển nó sang GH năm nay . Tôi chưa thực hiện bất kỳ công việc nào về việc chuyển nó trong a.long.time. Chỉ có một vài sửa lỗi kỳ lạ ở đây và đó. Vì thế. Anh bạn Tôi cổng ED nó. Không cổng ing nó. Đó là trong chế độ bảo trì. QED
Pure.Krom

1
Bạn cũng vậy :) Và chúc mừng cho liên kết đến UglifyJS - đó là điều tôi muốn kiểm tra xem liệu chúng tôi có thể sử dụng nó tại nơi làm việc không - và bạn vừa nhắc chúng tôi về điều đó! chúc mừng :)
Pure.Krom

19

Tôi thích giảm thiểu . Trong PHP và hoạt động với CSS hoặc JavaScript.


2
+1 cho Giảm thiểu. Nếu bạn đã quen thuộc với PHP, bạn có thể thoải mái hơn khi cài đặt nó. Yêu cầu PHP5. Khi bạn thiết lập xong, bạn có thể quên nó đi, hoạt động bình thường trên nhiều tệp css hoặc js siêu trắng và nhận xét như bạn muốn và minify sẽ nén chúng một cách nhanh chóng.
mahalie

13

CSSO hiện là công cụ khai thác / tối ưu hóa tốt nhất.


2
Dunno nói về những người giỏi nhất, nhưng đáng xem.
Paul D. Chờ

Chỉ cần thử nó và bạn sẽ thấy nó là tốt nhất. Không có tương tự cho kỹ thuật thu nhỏ của nó cho thời điểm này như tôi biết.
im lặng

1
Được rồi, tôi đã so sánh CSSO với YUI Compressor trên tệp thử nghiệm 30 KB và sau khi gzped đầu ra được nén của cả hai công cụ, CSSO thắng, đã nén tệp thêm 7 byte. Tất nhiên đó chỉ là một tệp thử nghiệm.
Paul D. Chờ

giảm CSS trực tuyến với CSSO: css.github.io/csso/csso.html
tomByrer 17/12/13

Ít nhất đó là một trong hai đề xuất của Google PageSpeed ​​Insights .
Alex Vang

8

Nếu bạn sử dụng Python, tôi sẽ khuyên bạn nên mỏng hơn , có lẽ không nhanh bằng YUI Compressor nhưng không giống như csscompressor.net, nó không bị sặc trên các bản hack CSS.

Tôi thiên vị vì tôi đã viết mỏng hơn và hiện tôi đang đánh giá YUI Compressor để xem cách nó xử lý các bản hack. Một ví dụ về hành động mỏng hơn có thể được nhìn thấy nếu bạn xem nguồn của crosstips.org



6

Nếu bạn đang tìm kiếm một công cụ trực tuyến, hãy thử điều này: https://csscompressor.net/


1
Tôi ước tôi có thể bỏ phiếu cho câu trả lời này (đã quá muộn sau khi tôi nâng cấp nó). Tôi đang cố gắng nén css của tôi và nó phá vỡ mọi thứ. Điều đó không tốt chút nào. Cảnh báo cho tất cả mọi người ngoài kia, tôi đoán là trừ khi bạn có css tuân thủ các tiêu chuẩn nguyên sơ, nó có thể phá vỡ shit của bạn!
BT

19
Nhưng, bạn không nên có CSS ​​tuân thủ các tiêu chuẩn?
Chuck Le Mông

2
nếu bạn đang sử dụng bản tóm tắt HTML5, không.
SkaveRat

Công cụ đẹp. Tôi đã thử nghiệm nó html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}và nó đã hoạt động tốt hơn YUI Compressor (không loại bỏ các bản sao cho phần đệm của # test). Tuy nhiên, cả hai đều không làm tôi hài lòng html,body{width:100%;height:100%}body{padding:0}(mà theo cách hiểu của tôi là tương đương, vì cả hai bộ chọn đều có tính đặc hiệu giống nhau).
drdaeman

CSS là một trong những điều mà hack đột xuất đôi khi được chấp nhận. Một số trong những hack đó sử dụng các thủ thuật bình luận kỳ lạ mà minantiction có thể phá vỡ.
Brandon

4

Tôi đã viết một công cụ khai thác CSS cực nhanh bằng C #. Thuật toán không xử lý Javascript mặc dù. Đây là: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Alacticm.aspx .


Lựa chọn đẹp mắt. Mặc dù vậy, một truy vấn: bạn đã nói, theo đặc tả CSS, hai loại chuỗi được hỗ trợ: trích dẫn đơn và trích dẫn kép. Thuật toán của tôi giữ nguyên chuỗi, ngay cả khi các ký tự khoảng trắng được tìm thấy bên trong nó ... Tôi chỉ nghĩ rằng việc giữ chuỗi không thay đổi là trực quan và chuyên nghiệp hơn. Chắc chắn bất kỳ ký tự không gian nào không thêm ý nghĩa nên được loại bỏ, để làm cho tệp đầu ra càng nhỏ càng tốt? Đó không phải là điểm của sự giảm thiểu?
Paul D. Chờ

3
Vâng, theo tôi điều này chắc chắn là đúng trong một trường hợp chung. Nhưng tôi coi chuỗi là một trường hợp đặc biệt. Tùy thuộc vào nhà phát triển CSS gốc có hay không xóa khoảng trắng vô nghĩa khỏi chuỗi. Thuật toán tôi đang hiển thị chỉ đơn giản là tuân theo đặc tả giữ cho chuỗi không bị thay đổi.
Kerido

4

Hãy thử đóng cửa các bảng định kiểu .

Bên cạnh việc thu nhỏ, nó cũng hỗ trợ linting , lật RTLđổi tên lớp .

Nó cũng có thể thêm các biến , hàm , điều kiệnmixin vào CSS.

Cũng lưu ý rằng một số tính năng này phụ thuộc vào phần còn lại của Công cụ đóng (vốn rất mạnh).


Làm thế nào để bạn sử dụng nó trên windows? tha thứ cho sự thiếu hiểu biết của tôi
user2513846

3

Nếu bạn đang tìm kiếm thứ gì đó trong PHP, thì đây là liên kết: -

Giảm thiểu chất béo

Mặc dù nó là một phần của Khung không béo của PHP, nhưng nó cũng có thể được sử dụng độc lập.


Khung không có chất béo là GPL và do đó tôi cho rằng phần mã này cũng vậy. Chỉ là một up up.
CodeReaper

Nó có lỗi: S ý tưởng tồi.
brunoais

3

Tôi thấy rằng CSS SuperScrub của isnoop hoạt động rất tốt. Nó chỉ có thể xử lý các liên kết trực tiếp đến CSS trực tuyến mặc dù: / Bạn có thể khắc phục điều đó bằng cách sử dụng dịch vụ pastebin ưa thích của mình để giữ mã css và chỉ cung cấp cho SuperScrub liên kết thô.


Tôi đã thử nó #test { padding: 1em; width: 10em; } #test { padding: 2em; }và nó đã thất bại.
drdaeman

@drdaeman Điều đó có lẽ bởi vì nó không biết phải làm gì với các giá trị xung đột / trùng lặp cho một bộ chọn đã cho. Vì tôi không duy trì SuperScrub, tôi không thể cho bạn biết khi nào hoặc nếu điều đó sẽ được khắc phục.
John Michel



3

Những người khác đã đề cập đến YUI Compressor, sau đó là cổng .NET của nó và tôi sẽ thêm một liên kết khác vào chuỗi. StyleManager là một điều khiển máy chủ bao bọc cổng .NET của YUI Compressor để bạn có thể sử dụng nó giống như bạn đã quen sử dụng ScriptManager. Nó cũng bổ sung một loạt các tính năng hay khác, như các hằng số CSS, độ phân giải (~) w / trong các định nghĩa hình nền của bạn, v.v. o một vấn đề. Hãy xem thử - gStyleManager.com


3

Vẫn "trong bản beta", nhưng sẽ hoạt động khá tốt. Tôi sử dụng mã đằng sau nó trong mọi dự án: http://claudiu.phpfogapp.com/ Nó được tích hợp sẵn trong PHP và cũng lưu trữ tệp * .css của bạn trong một khoảng thời gian khá lớn, chắc chắn đủ để cho phép bạn kiểm tra mã của mình với css rút gọn. (Tôi sẽ chỉ xóa các tệp css cũ nếu không gian bị chật cứng trên máy chủ).


2

Có một dự án codeplex sẽ cắm vào các trang web .net sẽ thu nhỏ và nén các tệp CSS và tệp JS. Ngoài ra còn có một so sánh giữa Microsoft AJAX Minifier và YUI Compressor cho thấy YUI ra mắt tốt hơn một chút. Có một biến thể bổ sung kết hợp Công cụ khai thác và nén Microsoft, giúp phá hủy tập tin một cách quyết liệt.

Dù sao, liên kết là http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )




1

Ví dụ về C #:

css = css.Replace("\n", "");
css = Regex.Replace(css, @"\s+", " ");
css = Regex.Replace(css, @"\s*:\s*", ":");
css = Regex.Replace(css, @"\s*\,\s*", ",");
css = Regex.Replace(css, @"\s*\{\s*", "{");
css = Regex.Replace(css, @"\s*\}\s*", "}");
css = Regex.Replace(css, @"\s*\;\s*", ";");

1

zbugs.com sẽ là một công cụ trực tuyến tốt cho bạn, nó sẽ thu nhỏ css của bạn chỉ bằng một cú nhấp chuột


Chắc chắn, mặc dù tôi không nghĩ rằng có nhiều công cụ khai thác yêu cầu nhiều hơn một lần nhấp để bắt đầu chúng.
Paul D. Chờ

Bạn đúng Paul :) nhưng cái này làm được nhiều hơn thế sau đó chỉ cần rút gọn, và tất cả chỉ trong một cú nhấp chuột
Tamik Soziev

1

Hãy xem qua HTML5BoilerPlate mới nhất của Paul Irish - nó chứa tập lệnh xây dựng để thu nhỏ tất cả tài sản của bạn (bao gồm cả PNG và JPG). Bạn có thể xem một video demo ở đây .


2
Chắc chắn rồi; Công cụ khai thác CSS của nó là YUI Compressor.
Paul D. Chờ
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 cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.