maven中用yuicompressor和closure-compiler对js、css文件进行压缩
转载自:http://matychen.iteye.com/blog/1477350
项目采用maven构建的时候,需要压缩js,css等,网上找了相关资料,自己综合了下~
直接放代码:
- <!-- js压缩 -->
- <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>
- <excludes>
- <exclude>**/*.min.js</exclude>
- <exclude>**/*-min.js</exclude>
- </excludes>
- <nosuffix>true</nosuffix>
- <linebreakpos>-1</linebreakpos>
- </configuration>
- </execution>
- </executions>
- </plugin>
- <!-- native2ascii -->
- <plugin>
- <groupId>org.codehaus.mojo</groupId>
- <artifactId>native2ascii-maven-plugin</artifactId>
- <version>1.0-beta-1</version>
- <executions>
- <execution>
- <phase>install</phase>
- <goals>
- <goal>native2ascii</goal>
- </goals>
- <configuration>
- <workDir>${project.build.directory}/${project.build.finalName}</workDir>
- <excludes>
- <exclude>**/*.css</exclude>
- </excludes>
- <includes>
- <include>resources/js/*.js</include>
- </includes>
- </configuration>
- </execution>
- </executions>
- </plugin>
更喜欢采用谷歌的closure-compiler + maven-antrun-plugin
- <plugin>
- <groupId>org.apache.maven.plugins</groupId>
- <artifactId>maven-dependency-plugin</artifactId>
- <version>2.4</version>
- <executions>
- <execution>
- <phase>validate</phase>
- <goals>
- <goal>copy</goal>
- </goals>
- <configuration>
- <artifactItems>
- <artifactItem>
- <groupId>com.google.javascript</groupId>
- <artifactId>closure-compiler</artifactId>
- <version>r1810</version>
- <type>jar</type>
- <overWrite>true</overWrite>
- <outputDirectory>${project.build.directory}/compressor</outputDirectory>
- <destFileName>closure-compiler.jar</destFileName>
- </artifactItem>
- <artifactItem>
- <groupId>com.yahoo.platform.yui</groupId>
- <artifactId>yuicompressor</artifactId>
- <version>2.4.6</version>
- <type>jar</type>
- <overWrite>true</overWrite>
- <outputDirectory>${project.build.directory}/compressor</outputDirectory>
- <destFileName>yuicompressor.jar</destFileName>
- </artifactItem>
- </artifactItems>
- </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>
- <tasks>
- <echo message="开始压缩 JS 文件. 请耐心等待!" />
- <property name="yuicompressor" value="${project.build.directory}/compressor/yuicompressor.jar" />
- <property name="closure-compiler" value="${project.build.directory}/compressor/closure-compiler.jar" />
- <property name="css.compress.directory" value="${project.build.directory}/${project.build.finalName}/resources" />
- <property name="js.compress.directory" value="${css.compress.directory}/js" />
- <apply executable="java" parallel="false" failonerror="true" dest="${js.compress.directory}">
- <fileset dir="${js.compress.directory}" includes="**/*.js" />
- <arg line="-jar" />
- <arg path="${closure-compiler}" />
- <arg line="--warning_level DEFAULT" />
- <arg line="--compilation_level SIMPLE_OPTIMIZATIONS" />
- <arg line="--js" />
- <srcfile />
- <arg line="--js_output_file" />
- <targetfile />
- <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="成功压缩 JS 文件" />
- <echo message="开始压缩 CSS 文件. 请耐心等待!" />
- <apply executable="java" parallel="false" failonerror="true" dest="${css.compress.directory}">
- <fileset dir="${css.compress.directory}" includes="**/*.css" />
- <arg line="-jar" />
- <arg path="${yuicompressor}" />
- <arg line="--charset UTF-8" />
- <arg value="--type"/>
- <arg value="css"/>
- <srcfile />
- <arg line="-o" />
- <targetfile />
- <mapper type="regexp" from="^(.*)\.(css)$" to="\1-min.\2" />
- </apply>
- <move todir="${css.compress.directory}">
- <fileset dir="${css.compress.directory}" includes="**/*.css" />
- <mapper type="regexp" from="^(.*)-min\.(css)$" to="\1.\2" />
- </move>
- <echo message="成功压缩 CSS 文件" />
- </tasks>
- </configuration>
- </execution>
- </executions>
- </plugin>
JQUERY 的压缩工具 uglifyjs版本的配置,必须要有nodejs环境 (executable="node")即在cmd中能够执行 node --version. uglifyjs可以在https://github.com/mishoo/UglifyJS 下载,下载后续稍稍修改bin/uglifyjs,把里面的
- var uglify = require("uglify-js")
修改为
- var uglify = require("./uglify-js");//或者 ../uglify-js
因为uglify-js默认是在bin目录外面的。
如需更新uglify的版本,每次覆盖相应文件,只修改上面文件即可。
- <echo message="开始压缩 JS 文件. 请耐心等待!" />
- <property name="uglifyjs" value="${project.build.directory}/compressor/uglify/uglifyjs" />
- <property name="yuicompressor" value="${project.build.directory}/compressor/yuicompressor.jar" />
- <property name="closure-compiler" value="${project.build.directory}/compressor/closure-compiler.jar" />
- <property name="css.compress.directory" value="${project.build.directory}/${project.build.finalName}/resources" />
- <property name="js.compress.directory" value="${css.compress.directory}/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>
maven中用yuicompressor和closure-compiler对js、css文件进行压缩的更多相关文章
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- Web性能优化之动态合并JS/CSS文件并缓存客户端
来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- javascript异步延时载入及推断是否已载入js/css文件
<html> <head> <script type="text/javascript"> /**======================= ...
- MVC打包压缩JS&CSS文件调试时过滤了一些文件
BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件: 后台跟踪了 ...
- 开箱即用 - Grunt合并和压缩 js,css 文件
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
随机推荐
- Solidity中的基本类型转换
Solidity中的基本类型转换(十四)|入门系列 2017/4/29 posted in Solidity入门系列 点击查看原文,获得优化的排版. 隐式转换 如果一个运算符能支持不同类型.编译器会隐 ...
- Django基本目录详解
1.app是自己建立的一个存放app的文件夹,因为项目大了之后会存在很多app(pycharm生成app方法 Tools-Run manage.py Task-输入startapp app名称) 2. ...
- [C++] OOP - Access Control and Class Scope
Access Control And Inheritance Protected Member Like private, protected members are unaccessible to ...
- 第四课——MFC应用程序框架
一.MFC应用程序类型 上篇文章的彩蛋:可通过使用MFC应用程序向导(MFC AppWizard)的功能来创建所需要的应用程序,这意味着不需要输入任何代码.MFC除了应用程序向导,还对应用程序项目有着 ...
- Repair the Wall (贪心)
Long time ago , Kitty lived in a small village. The air was fresh and the scenery was very beautiful ...
- NYOJ 35 表达式求值(逆波兰式求值)
http://acm.nyist.net/JudgeOnline/problemset.php?typeid=4 NYOJ 35 表达式求值(逆波兰式求值) 逆波兰式式也称后缀表达式. 一般的表达式求 ...
- 欢迎来怼--第七次Scrum会议
一.小组信息 队名:欢迎来怼 小组成员: 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/19 17:05~17:17,总计12min. 地 ...
- 再学习Webform页面生命周期
参考文章: 在vs2010,新建一个aspx页面,页面头部有一行代码: <%@ Page Language="C#" AutoEventWireup="true&q ...
- 【week2】燃尽图
燃尽图(burn down chart)是在项目完成之前,对需要完成的工作的一种可视化表示.燃尽图有一个Y轴(工作)和X轴(时间).理想情况下,该图表是一个向下的曲线,随着剩余工作的完成,“烧尽”至零 ...
- IIS发布 MVC 配置
E:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll