Gulp-less编译calc报错——已解决（正则）

为了在小程序项目中使用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全部自动转化也可以。