清除微信小程序wxss文件中不使用的class
首先,安装gulp-cleanwxss作为开发依赖项:
npm install --save-dev gulp-cleanwxss
然后添加到 gulpfile.js
:
var cleanwxss = require('gulp-cleanwxss');
gulp.task('clean-wxss', function(done){
gulp.src('wcjs_wx_miniprogram/pages/**/**.wxss')
.pipe(cleanwxss())
.pipe(gulp.dest('build/'));
// cleanwxss为异步处理 需要触发done来通知gulp任务已经结束
done();
});
Type: Object
Type: Boolean
Default: false
如果设置true 在执行gulp任务时会打印一些信息提供给开发者:
PageUseTmplate: 页面中使用到的模板名字
CssVariables: 页面中使用到的CSS变量
Delete:插件删除掉的样式选择器
Type: String
Default: ‘’
微信小程序根目录的位置,如果没有传则默认使用调用gulp时目录的位置
Type: Object
Default: {}
如果你在class中使用到了模版变量 如 class=“{{ classname }}”,请配置这个参数:
var cleanwxss = require('gulp-cleanwxss');
gulp.task('clean-wxss', function(){
gulp.src('wcjs_wx_miniprogram/pages/**/**.wxss')
.pipe(cleanwxss({
cssVariable:{
variablename:['classname1','classname2']
}
}))
.pipe(gulp.dest('build/'));
});
Type: Object
Default: {}
如果你的微信小程序页面中使用的自定义组件配置了外部样式类:
Component({
externalClasses: ['my-class']
})
请配置这个参数:
var cleanwxss = require('gulp-cleanwxss');
gulp.task('clean-wxss', function(){
gulp.src('wx_miniprogram/pages/**/**.wxss')
.pipe(cleanwxss({
componentsClasses:{
'my-class':['classname1','classname2']
}
}))
.pipe(gulp.dest('build/'));
});
微信自带组件中的外部样式类无需额外配置