在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):zalando/gulp-check-unused-css开源软件地址(OpenSource Url):https://github.com/zalando/gulp-check-unused-css开源编程语言(OpenSource Language):CSS 53.6%开源软件介绍(OpenSource Introduction):gulp-check-unused-cssThis tool ensures that all of your defined CSS classes are used in your HTML files, and vice versa. If your HTML uses any classes that you have not defined in your CSS files, or if there are css definitions that aren't being used, they will be reported. This allows for removal of unused and redundant code which will both improve the readability of your project while also slightly reducing file size (and therefore the amount of data being transferred on load). Going forward I would like to collaborate openly with any open source developers interested in improving this tool, and discuss features that they think are missing for their own particular use case. Please create issues to get the conversation started! :) Why gulp-check-unused-cssConsider this Venn diagram: Figure a) represents what you have now. Some classes are defined in your CSS, but never used in the templates. Some classes used in the templates don't appear in your CSS. Figure b) represents what you actually want. Keeping your CSS and HTML clean improves the maintainability of your code. You don't want to send useless bytes to your users, because you want site loading to be as fast as possible.
Installation
UpgradingIf you are upgrading from
I didn't publish the two UsageSimple use:
For advanced use with Depending on the gulp version, you may have to return the gulp command like below:
The plugin will emit all files you put in, because it has to read all of them before checking. Occasionally, however, it will break your pipe. This is good for automated build processes, e.g. in CI systems like Jenkins or Travis. Options
Ignoring ClassesThis plugin is inspired by the workflow at Github, where a build fails if the classes used in the CSS and the templates do not overlap exactly. However, most of us do not write 100% of the CSS ourselves but rely on frameworks such as Bootstrap. That's why there are some options available to ignore "global" or "vendor" classes. You can provide a list of class names or regular expressions that should be ignored.
Since 1.1.0 you can also add
And since 2.1.1, you can add your own globals. A "global" is only an array of strings or regexes, so you can do it like this:
Or you can define a module that exports this array and require it:
This way you could also automatically create your custom global. Globals that Work out of the Box
Development
Add a Global to the Project's Source
Changelog
Contributions/TODO ListThis project was recently revived and is actively and enthusiastically seeking contributors. Here's the plan for its next development phase:
To get involved, just file a PR or ask for more information via Issues. LicenseCopyright 2014 Zalando SE Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论