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;

}

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

php 模板自定义函数调用,thinkphp模板中使用自定义函数
注意:自定义函数要放在项目应用目录/common/common.php中. 这里是关键. 模板变量的函数调用格式:{$varname|function1|function2=arg1,arg2,### ...
gulp编译css_如何用gulp缩小CSS
gulp编译css by Vinicius Gularte 由Vinicius Gularte 如何用gulp缩小CSS (How to minify your CSS with gulp) In t ...
React入门教程第三课--gulp编译优化
上节课中我提到了,在gulpfile中编写task编译js和sass的task. 然后在项目中使用时发现,当项目内容越写越多时,编译速度会越来越久. 看了一下编译过程.上次gulpfile中的定义是当 ...
使用gulp编译 sass和less
Gulp是一个基于流的自动化构建工具,可以帮我实现很多的功能,比如代码编译.压缩等等. 网址:https://www.gulpjs.com.cn/ 个人对gulp的一个简单理解以下只是使用gulp编 ...
Gulp 编译Less和Sass
在实际应用中,我们一般会使用 CSS 的预处理器来编写 CSS 代码,例如 Less 和 Sass 语言,通过将脚本解析成 CSS 的脚本语言,可以减少 CSS 的重复,也可以节省时间. 本节我们来学 ...
gulp前端自动化构建工具：常用插件介绍及使用
Gulp是基于Node.js的一个构建工具(自动任务运行器),开发者可以使用它构建自动化工作流程(前端集成开发环境).一些常见.重复的任务,例如:网页自动刷新.CSS预处理.代码检测.压缩图片.等 ...
Gulp编译、合并、压缩，以及Browsersync实时刷新教程
之前项目中一直用的都是gulp-livereload,用gulp-webserver启服务器,来实现浏览器实时刷新,但是每一次更新代码重新编译有点慢.之后各种找原因改解决方案. 方案一:加入gulp- ...
gulp编译less简单demo
写个简单的less.watch任务的demo分享---- 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
Jenkins中安装Credentials Binding插件实现凭证管理与安装Git插件和拉取代码构建项目
场景 CentOS中Jenkins的下载.安装.配置与启动(图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/11649 ...
【转】Dynamics 365中开发和注册插件介绍
是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面的 ...

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

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

最新文章

热门文章