我的LESS编译方案
背景
近期项目前端决定使用less,简单介绍一下,详细信息有兴趣查看官方文档(http://www.lesscss.net/article/home.html)
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
简单来说,它自定义了一套语法规则,在css中提供公共变量的抽取,简单的函数运算等功能,最终通过编译器或解析器将其编译或解析为相对应的css代码。
但是LESS文件在何时编译成为一个值得关注的问题,按照常规方式由几种方案
1、前端人员手工将less文件编译为css,并在页面引入css文件
这种方案前端人员工作量会比较大,同时维护less文件和css文件,多人编辑同一个文件时很容易出错,并且多版本并行时合并代码不方便,一点点细微的改动都要重新编译文件
2、页面引入less文件,项目编译时使用插件统一进行预编译
该方案要求所有开发人员都要安装编译环境(nodejs和less),并且文件修改后都要重新编译项目才能看到效果
3、页面引入less文件和js解析文件,在页面上将less解析为css
其实对于互联网项目来说,这种方式基本不会考虑在线上运营,执行效率太低
LESS的两种编译方式
1、页面引入js代码文件解析
首先引入less代码
<link rel="stylesheet/less" href="example.less" />
然后引入解析代码
<script src="lesscss-1.4.0.min.js"></script>
解析代码会根据rel属性类型通过ajax方式拉取less代码,然后并解析成css后追加到页面
2、服务端预编译
官方提供了基于node.js的编译工具lessc
首先全局安装less
npm install -g less
然后直接使用less编译即可
lessc example/example.less example/example.css
方案基本思路
鉴于上述原因,经与前端商量后决定制定一套较为平衡的方案,即:
开发环境使用方式1,不用所有开发人员安装环境,降低开发成本,避免每次修改后都编译
其他环境使用方式2,预编译less文件,提高页面加载速度
方案概括
<script src="lesscss-1.4.0.min.js"></script>
var fs = require('fs'),
path = require('path'),
exec = require('child_process').exec,
sourcePath, targetPath; //获取命令行中的路径
process.argv.forEach(function (val, index, array) {
if (index == 2) {
sourcePath = val;
}
if (index == 3) {
targetPath = val;
}
}) var lessc = function (rootPath, targetPath) {
//取得当前绝对路径
rootPath = path.resolve(rootPath);
//目标路径绝对路径
targetPath = path.resolve(targetPath);
//判断目录是否存在
fs.exists(rootPath, function (exists) {
//路径存在
if (exists) {
//获取当前路径下的所有文件和路径名
var childArray = fs.readdirSync(rootPath);
if (childArray.length) {
for (var i = 0; i < childArray.length; i++) {
var currentFilePath = path.resolve(rootPath, childArray[i]);
var currentTargetPath = path.resolve(targetPath, childArray[i])
//读取文件信息
var stats = fs.statSync(currentFilePath);
//若是目录则递归调用
if (stats.isDirectory()) {
lessc(currentFilePath, currentTargetPath);
} else {
//判断文件是否为less文件
if (path.extname(currentFilePath) === ".less") {
var newFilePath = path.resolve(targetPath, path.basename(currentFilePath, '.less') + ".css");
if (!fs.existsSync(targetPath)) {
fs.mkdirSync(targetPath);
}
console.log(newFilePath);
exec("lessc -x " + currentFilePath + " > " + newFilePath);
}
}
}
}
} else {
console.log("directory is not exists");
}
});
} lessc(sourcePath, targetPath);
5、使用maven插件maven-antrun-plugin,在编译打包前执行第4部的脚本预编译less文件
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-antrun-plugin</artifactId>
<version>1.7</version>
<executions>
<execution>
<phase>generate-sources</phase>
<configration>
<tasks>
<echo>
------------node less-compiler.js-------------
</echo>
<exec executable="node" dir="${project.basedir}/src/main/webapp/assets/less" failonerror="true">
<arg line="less-compiler.js ${project.basedir}/src/main/webapp/assets/less
${project.basedir}/src/main/webapp/assets/css"/>
</exec>
<echo>
------------compiler success-----------------
</echo>
</tasks>
</configration>
<goals>run</goals>
</execution>
</executions>
</plugin>
总结
思路其实很简单,通过区分项目运行环境,兼得两种编译方式的优点
任何工具都不应当直接拿来使用,通过合适的定制使其更加适合自身项目开发
我的LESS编译方案的更多相关文章
- LESS编译方案
我的LESS编译方案 2013-08-07 10:22 by 逆风之羽, 469 阅读, 2 评论, 收藏, 编辑 背景 近期项目前端决定使用less,简单介绍一下,详细信息有兴趣查看官方文档(htt ...
- Freeline--Android平台上的秒级编译方案
Freeline 技术揭秘 Freeline是什么? Freeline是蚂蚁金服旗下一站式理财平台蚂蚁聚宝团队15年10月在Android平台上的量身定做的一个基于动态替换的编译方案,5月阿里集团内部 ...
- iOS自动化编译方案
本文主要来源以下Bryce Zhang博主的文章,感谢博主的无私分享,转载请注明出处,尊重原创 然,根据Bryce Zhang文章进行实践过程中遇到一些问题,解决后在此做相应的总结.大神请绕道,觉得低 ...
- CSS预编译与PostCSS以及Webpack构建CSS综合方案
CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...
- 【转】实践最有效的提高Android Studio运行、编译速度方案
原文:https://blog.csdn.net/xwh_1230/article/details/60961723 实践最有效的提高Android Studio运行.编译速度方案 最有效提升Andr ...
- Android Freeline加速编译App方案 使用和总结
Freeline简单介绍 在Android Studio还没推出Instant Run功能之前,每次改动Android project项目时都要将整个项目又一次编译一次,然后再将资源和代码文件打包成A ...
- QGIS源码编译步骤详解——官方新方案
目录 源码下载 环境下载 Cygwin64 OSGeo4W CMAKE Visual Studio 2017 环境配置 配置 编译 方案详细可见源码文件中INSTALL.md. 源码下载 QG ...
- C/C++的编译器|编译环境(非常全面的比较)
C/C++编译器的一些易混淆概念,总结一下. 关于什么是Unix-like操作系统,常见操作系统间差异,什么是操作系统接口等等,请参考<操作系统宝鉴>. C/C++编译器有哪些? 首先是如 ...
- .NET 代码编译过程
作为一种代码指令平台,Microsoft .NET比微软公司先前推出的其他技术平台要来得更为复杂.由于.NET提供了对多种编程语言以及(在理论上说)多重平台的支持,这就需要在传统的两个代 码层添加一个 ...
随机推荐
- 【学习篇:他山之石,把玉攻】jquery实现调用webservice
1.webservice端 using System; using System.Collections.Generic; using System.Web; using System.Web.Ser ...
- DataGridView回车焦点横向移动
protected override bool ProcessCmdKey(ref Message msg, Keys keyData) { if (keyData ...
- 解决“添加远程依赖方式没有效果”的bug
1.添加远程依赖dependencies的compile方式
- MR操作
MR操作————Map.Partitioner.Shuffle.Combiners.Reduce 1.Map步骤 1.1 读取输入文件,解析成k-v对,其中每个k-v对调用一次map函数 1.2 写自 ...
- 【CentOS】安装RPM包或者源码包
一.rpm (是Redheat Package Manager的简称) 如果光驱中还有系统安装盘的话, 1.先挂载光驱, mount /dev/cdrom /mnt/ 2.cd /mnt/ 3.cd ...
- 如何解决插入Oracle数据中文为乱码问题
1.首先,Oracle查询编码:select * from v$nls_parameters;//看看是否GBK 2.如果是用Servlet或者别的,插入数据之前输出一下,看看是否乱码.比如: doP ...
- [转]Windows7文件夹转移清理臃肿的C盘
当你使用Windows的时候,你会发现无论哪个版本的Windows,系统都会默认将用户文件夹和程序数据文件夹(xp下是Documents and Settings文件夹,而windows7和vista ...
- Python for Infomatics 第14章 数据库和SQL应用一(译)
14.1 什么是数据库 数据库一种存储结构数据的文件.绝大多数数据库类似字典——映射键和值的关系.最大的区别是数据库是保存在硬盘或其它永久性的存储上,所以在程序结束后它仍然存在.而保存在内存中的字典容 ...
- 统计学习方法 --- 感知机模型原理及c++实现
参考博客 Liam Q博客 和李航的<统计学习方法> 感知机学习旨在求出将训练数据集进行线性划分的分类超平面,为此,导入了基于误分类的损失函数,然后利用梯度下降法对损失函数进行极小化,从而 ...
- CentOS 7 学习笔记(一)时间管理
1 获取当前时间 [root@limt01 ~]# date 2015年 05月 22日 星期五 01:30:50 CST 2 获取当前日期 [root@limt01 ~]# date "+ ...