`

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

 
阅读更多

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

 

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

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

基础环境:
  1. Java
  2. Ant
  3. Jenkins
  4. Git(可以采用其他源码控制系统)
  5. Nodejs
源码目录结构:


 
采用jslint对js代码进行检查,并输出报表
  1. 下载jslint4java。 http://code.google.com/p/jslint4java/。 jslint4java是一个java对jslint工具的封装,可以通过java执行jslint对js代码进行检查。并且,此项目提供了ant task,可以直接ant中调用执行。
  2. 把下载的jar包(jslint4java-xxx.jar)放到build目录。
  3. 在Ant脚本中增加如下代码:
<taskdef name="jslint"
           classname="com.googlecode.jslint4java.ant.JSLintTask"
           classpath="./build/jslint4java-2.0.2.jar" />
	
	<target name="jslint" depends="clean">
		<mkdir dir="${stat.result.folder}/jslintOutput"></mkdir>
		<jslint failureProperty="false" haltOnFailure="false">
			<formatter type="checkstyle" destfile="${stat.result.folder}/jslintOutput/jslintresult.xml"/>
			<fileset dir="scripts">
				<include name="**/*.js"/>
				<exclude name="require.js"/>
			</fileset>
		</jslint>
	</target>	
    说明:实际上,是把jslint的检查结果输出成checkstyle的格式,Jenkins中有checkstyle插件可以读取这个格式

采用jsTestDriver执行js的UT
  1. 下载jsTestDriver。 http://code.google.com/p/js-test-driver/,把下载的jar包放到build目录。 jsTestDriver可以通过java,运行js编写的UT,并且可以同时指定多个浏览器运行环境同时运行。
  2. 编写jsTestDriver的配置文件,放到build目录
server: http://localhost:9876

load:
  - ../scripts/*.js
  - ../scripts-test/*.js
 
    3.  在ant中,采用java task调用 jsTestDriver来运行编写的ut
<target name="jsut" depends="clean">
		<mkdir dir="${stat.result.folder}/jsUTOutput"></mkdir>
		
		<java jar="build/JsTestDriver-1.3.4.b.jar" fork="true" failonerror="true">
			<arg value="--port"/>
			<arg value="9876"/>
			<arg value="--config"/>
			<arg value="build/jsTestDriver.conf"/>			
			<arg value="--browser"/>
			<arg value="C:\Users\juns6831.CHN\AppData\Local\Google\Chrome\Application\chrome.exe"/>
			<arg value="--tests"/>
			<arg value="all"/>
			<arg value="--testOutput"/>
			<arg value="${stat.result.folder}/jsUTOutput"/>			
		</java>
	</target>
   说明:jsTestDriver的运行输出的结果是junit格式的,Jenkins的Junit插件可以读取此结果。

采用requriejs的optimizer来压缩js, css
  1. 下载requirejs.js,放到scripts目录。下载r.js,放到build目录。 http://requirejs.org/。目前,有很多js的minify工具,但是采用这些工具压缩、合并js代码后,html中的js、css引用不容易修改。采用requriejs来管理js代码,会比较容易处理这种情况。
  2. 编写minify.bat,执行js, css代码的压缩
node r.js -o name=main out=../%1/scripts/main.js baseUrl=../scripts
node r.js -o cssIn=../css/main.css out=../%1/css/main.css optimizeCss="standard.keepLines"
     3.  采用ant的exec task,调用minify.bat,执行压缩
<target name="minify" depends="clean">		
		<exec executable="cmd" osfamily="windows" dir="build" failonerror="true">
			<arg value="/c"/>
			<arg value="minify.bat"/>
			<arg value="${target.folder}"/>
			<arg value="-p"/>			
		</exec>
	</target>
 
HTML、JS、CSS代码
index.html(根目录)
<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>        
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>
 JS代码(scripts目录)
main.js
require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
	
	console.log("util js loaded.");
	console.log(util.a + ',' + util.b);
});
 GreatTest.js
GreeterTest = TestCase("GreeterTest");

GreeterTest.prototype.testGreet = function() {
  var greeter = new myapp.Greeter();
  assertEquals("Hello World!", greeter.greet("World"));
  jstestdriver.console.log("JsTestDriver", greeter.greet("World"));
  console.log(greeter.greet("Browser", "World"));
};

GreeterTest.prototype.testGreet3 = function() {
  var greeter = new myapp.Greeter();
  assertEquals("Hello World!", greeter.greet("World3"));
  jstestdriver.console.log("JsTestDriver", greeter.greet("World3"));
  console.log(greeter.greet("Browser", "World3"));
};

GreeterTest2 = TestCase("GreeterTest2");

GreeterTest2.prototype.testGreet2 = function() {
  var greeter = new myapp.Greeter();
  assertEquals("Hello World2!", greeter.greet("World2"));
  jstestdriver.console.log("JsTestDriver", greeter.greet("World2"));
  console.log(greeter.greet("Browser", "World2"));
};
 main.css
@import url("common.css");
body{
	color:red
}
 common.css
body{
	font-size:14px;
}

Ant脚本
<project name="js build" default="install" basedir=".">	
	<property name="target.folder" value="target" />
	<property name="stat.result.folder" value="stat-result" />	
	<property name="tomcat.webapp" value="D:\apache-tomcat-6.0.32\webapps"></property>
	
	<taskdef name="jslint"
           classname="com.googlecode.jslint4java.ant.JSLintTask"
           classpath="./build/jslint4java-2.0.2.jar" />
	
	<target name="jslint" depends="clean">
		<mkdir dir="${stat.result.folder}/jslintOutput"></mkdir>
		<jslint failureProperty="false" haltOnFailure="false">
			<formatter type="checkstyle" destfile="${stat.result.folder}/jslintOutput/jslintresult.xml"/>
			<fileset dir="scripts">
				<include name="**/*.js"/>
				<exclude name="require.js"/>
			</fileset>
		</jslint>
	</target>		
	
	<target name="jsut" depends="clean">
		<mkdir dir="${stat.result.folder}/jsUTOutput"></mkdir>
		
		<java jar="build/JsTestDriver-1.3.4.b.jar" fork="true" failonerror="true">
			<arg value="--port"/>
			<arg value="9876"/>
			<arg value="--config"/>
			<arg value="build/jsTestDriver.conf"/>			
			<arg value="--browser"/>
			<arg value="C:\Users\juns6831.CHN\AppData\Local\Google\Chrome\Application\chrome.exe"/>
			<arg value="--tests"/>
			<arg value="all"/>
			<arg value="--testOutput"/>
			<arg value="${stat.result.folder}/jsUTOutput"/>			
		</java>
	</target>
	
	<target name="minify" depends="clean">		
		<exec executable="cmd" osfamily="windows" dir="build" failonerror="true">
			<arg value="/c"/>
			<arg value="minify.bat"/>
			<arg value="${target.folder}"/>
			<arg value="-p"/>			
		</exec>
	</target>
	
	<target name="build" depends="jslint,jsut,minify">
		<copy todir="${target.folder}">
			<fileset dir="${basedir}">
				<include name="*.html"></include>				
			</fileset>			
		</copy>
		<copy file="scripts/require.js" todir="${target.folder}/scripts"></copy>
	</target>
	
	<target name="install" depends="build">
		<mkdir dir="${tomcat.webapp}/jsci"></mkdir>
		<copy todir="${tomcat.webapp}/jsci">
			<fileset dir="${target.folder}"></fileset>
		</copy>
	</target>		
	
	<target name="clean">
		<delete dir="${target.folder}"></delete>	
		<delete dir="${tomcat.webapp}/jsci"></delete>
		<delete dir="${stat.result.folder}"></delete>
	</target>

</project>
 
安装Jenkins插件
  1. Git plugin
  2. checkstyle plugin
  3. ant, junit plugin在安装jenkins是已经自动安装
创建Jenkins项目
  1. 配置SCM。Git的仓库地址,分支名称(master)
  2. 配置调用ant
  3. 选中“ Publish Checkstyle analysis results ”,文件地址输入"stat-result/jslintOutput/*.xml"
  4. 选中“ Publish JUnit test result report ”,文件地址输入“stat-result/jsUTOutput/*.xml”
  5. 保存。
  6. 运行Jenkins构建,可以在项目的主页上看到UT, jslint的运行结果,可以在target目录下面看到完整的压缩、合并后的js、css代码,和HTML代码。
根据配置,自动构建开发、测试、发布等版本,下一个博客再写。

 

  • 大小: 13.5 KB
分享到:
评论

相关推荐

    用Vue-cli快速构建web前端项目

    用Vue-cli快速构建web前端项目 Vue-cli 是Vue.js的脚手架,用于自动生成Vue.js模板工程的。Vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发...

    nodejs前端自动化构建环境的搭建

    为了UED前端团队更好的协作开发同时提高项目编码质量,我们需要将Web前端使用工程化方式构建; 目前需要一些简单的功能:  1. 版本控制  2. 检查JS  3. 图片合并  4. 压缩CSS  5. 压缩JS  6. 编译SASS 这些...

    Web前端开发第一季:HTML

    本系列课程是专门为零基础学习Web前端开发的朋友准备的,老师将多年的教学经验与案例相结合,深入浅出,循序渐进,让大家轻松的进入Web开发行业。 本系列课程主要讲述Web开发的前端技术:html、css、JavaScript,...

    轻量级Web应用开发

    介绍了环境配置与工具准备、Web应用服务器、数据库访问层、客户端框架、CSS框架、客户端测试框架、现代的前端开发方式、编写更容易维护的JavaScript代码、本地构建、持续集成、单元测试与集成测试、环境搭建的自动化...

    WijmoJS 前端开发工具包 2018V1历史版本的下载包

    WijmoJS 凭借先进的触控设计、全面的框架支持、顶级的控件性能、零依赖的产品特性和易用、轻松的操作体验,全面满足前端开发所需,已成为构建企业 Web 应用程序最高效的纯前端开发工具包。 与此同时,WijmoJS 的...

    前端开发工程师专用简历模板

    作为前端开发工程师,您的简历应该突出您的技能和经验,以吸引潜在的雇主。下面是一个前端开发工程师专用简历模板描述的示例: 个人简介: 我是一名有着X年前端开发经验的工程师,对于Web开发和用户体验有着深入的...

    WijmoJS 前端开发工具包 2018V2历史版本的下载包

    WijmoJS 凭借先进的触控设计、全面的框架支持、顶级的控件性能、零依赖的产品特性和易用、轻松的操作体验,全面满足前端开发所需,已成为构建企业 Web 应用程序最高效的纯前端开发工具包。 与此同时,WijmoJS 的...

    用Go+Vue.js快速搭建一个Web应用(初级demo)

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式。本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo)。 环境准备: 1. 安装go语言,配置go开发环境; 2. 安装node.js以及npm...

    web-apps:ONLYOFFICE Document Server的前端,用于构建程序界面

    该存储库称为web-apps-pro项目信息官方网站: : 代码存储库: : SaaS版本: : 用户反馈和支持如果您对有任何疑问或疑问,请访问我们的官方论坛以找到您的问题的答案: 或者您可以在上询问和回答ONLYOFFICE开发问题...

    web3D构建三维房间空间(three.js)

    web3D构建,根据房间二维平面图构建了三维空间图,可实现房间开关门,移动,旋转,可各个角度观察房屋,使用了threejs库

    NodejsDev:自用web开发框架,基于Node.js,web服务使用express进行搭建,使用gRPC进行前后端服务通信,整合前端打包工具webpack

    Lc Framework(LcF自用web开发框架)站在巨人的肩膀上简单介绍此项目是基于Node.js(全栈js,es6),Web服务使用express进行搭建,使用gRPC进行前后端服务通信,整合前端打包工具webpack(可替换gulp).小可构建一个...

    python全栈应用开发精益实践

    本书可以为读者构建出清晰、完整的Web开发体系,包括:前端、后 台的技术选型,搭建构建系统,如何上线部署,并进⾏数据分析,以及如 何在其中结合最好的⼯程实践等。 希望作为读者的你,可以将本书当作⼀本索引书籍...

    详解Web使用webpack构建前端项目

    好久没写技术博客了, 原因在于最近在学习前端方面的技术, 熟悉我的同学都知道, 之前我有使用Vue搭建了一个个人简历, 体验了一把最新的前端技术, 但之前我们使用的是vue-cli脚手架工具, 对于如何自己实现前端构建工具...

    Golang 搭建 Web 聊天室

    因为 Web 端的话目前就 Websocket 协议支持。 Http 协议是单向传输协议,只能由客户端主动发送消息给服务端。而在我们的聊天室中,一个用户发送消息后, 聊天室其他用户会收到消息通知。如果用 Http 协议去实现的...

    基于Nodejs+Express+MongoDB+jQuery+Bootstrap搭建的电影网站

    3、本地开发环境搭建: 使用gulp集成jshint对JS语法检查,加入browser-sync与nodemon,实现实时刷新及服务器的自动重启等功能。 4、网站整体功能: 网站正常访问无需管理员权限,对电影的评论及个人中心资料的修改,...

    基于gulp构建的jQueryBootstrapPC端WEB项目

    基于gulp构建的 jQuery Bootstrap PC端WEB项目

    基于Go+Sqlite+React+Antd搭建个人记账web端源码+项目介绍.zip

    基于Go+Sqlite+React+Antd搭建个人记账web端源码+项目介绍.zip 【项目资源介绍】 调整后端接口路由,统一加上 /api 前缀 重构前端代码架构 - 重构 api 结构 支持 docker-compose 构建部署 启动方法: docker-compose...

    h:前端开发课程的练习集中地

    移动web APP开发 小程序应用 主流框架构建应用 综合实践 课程内容 课程资源 学习方法 牛刀小试 开发环境部署 Hbuilder Chrome Hello World 初识HTML 初见建筑师HTML HTML概念 HTML基本语法 HTML标签与属性 识别HTML ...

    GMTC北京 2017年全球前端技术大会PPT合集(46份).zip

    使用TensorFlow搭建智能开发系统,自动生成App UI代码 android客户端Walle框架演进与实践之路 反作弊技术架构与设计 共享代码衍生多款应用的定制框架及经验分享 混合应用平台构建实战 在前端服务化上的实践与探索 ...

    基于Spring Boot + Mybatis + Mybatis Plus搭建的快速开发平台

    ifast是一款基于Spring Boot + Mybatis + Mybatis Plus...以Spring Boot为基础框架,Mybatis plus为数据访问层, Apache Shiro为权限授权层,Ehcahe对常用数据进行缓存,基于Bootstrap构建的Admin LTE作为前端框架。

Global site tag (gtag.js) - Google Analytics