Webpack standard project color matching plug-in

Abstract

The invention relates to the field of project color matching, and discloses a webpack standard project color matching plug-in which comprises a global color matching variable setting module, a color matching pickup plug-in and a data extraction module. The global color matching variable setting module is used for configuring a global public color variable through a stack-resource-loader, and defining a color specification in a project; the color matching pick-up plug-in captures all the packaged files by using a cooks.emit.tapAsync asynchronous hook function of a compiler object in the callback, screens out all the files containing the CSS resources, and extracts all attributes related to color matching through a regular expression; the data extraction module matches all CSS codes related to color matching through a regular expression, extracts color values, stores the color values as objects in a key-value pair form, counts the occurrence frequency of each color, and generates a piece of color distribution data. The method has the advantage of improving the development efficiency.

Description

Technical Field

[0001] The present invention relates to the field of project color matching, specifically a webpack standard project color matching plugin. Background Art

[0002] In modern front-end development, maintaining a unified UI color matching standard is crucial for improving development efficiency, enhancing the maintainability of projects, and enhancing the user experience. As a powerful front-end construction tool, Webpack is widely used in the construction and optimization processes of projects. In a project, by using style-resources-loader to configure Webpack, global common color variables can be uniformly injected into each style file, thereby realizing the standardized management of project color matching. In this way, all the theme colors in the project are implemented through color variables. Developers only need to reference these variables in the style file without directly writing hard-coded colors. This method can not only improve the maintainability of the code but also make the modification and unified management of colors more convenient. During the Webpack packaging process, all color variables will be replaced with actual color values, which can optimize the loading speed of style files in the production environment, reduce the dependence on variables, and improve the rendering performance of the browser. In this way, the colors and styles of the project are kept unified, and during maintenance, developers only need to focus on color variables without manually modifying specific color values in each style.

[0003] However, in large projects with rich and complex demand iterations, as the project continues to develop and functions continue to increase, there will usually be a large number of custom color matches for local requirements. These custom color matches may be close to the general theme color but are not replaced according to the unified color variables. For example, in multiple files, developers may customize some local colors, such as border colors, background colors, font colors, etc., which are similar to the existing theme colors but are not replaced with standardized color variables. Due to the dispersion of these colors in various files and modules, manually replacing these colors is not only a huge workload but also time-consuming, increasing the maintenance cost of the project. Therefore, it is necessary to design a webpack standard project color matching plugin to improve development efficiency. Summary of the Invention

[0004] (1) Technical Problems to be Solved

[0005] In view of the deficiencies of the prior art, the present invention provides a webpack standard project color matching plugin, which has the advantage of improving development efficiency and solves the problems in the above background art.

[0006] (2) Technical Solutions

[0007] To achieve the above object of improving development efficiency, the present invention provides the following technical solutions: a webpack standard project color matching plugin, including a global color matching variable setting module, a color matching picking plugin, and a data extraction module;

[0008] The global color matching variable setting module configures global common color variables through style-resources-loader to define the color specifications in the project;

[0009] The color matching picking plugin uses the asynchronous hook function hooks.emit.tapAsync of the compiler object in the callback to capture all packaged files, filter out all files containing CSS resources, and extract all color-related attributes through regular expressions;

[0010] The data extraction module matches all CSS codes related to color matching through regular expressions, extracts the color values and stores them as an object in the form of key-value pairs, counts the number of times each color appears, and generates a color distribution data.

[0011] Preferably, the global color matching variable setting module further includes loading multiple color matching variable sets through a configuration file, allowing the project to use different color matching specifications in different development stages or different functional modules.

[0012] Preferably, the color matching picking plugin further includes that the color matching picking plugin further supports users to customize regular expression rules, allowing developers to flexibly define which CSS attributes need to extract color information according to the actual needs of the project. When extracting color values through regular expression matching, the regular matching rules are as follows:

[0013] Match the color attribute: color:[\d\D]+;

[0014] Match the background attribute: background:[\d\D]+;

