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 ...
随机推荐
- Linux 静态和动态添加路由
(一)静态添加 1/5 首先让我们查看当前机器的路由表,执行如下命令:route -n [root@vnode33 network-scripts]# route -n Kernel IP routi ...
- HDU 1403 Longest Common Substring(后缀自动机——附讲解 or 后缀数组)
Description Given two strings, you have to tell the length of the Longest Common Substring of them. ...
- 《javascript模式--by Stoyan Stefanov》书摘--基本技巧
一.基本技巧 1,变量释放的副作用 a.使用var创建的全局变量(在函数外部创建)不能删除. b.不使用var创建的隐含全局变量(尽管在函数内部创建)可以删除. // 定义三个全局变量 var glo ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
$().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...
- 软工实践Alpha冲刺(1/10)
队名:我头发呢队 组长博客 作业博客 张杰(组长) 过去两天完成了哪些任务 查阅Python爬取音源的资料,如 Python3爬虫抓取网易云音乐热评实战 Python爬取高品质QQ音乐(2) 如何爬网 ...
- iOS-获取webView的高度
- (void)webViewDidFinishLoad:(UIWebView *)wb{ //方法1 CGFloat documentWidth = [[wb stringByEvaluatingJ ...
- 3dContactPointAnnotationTool开发日志(五)
今天要做的第一件事就是把obj文件里不同的对象分割开来. 通过仔细观察发现obj文件中以"o "开头的行会跟着一个对象的名字.g代表对象所属组名,我这里只要用到对象名就行了 ...
- React Components Template
React Components Template "use strict"; /** * * @author xgqfrms * @license MIT * @copyrigh ...
- git & configs
git & configs https://alvinalexander.com/git/git-show-change-username-email-address https://stac ...
- RT-thread 设备驱动组件之PIN设备
在RT-thread 2.0.0正式版中引入了pin设备作为杂类设备,其设备驱动文件pin.c在rt-thread-2.0.1\components\drivers\misc中,主要用于操作芯片GPI ...