Why make this plug-in
Wechat small program from the end of 2016 internal test to now has more than 2 years, I believe that there are some small programs have been iterated for a very long time.
Like this small program there may be some longer history page or complex pages, page should be left some not used like this style, if when at that time did not leave comments that would be much trouble, if we through the human to find delete laborious, if you want to use tools to solve because of the specific architecture of small programs and without good tool, in this way, So that unused styles remain in the code, taking up the volume of the small program.
Gulp – CleanwxSS is a gulp plug-in specially made for wechat small program to remove useless styles.
The principle of
How does gulp-CleanwXSS statically analyze unused styles?
WXSS and WXML on each page of wechat applet exist in the same folder. If you find the WXSS file through gulp, you can find the WXML file. The first step is to transform WXML into a tree structure and get all the style selectors in WXSS. According to the rules of each selector, the tree structure transformed by WXML is searched for matching elements. If there are no matching elements, it is an unused selector.
advantage
What’s the advantage with other style cleaning tools or plug-ins?
Gulp-cleanwxss is a clean style plug-in specially made for wechat applets.
- The plugin can identify the class rendered by the wechat applet template. If the class rendered is a variable, it can be configured by the cssVariable parameter
- The template style of wechat applet can be modified through the page. The plug-in will identify the template and import tags to find out the template content, and check whether the page selector affects the template elements
- There are some default components with style attributes such as hover-class and placeholder class plug-ins will automatically check these attributes, if it is a custom component needs to configure componentsClass configuration.
- The log configuration in the plug-in can see what useless styles are removed from tasks and provides all the templates and dynamic class variables of the page for users to view
How to use
If you have not used gulp before, use NPM to install gulp globally
npm install gulp -g
Copy the code
Then in the wechat applet root directory
Initialize the NPM
npm init
Copy the code
Install gulp and gulp-CleanWXSS modules via NPM
npm install --save-dev gulp gulp-cleanwxss
Copy the code
Then add your gulpfile.js file
// gulpfile.js
const gulp = require( "gulp" );
const cleanwxss = require( "gulp-cleanwxss" );
gulp.task( "default", (done) => {
gulp.src( "./pages/**/**.wxss" )
.pipe( cleanwxss( {
log:true,
}))
.pipe( gulp.dest( "./dest"));Cleanwxss needs to trigger DONE for asynchronous processing to notify gulp that the task is overdone(); });Copy the code
Finally, type gulp in the terminal to execute the task
gulp
Copy the code
Pay attention to
Use gulP version 4.0.0 or later
GITHUB
Gulp – cleanwxss making address