[0015] Match the border attribute: border:[\d\D]+;

[0016] Match other related color matching attributes: border-top, border-bottom.

[0017] Preferably, the data extraction module further includes converting the extracted color values into RGB format and processing them according to the specified conversion rules. The conversion rules include converting hexadecimal color values into RGB format and performing tolerance processing on the color values.

[0018] Preferably, the plug-in matches the color values that meet the specifications through the color range correspondence relationship, defines the color range based on the RGB principle, and determines whether it belongs to the color range that meets the specifications by setting the tolerance value. The colors that meet the conditions will be marked as the color variables that need to be replaced with the standard color matching.

[0019] Preferably, the plug-in will generate a modification suggestion data according to the matched color range and output it in json format. The modification suggestion data includes the colors that need to be replaced with the standard color matching, and provides the corresponding color values, replacement suggestions and relevant file information for developers to refer to.

[0020] Preferably, the plug-in provides a graphical interface for developers to view the modification suggestion data, and supports selectively batch replacing the non-compliant colors in the project and viewing the effects after replacement in real time.

[0021] Preferably, through the integration with the version control system, the plug-in supports version management of the modification and update of the color matching specifications, switches the color matching specifications between different versions, and automatically updates the relevant color data and modification suggestions.

[0022] (III) Beneficial effects

[0023] Compared with the prior art, the present invention provides a webpack standard project color matching plug-in, which has the following beneficial effects:

[0024] Through the automated global color variable setting, color picking and data extraction functions, the present invention can accurately and efficiently manage and standardize the use of colors in the project. Through the global color variable setting module, developers can uniformly configure and manage the color standards of the project to ensure consistency. The color picking plug-in automatically captures and extracts the color matching attributes in CSS, avoiding the cumbersome manual screening and improving the development efficiency. The data extraction module accurately extracts color information through regular expressions and counts the usage frequency of each color, helping developers deeply understand the color usage situation and providing data support, so as to realize color matching optimization, standardization and intelligent management. Generally speaking, the present invention improves the automation degree of project color matching management, reduces human intervention, ensures that the project follows the unified color matching specifications in different development stages and modules, improves the development efficiency and reduces the errors and deviations of color matching design. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 It is a schematic structural diagram of the present invention. DETAILED DESCRIPTION OF THE INVENTION

[0026] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all of the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0027] The present invention provides a technical solution: a webpack standard project color matching plugin, including a global color matching variable setting module, a color matching picking plugin, and a data extraction module;

[0028] The global color matching variable setting module configures global public color variables through style-resources-loader to define the color specifications in the project.

[0029] The global color matching variable setting module realizes the injection of global public color variables through style-resources-loader, and supports the project to load different color matching specifications according to different development environments. Through the configuration file method, different color matching variable sets can be defined for each environment, so as to ensure that developers can flexibly adjust and manage the color matching strategy at different stages. This flexible configuration method enables the project to maintain a consistent visual experience in different development stages. It supports the dynamic update of color variables, that is, during the development process, if the color matching specification needs to be changed, developers only need to modify the configuration file and save it, and the system will automatically update the global color variables through style-resources-loader. Combined with the hot reloading technology of Webpack, the color matching modification can be reflected on the page in real time without manual refreshing or restarting the development server, significantly improving the development efficiency. It supports standard CSS and is also compatible with common CSS preprocessors, and can share global color matching variables in these preprocessors. The color matching variables loaded through style-resources-loader can be seamlessly applied to various style files to ensure global unity and avoid the problem of inconsistent colors between multiple preprocessors. The global color matching variable setting module allows the project to set unified color matching variables globally, and also supports customizing local color matching specifications in different modules, pages or components. By locally overriding or extending global variables, developers can flexibly adjust the color matching scheme according to different functional modules, page designs or user requirements, thus ensuring the flexibility and scalability of the project. Through the automatic verification of the color matching variable naming specification, it is ensured that all color variables follow the unified naming rule. During the development process, if there is a color variable that does not conform to the naming specification, the module will automatically prompt the developer to modify it, which helps to improve the code maintainability and consistency of the project and avoid management chaos and errors caused by inconsistent naming.

