UnCSS
UnCSS là một công cụ giúp loại bỏ các CSS không sử dụng từ bộ các tệp kiểu của bạn. Nó hoạt động trên nhiều tệp và hỗ trợ CSS được chèn bằng Javascript.
Cách thức hoạt động
Quá trình mà UnCSS loại bỏ các quy tắc không sử dụng như sau:
. Các tệp HTML được tải bởi jsdom và JavaScript được thực thi.
. Tất cả các bộ kiểu được phân tích bởi PostCSS.
. document.querySelector
lọc ra các bộ chọn không được tìm thấy trong các tệp HTML.
. Các quy tắc còn lại được chuyển về CSS.
Vui lòng lưu ý:
- UnCSS không thể chạy trên các trang không phải là HTML, chẳng hạn như các mẫu hoặc các tệp PHP. Nếu bạn cần chạy UnCSS trên các mẫu của bạn, bạn nên tạo các trang HTML ví dụ từ các mẫu của bạn, và chạy uncss trên những tệp đã tạo đó; hoặc chạy máy chủ phát triển cục bộ trực tiếp, và chỉ định uncss tại đó.
- UnCSS chỉ chạy Javascript được thực thi khi trang tải. Nó không (và không thể) xử lý Javascript được thực thi qua tương tác của người dùng như nhấp chuột vào nút. Bạn phải sử dụng tùy chọn
ignore
để bảo tồn các lớp được thêm bởi Javascript trong tương tác của người dùng.
Cài đặt
npm install -g uncss
Sử dụng
Máy chủ Trực tuyến
- https://uncss-online.com/ – Máy chủ không chính thức, rất tiện lợi để kiểm tra hoặc sử dụng một lần!
Trong Node.js
var uncss = require('uncss');
var files = ['my', 'array', 'of', 'HTML', 'files', 'or', 'http://urls.com'],
options = {
banner: false,
csspath: '../public/css/',
htmlroot: 'public',
ignore: ['#added_at_runtime', /test\-[0-9]+/],
ignoreSheets: [/fonts.googleapis/],
inject: function (window) {
window.document.querySelector('html').classList.add('no-csscalc', 'csscalc');
},
jsdom: {
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
},
media: ['(min-width: 700px) handheld and (orientation: landscape)'],
raw: 'h1 { color: green }',
report: false,
strictSSL: true,
stylesheets: ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
timeout: 1000,
uncssrc: '.uncssrc',
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
};
uncss(files, options, function (error, output) {
console.log(output);
});
/* Look Ma, no options! */
uncss(files, function (error, output) {
console.log(output);
});
/* Specifying raw HTML */
var rawHtml = '...';
uncss(rawHtml, options, function (error, output) {
console.log(output);
});
Lúc xây dựng
UnCSS cũng có thể được sử dụng cùng với các hệ thống xây dựng JavaScript khác như Grunt, Broccoli hoặc Gulp!
- grunt-uncss – Nhờ @addyosmani
- gulp-uncss – Nhờ @ben-eb
- broccoli-uncss – Nhờ @sindresorhus
Từ dòng lệnh
Usage: uncss [options] <file or URL, ...>
e.g. uncss https://getbootstrap.com/docs/3.3/examples/jumbotron/ > stylesheet.css
Options:
-h, --help output usage information
-V, --version output the version number
-i, --ignore <selector, ...> Do not remove given selectors
-m, --media <media_query, ...> Process additional media queries
-C, --csspath <path> Relative path where the CSS files are located
-s, --stylesheets <file, ...> Specify additional stylesheets to process
-S, --ignoreSheets <selector, ...> Do not include specified stylesheets
-r, --raw <string> Pass in a raw string of CSS
-t, --timeout <milliseconds> Wait for JS evaluation
-H, --htmlroot <folder> Absolute paths' root location
-u, --uncssrc <file> Load these options from <file>
-n, --noBanner Disable banner
-a, --userAgent <string> Use a custom user agent string
-I, --inject <file> Path to javascript file to be executed before uncss runs
-o, --output <file> Path to write resulting CSS to
Lưu ý rằng bạn có thể truyền cả đường dẫn tệp cục bộ (được xử lý bởi glob ) và URL vào chương trình.
banner (boolean, mặc định: true
): Xác định liệu có nên thêm biểu ngữ trước mỗi khối tệp trong CSS được xử lý hay không.
csspath (string): Đường dẫn mà các tệp CSS liên quan đến các tệp HTML. Mặc định, UnCSS sử dụng đường dẫn được chỉ định trong thẻ <link rel="stylesheet" href="path/to/file.css"/>
.
htmlroot (string): Nơi gốc của dự án. Hữu ích chẳng hạn nếu bạn có HTML tham chiếu đến các tệp cục bộ với các URL liên quan đến gốc, ví dụ như href="/css/style.css"
.
ignore (string[]): Cung cấp danh sách các bộ chọn không nên bị loại bỏ bởi UnCSS. Ví dụ, các kiểu được thêm bởi tương tác của người dùng trang (hover, click), vì những kiểu này chưa thể được UnCSS phát hiện. Cả tên cố định và mẫu regex đều được nhận dạng. Nếu không, bạn có thể thêm một comment trước các bộ chọn cụ thể:
/* uncss:ignore */
.selector1 {
/* this rule will be ignored */
}
.selector2 {
/* this will NOT be ignored */
}
/* uncss:ignore start */
/* all rules in here will be ignored */
/* uncss:ignore end */
ignoreSheets (string[] | RegExp[]): Không xử lý các bộ kiểu này, ví dụ như các phông chữ của Google. Chấp nhận chuỗi hoặc mẫu regex.
inject (string / function(window)): Đường dẫn đến một tệp javascript cục bộ sẽ được thực thi trước khi uncss chạy. Một hàm cũng có thể được truyền trực tiếp vào.
Ví dụ tệp inject.js
'use strict';
module.exports = function (window) {
window.document.querySelector('html').classList.add('no-csscalc', 'csscalc');
};
Ví dụ về truyền inject dưới dạng hàm
{
inject: function(window){
window.document.querySelector('html').classList.add('no-csscalc', 'csscalc');
}
}
jsdom (object) (Chỉ được hỗ trợ bởi API): Cung cấp các tùy chọn được sử dụng để tạo các trang JSDOM (https://github.com/jsdom/jsdom). Hiện tại, config.resources
vẫn chưa được hỗ trợ.
media (string[]): Mặc định, UnCSS chỉ xử lý các bộ kiểu với truy vấn phương tiện _all_
, _screen_
, và các bộ không có truy vấn phương tiện. Xác định ở đây các bộ khác để bao gồm.
raw (string): Cung cấp chuỗi CSS nguyên thủy cho tác vụ này, bên cạnh các tùy chọn bộ kiểu hiện có; hữu ích khi viết mã kịch bản và CSS của bạn chưa được ghi vào đĩa.
report (boolean, mặc định: true
): Trả về đối tượng báo cáo trong hàm gọi lại.
strictSSL (boolean, mặc định: true
): Vô hiệu hóa xác minh SSL khi truy xuất nguồn HTML
stylesheets (string[]): Sử dụng các bộ kiểu này thay vì các bộ được trích xuất từ các tệp HTML. Tiền tố đường dẫn bằng giao thức file://
để bắt buộc sử dụng các bộ kiểu cục bộ, nếu không thì các đường dẫn sẽ được giải quyết như trình duyệt thực hiện với thẻ mắc xích href
trên trang HTML.
timeout (number): Chỉ định thời gian chờ để tải JS.
uncssrc (string): Tải tất cả các tùy chọn từ tệp JSON. Biểu thức chính quy cho các tùy chọn ignore
và ignoreSheets
nên được bao quanh bằng dấu ngoặc kép.
Ví dụ tệp uncssrc:
{
"ignore": [".unused", "/^#js/"],
"stylesheets": ["css/override.css"]
}
userAgent (String, mặc định: 'uncss'
): Chuỗi user agent mà jsdom nên gửi khi yêu cầu trang. Có thể hữu ích khi tải đánh dấu từ các dịch vụ sử dụng phát hiện thiết bị dựa trên user agent để cung cấp đánh dấu tùy chỉnh cho các thiết bị di động. Mặc định là uncss
.
Như một Plugin PostCSS
UnCSS có thể được sử dụng như một Plugin PostCSS.
postcss([require('uncss').postcssPlugin]);
Xem PostCSS docs để biết ví dụ cho môi trường của bạn.
Lưu ý: Tùy thuộc vào môi trường của bạn, bạn có thể không thể sử dụng uncss như một plugin PostCSS vì plugin không được xuất trực tiếp. Trong các trường hợp như vậy, sử dụng thư viện bọc postcss-uncss.
Các Tùy chọn
html (string[]): Cung cấp danh sách các tệp HTML để phân tích các bộ chọn và phần tử. Sử dụng của globs được cho phép.
ignore (string[] | RegExp[]): cung cấp danh sách các bộ chọn không nên bị loại bỏ bởi UnCSS. Ví dụ, các kiểu được thêm bởi tương tác của người dùng trang (hover, click), vì những kiểu này chưa thể được UnCSS phát hiện. Cả tên cố định và mẫu regex đều được nhận dạng. Nếu không, bạn có thể thêm một comment trước các bộ chọn cụ thể trong CSS của bạn:
/* uncss:ignore */
.selector1 {
/* this rule will be ignored */
}
.selector2 {
/* this will NOT be ignored */
}
Ví dụ Cấu hình
{
html: ['index.html', 'about.html', 'team/*.html'],
ignore: ['.fade']
}
Thông Tin Tải Xuống:
Tác giả: uncss
Mã Nguồn: https://github.com/uncss/uncss
Giấy Phép: MIT license