`
matychen
  • 浏览: 172395 次
  • 性别: Icon_minigender_1
  • 来自: 武汉外来务工人员
社区版块
存档分类
最新评论

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

阅读更多
如果你不知道UglifyJS就out了,jquery的官方压缩工具啦~
本来UglifyJS没有windows的客户端压缩工具,后来自己参照YUI的BAT工具(好像是淘宝一个哥们写的)改写了一个,具体见下面的说明。
REM =====================================
REM    YUI Compressor CMD Script
REM
REM     - by yubo@taobao.com
REM     - 2009-02-12
REM =====================================


自己修改后的:


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.


注意需要nodejs环境,怎么安装?自己谷歌吧,还有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>

  • UglifyJS.7z (44.2 KB)
  • 描述: windows右键工具
  • 下载次数: 125
  • 大小: 66.7 KB
  • 大小: 44.8 KB
  • 大小: 1.2 MB
分享到:
评论
7 楼 huanghai2007 2012-09-06  
我也自己做了个windows界面版的,没你们功能那么强大,就是批量压缩
http://www.cnblogs.com/huanghai/archive/2012/09/06/2672799.html
6 楼 matychen 2012-05-29  
<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>prepare-package</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.out.directory" value="${project.build.directory}/${project.build.finalName}/WEB-INF" />
								<property name="jsp.compress.directory" value="src/main/webapp/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.out.directory}">
									<fileset dir="${jsp.compress.directory}" includes="**/*-min.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.out.directory" value="${project.build.directory}/${project.build.finalName}/resources/js" />
								<property name="js.compress.directory" value="src/main/webapp/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.out.directory}">
									<fileset dir="${js.compress.directory}" includes="**/*-min.js" />
									<mapper type="regexp" from="^(.*)-min\.(js)$" to="\1.\2" />
								</move>
								<echo message="成功用uglifyjs压缩 JS 文件" />
								
							</target>
						</configuration>
					</execution>
				</executions>
			</plugin>
<plugin>
				<!-- 打war包插件 -->
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.2</version>
				<configuration>
				<!-- 声明:packagingExcludes中的*.properties文件均位于src/main/resources目录中 warSourceExcludes中的?test/*,venue/**位于src/main/webapp目录中 -->
					<warSourceExcludes>resources/js/**/*.js,WEB-INF/views/**/*.jsp</warSourceExcludes>
					<archive>
						<!-- 不把maven的依赖加入 -->
						<addMavenDescriptor>false</addMavenDescriptor>
					</archive>
				</configuration>
			</plugin>

<!-- 思路:打包直接把js和jsp压缩后复制到目的地,在war插件的复制里面,排除刚刚复制的js和jsp,这样就不会覆盖了。打包的时候也能打进去了。 -->
5 楼 Yrain 2012-05-29  
matychen 写道
Yrain 写道
悲剧,搞了两天了,压缩后的文件始终不会自动打包到War里去。

可以修改下这个吧。
<phase>install</phase>

试过了。还是不行,目前还在找资料解决。
4 楼 matychen 2012-05-29  
Yrain 写道
悲剧,搞了两天了,压缩后的文件始终不会自动打包到War里去。

可以修改下这个吧。
<phase>install</phase>
3 楼 matychen 2012-05-29  
Yrain 写道
悲剧,搞了两天了,压缩后的文件始终不会自动打包到War里去。

呵呵,是有这个问题,自己手动打包下就可以了。war就是个zip包。
2 楼 Yrain 2012-05-29  
悲剧,搞了两天了,压缩后的文件始终不会自动打包到War里去。
1 楼 白云飞 2012-05-22  
大神啊,好东西,下来看看

相关推荐

    js代码高亮显示 JavaScript代码高亮 jsp

    1. 引入库:在JSP页面的`&lt;head&gt;`部分引入代码高亮库的CSS和JS文件,例如: ```jsp &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css"&gt; ...

    JSP加载JS文件不起作用的有效解决方法

    目录结构:jsp导入jquery文件,老是不起作用,原因在于: 代码如下: [removed][removed] 其不能访问/WEB-INF/目录下的文件,因此需要将加载的js文件其放倒webapp目录。 test.html: 代码如下: &lt;&#37;@ page ...

    javascript合并压缩的jsp tag实现

    在本案例中,我们使用 JSP Tag 来实现 JavaScript 文件的合并与压缩。 实现这个功能的关键步骤包括: 1. **文件读取**:首先,我们需要读取所有待合并的 JavaScript 文件内容。这通常通过文件系统 API 完成,例如 ...

    JSP中java代码与js之间的传值

    在JavaServer Pages (JSP) 中,我们经常需要在Java代码和JavaScript之间传递数据。这在构建动态网页时尤其重要,因为Java代码通常用于处理服务器端逻辑,而JavaScript则负责客户端交互。这篇博客将探讨如何在JSP中...

    代码获取--平常HTML,JSP查看代码,JS文件

    获取JavaScript文件的代码同样可以通过查看网页源代码实现,但JavaScript代码通常被压缩和混淆,以提高加载速度和防止被轻易阅读。在这种情况下,开发者工具中的“Sources”面板可以帮助你查看未压缩的原始代码,并...

    web容器文件压缩 tk-filter tk-filter js,jsp,css,文件压缩包含源代码

    在Web开发中,为了提高网页加载速度和优化用户体验,经常需要对JavaScript(js)、JavaServer Pages(jsp)和样式表(css)等静态资源进行压缩。`tk-filter` 是一个针对这种需求设计的过滤器(Filter),它适用于...

    js jsp 文件上传

    通过这个项目,我们可以深入理解JS和JSP在文件上传过程中的角色和交互。 **前端部分 - JavaScript** 1. **HTML表单设计**:文件上传通常基于`&lt;input type="file"&gt;`元素。在HTML中创建一个表单,包含此元素,用户...

    使用UglifyJS合并/压缩JavaScript的方法

    **UglifyJS** 是一个流行的JavaScript代码压缩和优化工具,它可以帮助开发者减小JavaScript文件的大小,提高网页加载速度,降低带宽消耗。本文将详细介绍如何通过编程方式使用UglifyJS来合并和压缩JavaScript文件。 ...

    jsp和javascript写的无刷新聊天室及源代码

    【jsp和javascript写的无刷新聊天室及源代码】是一个基于Web技术实现的实时通信系统,主要利用了JavaServer Pages(JSP)和JavaScript技术来创建一个无需页面刷新即可进行聊天交流的平台。在这个项目中,NetBeans...

    JSP下载文件源代码

    通过以上分析可以看出,该示例代码提供了一个简单的文件下载功能实现方案,使用JSP结合SmartUpload插件来完成。这种方法不仅易于实现,而且具有较高的灵活性和可扩展性。对于需要快速添加文件下载功能的项目来说,这...

    js日期时间控件 JavaScriptjs日期时间控件 jsp

    在JSP页面中,可以使用JavaScript来处理客户端的交互,而服务器端的业务逻辑和数据处理则通过JSP标签库或Java代码完成。 - 当用户在前端选择日期时间后,可以通过Ajax异步请求将选定的值发送到服务器,JSP页面接收...

    JSP日历控件代码

    总的来说,“TestDate”文件夹内的JavaScript文件可能包含了实现JSP日历控件的前端代码。理解并调试这些文件,结合JSP后端逻辑,将能帮助开发者构建出功能完备且用户体验良好的日期选择功能。为了进一步学习和优化这...

    代码高亮显示javascript插件

    "代码高亮显示JavaScript插件"是专门用于在Web页面中美化和突出显示JavaScript代码的工具,它能够将原始的黑白文本代码转换为具有不同颜色、字体和样式的视觉盛宴。本文将深入探讨这一主题,详细介绍JavaScript代码...

    jsp+js+oracle 实现文件上传数据库,下载到本地

    本示例通过结合JSP、JavaScript和Oracle数据库,提供了一种实现文件在服务器和客户端之间传输的方法。下面将详细阐述这一过程中的关键技术和步骤。 首先,JSP(JavaServer Pages)是一种基于Java的动态网页技术,它...

    jsp文件中引用外部.css或.js文件的路径问题.pdf

    例如,在 test.jsp 文件中,我们可以使用以下代码来引用 styles 目录下的 main.css 文件和 scripts 目录下的 dtree.js 文件: ```html &lt;script type="text/javascript" src="../scripts/dtree.js"&gt; ``` 这种方法...

    jsp,js,javascript,java代码格式化工具

    可以对一个,或则多个jsp,js,javascript,java文件源代码格式化工具,其中jsp文件,内可以含,javascript,vbscript等,都能格式化,有问题联系gisoracle@126.com 使用C#开发,请安装.net2.0

    1.源代码统计工具,用于统计c/C++,JAVA,JS,XML,JSP等格式代码

    本文将深入探讨源代码统计工具在C/C++、Java、JavaScript、XML和JSP等格式代码中的应用。 首先,让我们关注C/C++代码统计。C/C++是两种广泛使用的系统级编程语言,它们的源代码通常包含大量的头文件和实现文件。...

    JSP.rar_javascript_javascript项目_jsp javascript_jsp小项目

    "jsp_javascript"说明了JavaScript代码是如何嵌入到JSP页面中的,而"jsp小项目"则意味着我们可能会看到一个完整的、可运行的JSP应用示例,其规模适中,便于理解和学习。 **文件名称列表** 虽然列表中只提到了"JSP...

Global site tag (gtag.js) - Google Analytics