[0030] By supporting multi-environment configuration and dynamic updates, developers can adjust the color scheme specifications according to different development stages without manually changing each style file. The automatic injection and update of color variables reduce the manual operations of developers after modifying the color scheme, making the modification of color scheme specifications more efficient and convenient. Through the unified management of global color variables, the consistency of colors throughout the project is ensured, avoiding visual inconsistency problems caused by different color values used by multiple developers and modules. This makes the project more neat and standardized in visual design and improves the user experience. The naming convention and automatic verification mechanism ensure that the color variables used in the project comply with the unified naming rules, avoiding errors caused by non-standard color naming. At the same time, the centralized management of global color variables makes maintenance more convenient. Developers only need to modify the definition of color variables to affect all related styles in the project, reducing redundant code and lowering the maintenance cost. By supporting multiple style preprocessors and local and global color variable management within the project, the module can flexibly adapt to different project requirements, whether it is a small single-page application or a large enterprise-level project, and can meet their different color requirements. In addition, developers can freely switch color schemes according to different design requirements, enhancing the flexibility and scalability of the project. Through dynamic updates and real-time reflection of color scheme specifications, developers can quickly view the effects of changes while modifying colors. This instant feedback mechanism improves development efficiency and enables developers to perform color matching and design iteration more precisely, ultimately bringing a better user experience and visual effect.

[0031] The color pick-up plugin uses the asynchronous hook function hooks.emit.tapAsync of the compiler object in the callback to capture all packaged files, filter out all files containing CSS resources, and extract all color-related attributes through regular expressions.

[0032] The color matching pick-up plugin utilizes the asynchronous hook function hooks.emit.tapAsync of the Webpack compiler object to capture all generated files during the packaging process. This mechanism enables the plugin to intercept and process all packaged files, including JavaScript and CSS files, during the Webpack build process. By using the tapAsync hook function, the plugin can process files in an asynchronous flow, ensuring that further operations can be carried out after the files are fully packaged and generated, without waiting for all operations to complete synchronously, thereby improving the build efficiency. The plugin can efficiently screen out files containing CSS resources from all packaged files. By analyzing the module output of Webpack, the plugin accurately identifies which files are CSS-related files, such as.css,.scss,.less files, and thus only performs color matching extraction and analysis on the relevant files. This screening mechanism improves the processing efficiency and avoids the impact of irrelevant files on the plugin's performance. The color matching pick-up plugin extracts color-related properties in CSS, such as color, background, border, border-top, border-bottom, etc., by defining regular expression rules. This extraction method based on regular expressions can efficiently match color-related fields from a large amount of CSS style code. The flexibility of regular expressions enables the plugin to customize the matching rules according to project requirements, extract all possible color-related properties, and improve the adaptability and accuracy of the plugin. The color matching pick-up plugin further supports developers to customize regular expression rules, allowing developers to adjust and expand the matching method of color attributes according to actual needs. For example, developers can flexibly modify the regular rules according to specific CSS properties used in the project to ensure that the plugin can cover all relevant color attributes without modifying the source code of the plugin. This customization ability enables the plugin to handle special requirements in different projects. The plugin can process color information in multiple CSS files and summarize this information, supporting the collection of color matching data for multiple files and modules in large-scale projects. By scanning and extracting all files containing CSS styles, the plugin can ensure that both global styles and local styles are effectively captured, avoiding the risk of missing any color matching information.

