自动化-CSS&JS min和合并文件

Automate - CSS & JS min and merge files

本文关键字：min 合并 文件 JS -CSS amp 自动化      更新时间：2023-09-26

EDIT：我想构建一个ANT脚本，使用YUI我想压缩（缩小）项目中的所有css文件和JavaScript文件，并将其变成一个文件。

就像这家伙一样http://heliologue.com/2008/09/22/using-yui-compressor-in-a-web-project/

但我不知道如何编写ANT脚本，甚至不知道如何构建build.xml和其他文件。

JSF是使用的服务器技术，它将1个css文件和1个javascript文件包含在基于浏览器的渲染html页面中。（例如：ie将获得master_ie.css，master_ie.js；firefox将获得masters _ff.css，master _ff.js）

但是css和js文件是用idk编写的，如何解释请参阅主文件的示例css和js片段

CSS：

@import './../core/v2.3-global.css';
@import './../core/v2.3-elements-default.css';
@import './../layout/v2.3-layout.css';
@import './../app/v2.3-template-default.css';
@import './../app/v2.3-header.css';
@import './../app/v2.3-leftnav.css';
@import './../app/v2.3-popup.css';
@import './../app/v2.3-footer.css';
@import './../app/v2.3-something-provision-default.css';
@import './../app/v2.3-old-data-grid.css';
@import './../app/v2.3-header-info-container.css';
@import './../app/v2.3-data-summary-default.css';
@import './../app/v2.3-button.css';
@import './../app/v2.3-template-firefox.css';
@import './../core/v2.3-elements-firefox.css';
@import './../app/v2.3-oneclick-provision-firefox.css';
@import './../app/v2.3-data-summary-firefox.css';
@import './../app/v2.3-layout-firefox.css';
@import './../app/v2.3-tree.css' ;
@import './../app/v2.3-extended-datatable-firefox.css';
@import './../app/v2.3-change-cloud-default.css';
@import './../app/v2.3-menu-default.css';
@import './../app/v2.3-user-summary-default.css';
@import './../app/v2.3-user-summary-firefox.css';
@import './../app/v2.3-recent-task-firefox.css';

JS:

document.write("<script type='text/javascript' src='../script/jhashtable.js'></script>");
document.write("<script type='text/javascript' src='../script/action-menu/jquery-top-menu.js'></script>");
document.write("<script type='text/javascript' src='../script/jquery.treeview.js'></script>");
document.write("<script type='text/javascript' src='../script/action-menu/top-menu-impl.js'></script>");
document.write("<script type='text/javascript' src='../script/popup-modal-dialog.js'></script>");
document.write("<script type='text/javascript' src='../script/navigationSideBar.js'></script>");
document.write("<script type='text/javascript' src='../script/action-menu/action-menu-script.js'></script>");
document.write("<script type='text/javascript' src='../script/appUiComponents.js'></script>");
document.write("<script type='text/javascript' src='../script/app-ui-validator.js'></script>");

如果你能慢慢地向我解释，就像我10岁一样，那真的会有帮助。

第2版：（找到解决方案）使用JSF->http://code.google.com/p/granule/使用ANT->参见下面的

我真的不理解你的问题。

你说你已经使用了apache ANT，这是我建议的100%。写一个小ANT脚本，有一个很酷的静态构建过程！

http://ant.apache.org/

"I don't know how to use / write ANT scripts"

我认为你应该靠着它。或者至少是基础知识。这并没有那么难。我按照你的链接看了蚂蚁的脚本。只需为您的文件修改即可。更换

<concat destfile="${build.dir}/web/common/js/global.js" force="no">
       <!-- explicitly order js concat because ordering matters here -->
       <fileset dir="${build.dir}" includes="web/common/js/jquery.js" />
       <fileset dir="${build.dir}" includes="web/common/js/jquery.bgiframe.js" />
...

使用您的文件

<concat destfile="${build.dir}/web/common/js/global.js" force="no">
       <!-- explicitly order js concat because ordering matters here -->
       <fileset dir="${build.dir}" includes="script/jhashtable.js" />
       <fileset dir="${build.dir}" includes="script/action-menu/jquery-top-menu.js" />
...

类似于css文件

相关文章：