文档章节

UglifyJS压缩jsp里面的js代码和js文件

char87v5
 char87v5
发布于 2012/05/22 22:16
字数 626
阅读 535
收藏 2
如果你不知道UglifyJS就out了,jquery的官方压缩工具啦~ 

本来UglifyJS没有windows的客户端压缩工具,后来自己参照YUI的BAT工具(好像是淘宝一个哥们写的)改写了一个,具体见下面的说明。

UglifyJS
安装指南
=========
安装步骤:
0. 安装nodejs运行环境:http://nodejs.org/,设置nodejs的安装目录到PATH中,一句话CMD中输入 node --version:
--->C:\Users\xin>node --version
--->v0.6.15
1. 安装请点击 install.cmd
2. 卸载请点击 uninstall.cmd
3. 如果安装过之前的版本,请先卸载老版本
压缩测试:
选中 test.js, 执行右键菜单“Process with UglifyJS”,会生成 test-min.js.

jsp里面的script标签只能是:"<script>"和'<script type="text/javascript">',其他的自己加入吧,查找代码:text.indexOf('<script type="text/javascript">') 

当然我觉得这个工具最好能支持压缩jsp里的js代码啦,所以自己看了下bin下面的uglifyjs文件,无非就是一些js的函数,找到了修改代码的切入点:output(squeeze_it(text)),接下来就好办了,下图为修改前后的对比


最后附上maven下面的压缩脚本: 

<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-resources-plugin</artifactId>
				<version>2.5</version>
				<executions>
					<execution>
						<id>copy-config</id>
						<goals>
							<goal>copy-resources</goal>
						</goals>
						<phase>compile</phase>
						<configuration>
							<outputDirectory>${project.build.directory}</outputDirectory>
							<resources>
								<resource>
									<directory>src/test/resources</directory>
									<includes>
										<include>uglify/*</include>
										<include>uglify/lib/*</include>
									</includes>
								</resource>
							</resources>
						</configuration>
					</execution>
				</executions>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-antrun-plugin</artifactId>
				<version>1.7</version>
				<executions>
					<execution>
						<phase>install</phase>
						<goals>
							<goal>run</goal>
						</goals>
						<configuration>
							<target>
								<echo message="开始用uglifyjs压缩 JSP 文件. 请耐心等待!" />
								<property name="uglifyjs" value="${project.build.directory}/uglify/uglifyjs" />
								<property name="jsp.compress.directory" value="${project.build.directory}/${project.build.finalName}/WEB-INF" />
								<apply executable="node" parallel="false" failonerror="true" dest="${jsp.compress.directory}">
									<fileset dir="${jsp.compress.directory}" includes="**/*.jsp" />
									<arg line=" ${uglifyjs}" />
									<arg line=" --ascii" />
									<arg line=" -o" />
									<targetfile />
									<srcfile />
									<mapper type="regexp" from="^(.*)\.(jsp)$" to="\1-min.\2" />
								</apply>
								<move todir="${jsp.compress.directory}">
									<fileset dir="${jsp.compress.directory}" includes="**/*.jsp" />
									<mapper type="regexp" from="^(.*)-min\.(jsp)$" to="\1.\2" />
								</move>
								<echo message="成功用uglifyjs压缩 JSP 文件" />
								
								<echo message="开始用uglifyjs压缩 JS 文件. 请耐心等待!" />
								<property name="uglifyjs" value="${project.build.directory}/uglify/uglifyjs" />
								<property name="js.compress.directory" value="${project.build.directory}/${project.build.finalName}/resources/js" />
								<apply executable="node" parallel="false" failonerror="true" dest="${js.compress.directory}">
									<fileset dir="${js.compress.directory}" includes="**/*.js" />
									<arg line=" ${uglifyjs}" />
									<arg line=" --ascii" />
									<arg line=" -o" />
									<targetfile />
									<srcfile />
									<mapper type="regexp" from="^(.*)\.(js)$" to="\1-min.\2" />
								</apply>
								<move todir="${js.compress.directory}">
									<fileset dir="${js.compress.directory}" includes="**/*.js" />
									<mapper type="regexp" from="^(.*)-min\.(js)$" to="\1.\2" />
								</move>
								<echo message="成功用uglifyjs压缩 JS 文件" />
								
							</target>
						</configuration>
					</execution>
				</executions>
			</plugin>
			<!-- CSS压缩 -->
			<plugin>
				<groupId>net.alchim31.maven</groupId>
				<artifactId>yuicompressor-maven-plugin</artifactId>
				<version>1.3.0</version>
				<executions>
					<execution>
						<phase>install</phase>
						<goals>
							<goal>compress</goal>
						</goals>
						<configuration>
							<includes>
								<include>**/*.css</include>
							</includes>
							<nosuffix>true</nosuffix><!-- 不需要后缀 -->
							<linebreakpos>-1</linebreakpos><!-- 是否在一行 -->
						</configuration>
					</execution>
				</executions>
			</plugin>

附件为: http://www.oschina.net/code/snippet_130931_10767

© 著作权归作者所有

char87v5
粉丝 47
博文 1
码字总数 626
作品 0
武汉
高级程序员
私信 提问
用JavaScript实现JavaScript文件的版本管理和加载

受《大公司怎样开发和部署前端代码?》这篇文章的启发,结合自己的项目实践,创建了一套JavaScript文件的版本管理和加载的机制,虽然比较粗糙,但是解决了不少实际的问题。 使用到的主要工具...

zero2hero
2015/04/14
804
0
j2ee项目中,js识别国际化问题

大家帮我分析下,项目支持国际化,在jsp页面中可以用输出国际化内容,问题是,如果我现在通过js打开一个对话框,对话框中有标题、表单等,里面的文字需要做成国际化的,这个怎么解决呢? 如果...

allen_limi
2012/04/23
701
2
JSP文件里大量JS代码,想发布时压缩JS怎么办?

请教大家一个问题,我们的系统是用JSP写的,但每个JSP里面有大量的JS文件,我想在打包发布时压缩一下JS,有什么办法吗?

单车架构师
2014/04/09
967
3
JS中如何获取到EL表达式的值?

原先做法是在jsp页面引入头文件 <%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %><%@ taglib prefix="s" uri="/struts-tags" %><%@ taglib prefi......

hanfeng
2014/05/30
18.8K
5
JSP 包含JS 后,中文乱码

同事提的一个问题 JSP包含一个静态的JS文件 一般用上 就行了 但这个JS是中文,UTF-8格式的,所以为了不显示乱码,只能在WEB.XML里加上几句 但问题来了,加了这个后,JSP会去解析这个JS文件,我的J...

ddatsh
2011/12/12
3.8K
6

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部