[0033] Through the tapAsync hook mechanism, the plugin can process files in real-time during the asynchronous process of Webpack building, ensuring that all relevant CSS files can be captured during the building process and quickly extracting color matching information. This mechanism makes color matching more efficient, reduces waiting and blocking time, and ensures accurate analysis of each file. By precisely filtering out CSS files during the building process, the plugin can avoid unnecessary processing of non-CSS files and avoid interference from unrelated files. This technical effect significantly improves the performance of the plugin in complex projects, reduces resource occupancy of unrelated files, and ensures the efficient operation of the plugin in large-scale projects. Through flexible regular expression rules, the plugin can accurately extract color information in the project and ensure that the extracted data covers all possible color attributes. This high-precision extraction method ensures that all colors in the styles can be captured, reduces omissions and errors when developers manually search for colors, and improves the comprehensiveness and accuracy of color data. Allowing developers to customize regular expression rules, the plugin can be adjusted according to the specific needs of the project, enabling developers to cope with challenges of different stylesheet file structures and naming rules. This high degree of customization enables the plugin to be flexibly applied in various front-end projects and ensures adaptability. By capturing and extracting all relevant color matching attributes in the project, the plugin can provide developers with comprehensive color data statistics, ensuring that developers have a clear understanding of the usage of each color in the project. This comprehensive color matching analysis effect provides data support for subsequent tasks such as color matching specification revision and color replacement, improving the efficiency and quality of color matching management in the project. Automated color matching extraction and statistics enable developers to avoid omissions or errors that may occur during the tedious manual inspection process, especially in large-scale projects where the workload of manual inspection is huge and error-prone. The automated function of the plugin reduces this risk and improves the quality assurance of the project.

[0034] The data extraction module matches all CSS codes related to color matching through regular expressions, extracts color values and stores them as an object in key-value pair form, counts the number of occurrences of each color, and generates a color distribution data.

[0035] The data extraction module deeply analyzes the CSS files in the project by using efficient regular expressions to match all CSS properties related to colors. These properties may include color, background-color, border, border-top, border-bottom, etc. In this way, the module can comprehensively capture all color-related codes in the project, whether they are inline styles, class styles or ID styles, thus ensuring that all color data is extracted. After matching the color-related properties, the module further extracts the specific color values and stores them in the form of key-value pairs. The key is the name or type of the color, such as color, background-color, and the value is the actual color value used, such as #FF5733, rgb(255, 87, 51). Through this structured storage method, the color data is not only convenient for subsequent searching and analysis, but also can quickly integrate the usage of different colors in the project. While extracting the color values, the data extraction module counts the number of occurrences of each color in the entire project. This function can help developers understand the frequency of use of each color in the project, so as to conduct a more in-depth analysis of the color scheme. Frequently used colors may be the main colors of the design, while infrequently used colors may be auxiliary colors or special colors used occasionally. After extracting the color information and counting the frequencies, the module further generates a color distribution data, which is presented in json format and records information such as the number of uses of each color, color type, related file paths, etc. This color distribution data provides data support for subsequent color scheme optimization, color replacement, specification revision, etc., helping the development team better manage the color scheme during the actual development process. To ensure the efficiency of large-scale projects, the data extraction module has optimized the performance when using regular expressions, trying to avoid redundant matching and calculation operations. Through an efficient regular algorithm, the module can quickly screen out all CSS styles related to colors in a large project, avoiding inefficient traversal and repeated operations, and ensuring the response speed and processing ability of the plugin in large-scale projects. To be compatible with different color representation formats, the data extraction module not only supports extracting standard hexadecimal color values, but also supports other common color representation methods, such as rgb(), rgba(), hsl(), etc.

