为了在小程序项目中使用Css预处理器less,就搭建了gulp对项目代码进行打包，使用gulp-less时，对老代码wxss转换成less时出现calc转换问题，此时在将less编译成wxss(css)问题就出现了（你懂得）。
也借鉴了网友的一些解决方案，感觉不是太好用，下面给出我的方案，就是一个正则而已！
//核心：对文件流进行正则匹配
.pipe(replace(/calc\((.*)\);/g, function(match,p1){
return match.replace(/calc\((.*)\);/g,`calc(~'$1${''}');`)
}))
less中正确的calc写法如下：
.the-input{
width: calc(~'100% - 60px'); //注意：less中必须是这个形态，less -> wxss(css)时才能正确转换
}
使用gulp-less转换之后的css如下：
.the-input{
width: calc(100% - 60px); //这里还是css中能识别的写法，注意-两边的空格哟
}
下面是wxss转换成less的全部task代码：
/**
* 兼容老项目只有wxss没有less文件的情况，此处反向转换保持开发时只在less文件上书写css
*/
function wxssToLess() {
return src(path.wxssPath, {
base: 'src/'
})
.pipe(plumber()) //防止因gulp插件错误而导致管道中断
.pipe(replace(/calc\((.*)\);/g, function(match,p1){ //这个管道是匹配css中所有calc变成gulp-less能正确转换的less样式
return match.replace(/calc\((.*)\);/g,`calc(~'$1${''}');`) //对匹配到的内容进行处理
}))
.pipe(Print(filepath => `build less: ${filepath}`))
.pipe(rename((path)=> { path.extname = '.less' }))
.pipe(dest('src/'))//输出到src/，这里会根据加载路径path.wxssPath自动将重新命名的.less存放到path.wxssPath路径
}
总结：
在使用gulp-less时，书写的时候还是要留意calc，如果不想手动处理，可以开一个task对less文件监听，遇到calc全部自动转化也可以。
