UglifyJS壓縮jsp裏面的js代碼和js文件

若是你不知道UglifyJS就out了,jquery的官方壓縮工具啦~ 

原本UglifyJS沒有windows的客戶端壓縮工具,後來本身參照YUI的BAT工具(好像是淘寶一個哥們寫的)改寫了一個,具體見下面的說明。javascript

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">')  css

固然我以爲這個工具最好能支持壓縮jsp裏的js代碼啦,因此本身看了下bin下面的uglifyjs文件,無非就是一些js的函數,找到了修改代碼的切入點:output(squeeze_it(text)),接下來就好辦了,下圖爲修改先後的對比 java


最後附上maven下面的壓縮腳本:  node

<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
相關文章
相關標籤/搜索