[0036] Through precise regular expression matching and comprehensive color extraction, the data extraction module can provide developers with a clear and comprehensive view of the color matching statistics for a project. This ability enables developers to gain in-depth understanding of each color in the project, assisting them in more scientific and systematic color matching management, especially in large projects with multiple modules and files. By counting the occurrences of colors and generating color distribution data, the module helps developers identify which colors are the main hues and which are secondary hues. This makes the color matching normalization process more intuitive and scientific. Developers can determine whether they need to uniformly replace colors that do not meet the specifications based on the frequency of color usage, thus optimizing the project's color matching scheme. By generating color distribution data, the module provides developers with rich data support to help them decide which colors need to be replaced with standard colors. For example, when a certain color appears frequently but does not conform to the design specifications, it can be given priority for replacement. In this way, color matching optimization becomes more targeted and data-driven. The automated color extraction and statistics function greatly reduces the workload of developers in manually searching for and counting color information, especially in large projects. Developers only need to focus on the color data and analysis results provided by the module, enabling them to make color matching adjustment and optimization decisions more quickly, thus saving a significant amount of time and effort. By storing color data as key-value pairs and recording the number of occurrences of colors and relevant file information, the module makes color matching auditing more convenient. Developers can easily view the specific application scenarios of a certain color in the project, including in which files and modules it is used, helping developers trace and audit the color matching rules in the project. As the project evolves and the color matching specifications are adjusted, the data extraction module can automatically update and generate the latest color distribution data. This dynamic update mechanism ensures the continuity and adaptability of the color matching specifications, enabling the project to maintain a unified color matching standard throughout the long-term development process.

[0037] It should be noted that in this article, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements not only includes those elements, but also includes other elements not expressly listed, or elements inherent to such process, method, article or device.

[0038] Although the embodiments of the present invention have been shown and described, those of ordinary skill in the art can understand that various changes, modifications, substitutions and variations can be made to these embodiments without departing from the principles and spirit of the present invention. The scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. webpack standard project color matching plug-in, characterized by: Includes global color matching variable setting module, color matching picking plug-in and data extraction module; The global color variable setting module configures global public color variables through style-resources-loader to define color specifications in the project; The color picking plug-in uses the hooks.emit.tapAsync asynchronous hook function of the compiler object in the callback to capture all packaged files, filter out all files containing CSS resources, and extract all color matching related properties through regular expressions; The data extraction module matches all CSS codes related to color matching through regular expressions, extracts color values ​​and stores them as objects in the form of key-value pairs, counts the number of times each color appears, and generates a set of color distribution data.

2. The webpack standard project color matching plug-in according to claim 1, characterized in that: The global color matching variable setting module further includes loading multiple color matching variable sets through a configuration file, allowing the project to use different color matching specifications in different development stages or different functional modules.

3. The webpack standard project color matching plug-in according to claim 1, characterized in that: The color picking plug-in further includes support for user-defined regular expression rules, allowing developers to flexibly define which CSS properties need to extract color information according to the actual needs of the project. When extracting color values ​​through regular expression matching, regular matching rules are used: Match the color attribute: color:[\d\D]+; Match the background attribute: background:[\d\D]+; Match border attribute: border:[\d\D]+; Match other related color attributes: border-top, border-bottom 。 4. The webpack standard project color matching plug-in according to claim 1, characterized in that: The data extraction module further includes converting the extracted color value into RGB format and processing it according to a specified conversion rule, wherein the conversion rule includes converting the hexadecimal color value into RGB format and performing tolerance processing on the color value.

5. The webpack standard project color matching plug-in according to claim 1, characterized in that: The plug-in matches the color values ​​that meet the specifications through the color range correspondence, defines the color range based on the RGB principle, and determines whether it belongs to the color range that meets the specifications by setting the tolerance value. The qualified color will be marked as needing to be replaced with the standard color matching variable.

6. The webpack standard project color matching plug-in according to claim 5, characterized in that: The plug-in will generate a set of modification suggestion data based on the matching color range and output it in json format. The modification suggestion data includes the colors that need to be replaced with standard colors, and provides corresponding color values, replacement suggestions and related file information for developers' reference.

7. The webpack standard project color matching plug-in according to claim 1, characterized in that: The plug-in provides a graphical interface for developers to view modification suggestion data, and supports selective batch replacement of non-compliant colors in the project, and real-time viewing of the effects after replacement.

8. The webpack standard project color matching plug-in according to claim 1, characterized in that: The plug-in supports version management of modifications and updates of color matching specifications through integration with version control systems, switches color matching specifications between different versions, and automatically updates related color data and modification suggestions.

Images