尝试Liferay前端非侵入式开发

小剧最近一直在跟进一个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目录下建立对应的目录，拷贝出一份源文件再进行修改。目录结构如下图所示。

开始去做

既然知道了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?.+)，偷懒的我又省了一步操作。