如何合并gulp压缩合并cssCSS和JS

JS/CSS文件压缩合并工具 免费绿色版
用来压缩和合并js文件或css文件的绿色工具
使用说明:
1、目录source:需要压缩的源文件
2、目录apache-ant-1.8.1:使用ant和yui需要处理的包
3、合并和压缩js.bat 根据source将js进行合并到in目录,并输出到out目录
4、合并压缩css.bat 根据source将css进行合并到in目录,并输出到out目录
5、合并js.bat 只将source下数据合并到in目录
6、合并js.bat 只将in下数据合压缩处理到out目录
JS/CSS文件压缩合并工具 免费绿色版
高速下载器通道
其他下载地址
下载不了?[原]maven 压缩、合并 js, css - 推酷
[原]maven 压缩、合并 js, css
我们知道在 Web 应用开发中为了提高客户端响应速度,需要将页面使用的资源最小化,yuicompressor-maven-plugin 能够很好的实现js, css的压缩、合并处理。
先来看看工程结构:
& & ├─java
& & └─webapp
& & & & ├─app
& & & & │ &│ &index.html
& & & & │ &│ &
& & & & │ &├─css
& & & & │ &│ & & &style.css
& & & & │ &│ & & &
& & & & │ &└─js
& & & & │ & & & & &app1.js
& & & & │ & & & & &app2.js
& & & & │ & & & & &jquery-1.9.1.min.js
& & & & │ & & & & &
& & & & └─WEB-INF
& & & & & & & & web.xml
index.html 里引用 app1.js 和 app2.js, 首先通过 yuicompressor-maven-plugin 对 app1.js,app2.js 进行压缩、合并。
,需翻墙)
pom.xml 配置如下,其中所有已经是 min 化的文件会被排除比如:jquery-1.9.1.min.js
&groupId&net.alchim31.maven&/groupId&
&artifactId&yuicompressor-maven-plugin&/artifactId&
&version&1.3.0&/version&
&executions&
&execution&
&goal&compress&/goal&
&/execution&
&/executions&
&configuration&
&encoding&UTF-8&/encoding&
&!-- 忽略 js 错误警告 --&
&jswarn&false&/jswarn&
&nosuffix&true&/nosuffix&
&linebreakpos&-1&/linebreakpos&
&includes&
&include&app/js/*.js&/include&
&include&app/js/*.css&/include&
&/includes&
&excludes&
&exclude&**/**min.js&/exclude&
&/excludes&
&aggregations&
&aggregation&
&removeIncluded&true&/removeIncluded&
&insertNewLine&true&/insertNewLine&
&inputDir&${project.build.directory}/${project.build.finalName}&/inputDir&
&output&${project.build.directory}/${project.build.finalName}/app/js/app.pack.js&/output&
&includes&
&include&app/js/app*.js&/include&
&/includes&
&excludes&
&exclude&**/**min.js&/exclude&
&/excludes&
&/aggregation&
&/aggregations&
&/configuration&
这里我将 app1.js 和 app2.js 合并成 app.pack.js, 但光合并还不行。index.html 里仍然是引用 app1.js 和 app2.js,所以必须替换掉。
下一步用 maven-replacer-plugin 来完成替换工作。
为了通用性(你不必写死 js或者css文件名,并且支持多组的文件合并和替换),采用一个特殊的标识在 html 里来圈定要替换的js,这样就可以通过这个标识来寻找替换目标。
index.html
&script type=&text/javascript& src=&app/js/jquery-1.9.1.min.js&&&/script&
&!-- mergeTo:app.pack.js --&
&script type=&text/javascript& src=&app/js/app1.js&&&/script&
&script type=&text/javascript& src=&app/js/app2.js&&&/script&
&!-- mergeTo --&
如上所示,所有 &!-- mergeTo:xxx.js --& ... &!-- mergeTo --& 区间的 js 引用会被替换成 xxx.js&
pom 配置如下:
&groupId&com.google.code.maven-replacer-plugin&/groupId&
&artifactId&replacer&/artifactId&
&version&1.5.2&/version&
&executions&
&execution&
&phase&package&/phase&
&goal&replace&/goal&
&/execution&
&/executions&
&configuration&
&file&${project.build.directory}/${project.build.finalName}/app/index.html&/file&
&replacements&
&replacement&
&!-- mergeTo:([^\s]*) --&(.*?)&!-- mergeTo --&
&script type=&text/javascript& src=&$1& &&/script&
&/replacement&
&/replacements&
&regexFlags&
&regexFlag&CASE_INSENSITIVE&/regexFlag&
&regexFlag&DOTALL&/regexFlag&
&/regexFlags&
&/configuration&
maven-replacer-plugin 支持正则替换正好满足我的需求,注意:
(1) 替换 &!-- mergeTo:xxx.js --& 区间的时候,使用的是正则 &单行” 模式,即 DOTALL
(2) 因为 yuicompressor-maven-plugin 执行在 prepackage 所以 maven-replacer-plugin 的 phase 要修改为 package
这样在开发时,增加 js 也不用再重复修改 pom 配置,当然 js 文件命名时最好遵从一定的规则,以便在 compress 时方便筛选。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致&!-- target=&pkg1.min.js& {{{ --&
&script src=&a1.js&&&/script&...&script src=&b1.js&&&/script&
&!-- }}} --&
&!-- target=&pkg2.min.js& {{{ --& ... &!-- }}} --&
然后生成带MD5的map,对比文件是否改动,选择性压缩,再合并到target指向的目标文件。
开发时使用未压缩的,上线前压缩合并,再自动把header/footer未压缩的注释掉,加上合并后的JS/CSS。
使用UglifyJS2、clean-css的压缩代码,已经放到github,/kairyou/f2e-tools/tree/master/libs。
require build-css-cc.js或build-js-uj2.js,就可以使用里面的build方法压缩了。
另外,压缩时需要发送错误时终止并提示,所以压缩时的读取是sync方式,但是生成文件map、产生MD5、合并文件部分可以采用异步方式。
上一页: &&&&&下一页:相关内容服务端合并和压缩JS和CSS文件 - 网页制作 - 蓝色理想
您的位置:  &
& 服务端合并和压缩JS和CSS文件
 服务端合并和压缩JS和CSS文件
作者: 时间:  文档类型:原创 来自:
第 1 页 服务端合并和压缩JS和CSS文件 [1] 第 2 页
2在服务端合并和压缩JavaScript和CSS文件
Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射(Image Map)和使用Data URI来编码图片。和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况。而利用服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会相当的灵活和高效。
YUI Combo Handler
2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo!开发的一个Apache模块,它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件,从而大大减少文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件,常用方式如下:
&script src="&&script src="&&script src="&&script src="&&script src="&&script src="&
而使用Combo Handler服务之后,则上述的代码可以写为:
&script src="?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/container/container_core-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/editor/editor-min.js"&&/script&
除了代码的可读性稍稍有一点点降低外,使用Combo Handler服务大大的降低了HTTP请求数,同时也减少了URL代码量,这对于Web性能优化来讲至关重要。所以,随后YUI从2.6.0开始,其核心组件YUI Loader内置了Combo Handling功能,即使用YUI Loader时,通过配置combine属性就可以把要加载的多个JavaScript或CSS文件按照使用Combo Handler服务的形式合并起来,这时只要静态文件的服务器支持Combo Handler就行了。在YUI中当combine配置为true时,CDN默认是使用Yahoo! CDN(),所以没有任何问题。这正是YUI最迷人的地方之一。
遗憾的是在中国的速度并不佳,本来中国雅虎提供 ,但尚未提供Combo Handler服务,同时因种种原因,其更新在YUI 2.7.0之后就停滞了。更糟糕的是Yahoo!开发的支持Combo Handler的Apache模块虽然据传有计划开源,但至少现在依旧是私有技术,要使用就需要自己实现类似功能,所以国内类似技术的应用并不太多。
责任编辑:
◎进入论坛、版块参加讨论,我还想。
页次:1/3页
1个记录/页
蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。
转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。
特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们,我们将立即删除修改。
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用,以利文档及时修改。
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:?不良评论请用,以利管理员及时删除。?尊重网上道德,遵守中华人民共和国的各项有关法律法规?承担一切因您的行为而直接或间接导致的民事或刑事法律责任?本站评论管理人员有权保留或删除其管辖评论中的任意内容
?您在本站发表的作品,本站有权在网站内转载或引用 ?参与本评论即表明您已经阅读并接受上述条款
专业书推荐
&1999-. 版权所有当前位置:&&
JS和CSS合并压缩工具 SpeedJSCSS
&&&&来源:&
& 发布时间:
在一个页面中,每一个外部JS及CSS文件都会导致一个额外的HTTP请求。所以,如何合理的合并JS文件及CSS文件也是前端工程师应该考虑的。
SpeedJSCSS正是一款JS和CSS合并压缩工具,用于合并多个文件在一个响应报文中。SpeedJSCSS从JS和CSS文件中合并文件、剔除注释和没用的空格 ,它的特点就是能减少文件的数量和大小,从而加快下载速度,它能降低消除下载的成本。
本页相关标签:
相关技术文章: &&&&
jQuery Image Cropper 是个 jQuery 图像裁剪插件,提供预览功能和一些选项。在线演示
...... &&&&
What it is?
dxCombobox is a jQuery plugin that allows you to transform any & select & element into an editable combobox.
Pressing any alphanumeric key will transform select box into editable state by creating a text box element. An case insensitive search is performed on the corresponding of the select box, one the users starts to type in this box. When user goes out of the box (on blur/return), if a direct match is found in the & option & then it is selected else a new option is created with the entered text.
$(element).dxCombobox();
...... &&&&
js_beautify是Einar Lielmanis开发的在线javascript代码格式化工具。
Einar在github上开源了这个项目的代码,并加入了格式化html代码的支持。
在线演示地址:在线代码格式化
......&nbsp最新技术文章: &&&&
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
快速:体积小,加载速度快
开源:开放源代码,高水平,高品质
底层:内置自定义 DOM 类库...... &&&&
FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。
相对与Lightbox而言,阴影效果更好。但是比Lightbox绚丽。
使用很是简单,可以参照Lightbox,修改添加代码。
示例代码:
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({ 'hideOnContentClick': true });
$("a.group").fancybox({
'zoomSpeedIn'...... &&&&
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证
YUI 包含完整的说明文件。它包含了两种元件: 工具与控件[2],和一些 CSS 资源。
协助达成位置移动、大小改变、透明度和其他的网页效果。
浏览器历史纪录管理工具
......&nbsp
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!
(C)2012-,站长邮箱:www_169it_(请将#改为@)}

我要回帖

更多关于 gulp css合并压缩替换 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信