一种制造技术

本发明专利技术提供的一个

【技术实现步骤摘要】
一种LESS源码压缩及变量动态替换开发方法


[0001]本专利技术涉及前端开发领域，尤其涉及一种
LESS
源码压缩及变量动态替换开发方法
。

技术介绍

[0002]第一，当前国内主流的前端开发包括
web
应用
、
移动端
H5、App
混合开发
、
微信小程序为代表的小程序开发等
。
[0003]在这类应用开发中，进行页面样式调节时，由于
CSS
代码浏览器兼容性不佳
,
语法具有较高的重复性，导致代码冗长和不易维护，且不具备编程能力，所以绝大部分应用开发者都会使用
CSS
预处理器包括
LESS、Sass、Stylus
等编程语言，为
CSS
添加一些编程特性，例如：变量
、
混入
、
嵌套
、
函数等，这样可以更方便的维护和管理
CSS
代码，让整个网页变得更加灵活可变
。
但是目前主流的浏览器如谷歌浏览器
、
火狐浏览器
、safari
等，还有使用了浏览器内核的
App
在渲染网页时都不支持
LESS
语法，所以在实际项目开发及发布中，应用开发人员都会将
LESS
文件通过特定的编译工具将其编译成
CSS
文件或类
CSS
文件再使用<br/>。
[0004]由于很多编译工具在这个过程中，不仅仅会将
LESS
文件编译为
CSS
文件，还会对生成的
CSS
文件进行压缩
、
兼容
、
浏览器适配
、
纠错等处理，不仅过程相对比较耗时，导致开发效率低，开发体验较差，而且生成的
CSS
文件体积有时还会比源文件更大，徒增了很多不必要的网络流量损耗
。
[0005]然而，在进行微信小程序开发时，目前较新版本微信开发者工具已经内置了“LESS”文件编译模块，支持以编译插件的形式，扩展编译功能
。
这种方式有两个好处：
[0006](1)
项目内只需要创建
LESS
文件即可，无需再编译生成同名的类
CSS
文件
(.wxss)。(
简单理解为微信小程序支持直接使用
LESS
文件进行样式调整
)
[0007](2)
编译流程由开发者工具控制，按需编译，开发体验更好
[0008]虽然开发者无需再自行编译
LESS
文件，但是项目源代码的
LESS
文件仍应该经过压缩混淆优化处理为发布文件后，再交由微信开发者工具处理
。
这样子不仅可以大幅减少发布文件的文件体积，还能对代码安全起到一定的保护作用
。
然而目前，并没有主流的针对
LESS
文件压缩优化工具
。
[0009]第二，作为前端开发人员都知道，在进行
web
应用开发时，特别是“前后端分离”架构开发模式下，一个项目往往是需要有对应的多套环境代码和服务的
。
例如，为了更快响应用户请求，加快页面渲染速度，提升用户体验，绝大多数前端静态资源使用
CDN
服务在做静态资源分发
。
为了避免开发测试环境资源与生产环境相互影响，同时在开发测试时，由于页面需要进行机型或者屏幕适配，部分资源如营销推广图
、
长背景图或者视频等，在开发环境上要频繁更换测试资源，以便做好兼容适配，所以静态资源服务需要做资源服务环境的区分，提供有多套环境分别供开发
、
测试
、
生产使用
。
[0010]第三，
2.1
直接使用
CSS
文件或
WXSS
文件编写页面样式
[0011]第四，浏览器
、
浏览器内核以及微信开发者工具都原生支持
CSS
或
WXSS
语法，不需
要做额外的编译转换处理即可直接使用
。
对于开发人员来说使用简单，没有额外的学习成本，适合在小微项目中使用
。
[0012]第五，
2.2
不区分环境，将
LESS
文件都编译为
CSS
文件或
WXSS
文件
。
[0013]第六，虽然浏览器不支持
LESS
语法，但浏览器
、
浏览器内核以及微信开发者工具都原生支持
CSS
或
WXSS
语法，加上现有
LESS
编译转换工具都已较为成熟，使用也简单
。
可以直接将
LESS
文件都编译为
CSS
文件或
WXSS
文件
。
这样既能免去直接使用
CSS
编程时代码臃肿，类名定义繁琐，存在浏览器兼容性问题，还能使用
LESS
提供的编程能力，代码更加简洁干净，更易于维护
。
[0014]第七，
2.3
使用
CDN
静态资源时，将资源地址写死在样式文件中，在需要切换不同环境环境部署时，手动修改切换在代码中的资源地址，再打包发布
[0015]第八，在
CDN
服务在做静态资源分发时，为了避免开发测试环境资源与生产环境相互影响，
[0016]第九，静态资源服务需要做资源服务环境的区分，提供有多套环境分别供开发
、
测试
、
生产使用
。
[0017]第十，然后一般在样式文件或者
HTML
文件引用静态资源的地址
。
由于测试
、
生产环境发布频率较低，资源地址切换修改简单，开发者可在编译打包前将资源地址修改为对应环境下的资源地址路径，再执行编译打包，进行部署，该方案也较为可行
。

技术实现思路

[0018]鉴于上述问题，提出了本专利技术以便提供克服上述问题或者至少部分地解决上述问题的一种
LESS
源码压缩及变量动态替换开发方法
。
[0019]根据本专利技术的一个方面，提供了一种
LESS
源码压缩及变量动态替换开发方法，所述开发方法包括：
[0020]定义
LessMinify
构造函数；
[0021]在
LessMinify
的
prototype
原本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种
LESS
源码压缩及变量动态替换开发方法，其特征在于，所述开发方法包括：定义
LessMinify
构造函数；在
LessMinify
的
prototype
原型上挂载
optimize
方法；定义
optimizer
优化器方法，当
LessMinify
的实例对象执行
optimize
方法时，
optimize
方法；采用
optimizer
优化器方法
。2.
根据权利要求1所述的一种
LESS
源码压缩及变量动态替换开发方法，其特征在于，所述定义
LessMinify
构造函数具体包括：定义
LessMinify
构造函数，构造函数接受
options
配置对象构造参数，作为初始化实例对象的配置参数；
options
对象可接受参数包括：
returnPromise
实例对象执行后是否返回
promise
可供链式调用
、compressLevel
压缩级别
、envParam
要被替换的环境变量
、outputType
输出形式
、outputPath
输出路径，为文件路径或文件夹路径
。3.
根据权利要求2所述的一种
LESS
源码压缩及变量动态替换开发方法，其特征在于，所述
outputType
输出形式具体包括：
CONTENT
文本内容，
FILE
文件
。4.
根据权利要求1所述的一种
LESS
源码压缩及变量动态替换开发方法，其特征在于，所述在
LessMinify
的
prototype
原型上挂载
optimize
方法具体包括：在
LessMinify
的
prototype
原型上挂载
op...

【专利技术属性】
技术研发人员：庄树杰，
申请(专利权)人：北银金融科技有限责任公司，
类型：发明
国别省市：