筹建Web前端开发的持续构建环境

搭建Web前端开发的持续构建环境

Web前端开发的持续构建环境的搭建，主要完成以下几个目标：

?

可以采用jslint/jshint对js代码进行检查，并能够输出报表。能够运行js的UT，并输出报表。能够采用minify工具，对js、css代码进行压缩、合并，输出部署的代码，并且压缩、合并后，能够自动处理HTMl页面中的引用。以上所有的功能，能够集成到自动构建环境（jenkins)中自动执行，并且产生报表。能够根据配置，自动构建测试版本、发布版本，并且自动部署到相应的服务器上。

具体实现如下：
实现概述：采用Jenkins作为持续集成环境，采用ant作为构建工具，集成jslint4java, jsTestDriver, requriejs（r.js）来完成实际的构建工作，并把构建结果输出的指定的目录，Jenkins从指定的目录中读取结果并展示。
基础环境：

JavaAntJenkinsGit（可以采用其他源码控制系统）Nodejs

源码目录结构：

?
采用jslint对js代码进行检查，并输出报表

下载jslint4java。http://code.google.com/p/jslint4java/。jslint4java是一个java对jslint工具的封装，可以通过java执行jslint对js代码进行检查。并且，此项目提供了ant task，可以直接ant中调用执行。把下载的jar包（jslint4java-xxx.jar）放到build目录。在Ant脚本中增加如下代码：

? ? 参考：http://docs.jslint4java.googlecode.com/git/2.0.1/ant.html? ? 说明：实际上，是把jslint的检查结果输出成checkstyle的格式，Jenkins中有checkstyle插件可以读取这个格式
采用jsTestDriver执行js的UT
下载jsTestDriver。http://code.google.com/p/js-test-driver/，把下载的jar包放到build目录。jsTestDriver可以通过java，运行js编写的UT，并且可以同时指定多个浏览器运行环境同时运行。编写jsTestDriver的配置文件，放到build目录
? ?说明：jsTestDriver的运行输出的结果是junit格式的，Jenkins的Junit插件可以读取此结果。
采用requriejs的optimizer来压缩js, css
下载requirejs.js，放到scripts目录。下载r.js,放到build目录。http://requirejs.org/。目前，有很多js的minify工具，但是采用这些工具压缩、合并js代码后，html中的js、css引用不容易修改。采用requriejs来管理js代码，会比较容易处理这种情况。编写minify.bat，执行js, css代码的压缩
?HTML、JS、CSS代码index.html（根目录）
?JS代码（scripts目录）main.js
?安装Jenkins插件
Git plugincheckstyle pluginant, junit plugin在安装jenkins是已经自动安装
创建Jenkins项目
配置SCM。Git的仓库地址，分支名称（master）配置调用ant选中“Publish Checkstyle analysis results?”，文件地址输入"stat-result/jslintOutput/*.xml"选中“Publish JUnit test result report?”，文件地址输入“stat-result/jsUTOutput/*.xml”保存。运行Jenkins构建，可以在项目的主页上看到UT, jslint的运行结果，可以在target目录下面看到完整的压缩、合并后的js、css代码，和HTML代码。
根据配置，自动构建开发、测试、发布等版本，下一个博客再写。

?
 

 

查看更多 下一篇