尝试Liferay前端非侵入式开发

时间:2014年11月13日 作者:剧中人

小剧最近一直在跟进一个Liferay的项目(Liferay是啥?),主要负责前端部分调整与优化。

开始工作了

介入项目初期,在团队Leader及小伙伴们的帮助下,着手在机器上部署Java环境、checkout项目文件,配置数据库等一堆堆相关事务。经过一番改造,我的电脑摇身一变,成了一台五脏俱全的开发机兼服务器。

感觉怪怪的

由于工作过程中需要运行Java环境、Tomcat服务器,机器的负载其实蛮大的。因为Liferay的特性,前端(Theme)的相关修改,都需要经过一段漫长Build过程才能生效,对我的生命也是一种浪费。这时我就一直在思考,能不能找到一种较为方便的开发方式。

尝试摸索

因为开发过程中,大部分工作量是花在CSS、JS的开发上,而且我们已经有一台基于稳定版本的测试机。按照之前的开发经验,小剧很自然的想到了Fiddler的AutoResponder功能(前端利器,请自行搜索)。若能通过AutoResponder来响应CSS、JS的请求,这样不就起到了前端的调试作用了么。

于是我尝试去找URL、文件的对应关系,但Liferay对Theme处理却让这一步需要做的事情更多。

一是项目访问的,永远只有一个合并后的CSS,二是Liferay的Theme有个复写机制(这也是我后来了解到的)。Theme自带一套的基础代码,任何需要修改的地方,都需要在_diffs目录下建立对应的目录,拷贝出一份源文件再进行修改。目录结构如下图所示。

liferay theme folder

开始去做

既然知道了Theme的工作原理,那么接下来要做的就是打磨工具(以CSS为例)。我使用的是NodeJS,经过一遍遍修正代码,工具最终完成了。工作原理大致是这样:监听Theme目录下CSS的任何改动,若有改动就会执行下面动作:

找到主文件,查找所需文件列表,逐条进入_diffs目录下查找,若无则回到主目录里查找,然后将找到的文件缓存下来。所有文件查找完毕,加上对应文件名等注释,写入一个新的文件里。

打磨成形的工具脚本

var fs = require('fs');
//获取文本内容
function getTxt(src){
 return fs.readFileSync(src,'utf-8');
}
//写文件
function write(src,str){
 fs.writeFileSync(src,str);
}
//文件是否存在
function hasFile(src){
 return fs.existsSync(src);
}
//创建文件
function createFile(projectDir,outputFilePath){
 console.log('\n\nget main css!\n');
 //获取主文件
 var mainTXT = getTxt(projectDir + 'css/main.css');
 var outoutString = '';
 //遍历需要合并的文件
 mainTXT.replace(/\@\i\m\p\ort\s\ur\l\((.+)?\)/g,function(a,b){
 outoutString += '\r\n/*------ concat start from ' + b + ' ------*/\r\n';
 if(hasFile(projectDir + '_diffs/css/' + b)){
 //在_diffs目录下查找
 console.log(' ' + b + ' > diffs');
 outoutString += getTxt(projectDir + '_diffs/css/' + b);
 }else{
 //进入主目录查找
 console.log(' ' + b);
 outoutString += getTxt(projectDir + 'css/' + b);
 }
 outoutString += '\r\n/*------ concat over from ' + b + ' ------*/\r\n';
 return a;
 });
 console.log('\nwrite css');
 //写入合并后的文件
 write(outputFilePath,outoutString);
 console.log('\nwork end !');
};
module.exports = function(projectDir,outputFilePath){
 console.log('\nstart watch project');
 projectDir = projectDir.replace(/\/$/,'') + '/';
 //监听目录改动
 fs.watch(projectDir + '_diffs/css/',function(type,file){
 console.log('\n\n' + file + ' changed' + new Date());
 createFile(projectDir,outputFilePath);
 });
 createFile(projectDir,outputFilePath);
};

项目中调用工具

var concatTool = require('./concat.js');
var config = {
 'mainPath' : 'D:/workspace/xxxx/docroot/',
 'outputPath' : 'D:/autoresponder/xxxx/main.css'
};
concatTool(config.mainPath,config.outputPath);

至此,我们完成了一件事情,能够随时创造出一个可以替代服务器上对应的CSS文件,而且未经压缩,更容易排查问题。接下来的任务就交给伟大的Fiddler,在AutoResponder里配置好服务器和本地的CSS路径,即可安心的敲自己的代码。

新的工作方式

新工具上马之后,Java环境再也没有启动过,Tomcat也从电脑上删除了,就连项目目录也只保留了Theme部分。开发过程变成了启动Fiddler,启动工具脚本(又写了个bat程序,双击即可)。倒上一杯咖啡(白开水),轻松开启的高富帅式的开发模式,妈妈再也不用担心的我代码。

PS:关于Autoresponder的配置

由于liferay版本控制,导致每次服务器发布关于Theme的部署,都会引起CSS路径的变化,每次开发前都要检查修改Autoresponder的配置,甚是麻烦。好在Autoresponder支持正则匹配(regex:.+/SCPortal-theme/css/main.css?.+),偷懒的我又省了一步操作。