gulp编译html中的less,使用插件less-plugin-functions让gulp-less支持自定义函数

在使用gulp-less预编译css的开发过程中，可能会遇到需要使用自定义函数的功能，比如，在开发移动端时，我们可能需要将px单位转为rem，可以通过自定义一个自定函数帮助我们转换，我们可以使用less-plugin-functions来实现。

1、在gulpfile.js中：

var gulp = require('gulp'),

less = require('gulp-less'),

lessFunctions = require('less-plugin-functions'), //1.less function插件

lessFn = new lessFunctions(); //2.创建一个实例

gulp.task('less', ['sprite'], function () {

gulp.src('src/less/index.less')

.pipe(less({

plugins: [lessFn] //3.使用插件

}))

.pipe(gulp.dest('src/css'));

});

这样我们就能使用less的自定义函数功能

2、假设在index.less文件中：

.function {

//定义一个函数

.px2rem(@px) {

return: unit(@px/192, rem); //根据实际情况换算

}

}

//使用

.box{

width:px2rem(720px);

height:px2rem(384);

}

3、编译后的index.css则是：

.box{

width:3.75rem;

height:2rem;

}