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