CODEWITHSUNDEEP
javascriptcssantautomationyui-compressor
April Kawano
April Kawano

Reputation: 1

Automate - CSS & JS min and merge files

EDIT: I want to build an ANT script and using YUI i want to compress (minify) all the css files and JavaScript files in a project AND make it into a single file.

like this guy does http://heliologue.com/2008/09/22/using-yui-compressor-in-a-web-project/

but i don't know how to write ANT scripts or even scructure the build.xml and other files.

JSF is the server technology used and it includes 1 css file and 1 javascript file into the rendered html page based on the browser. (example: ie will get master_ie.css, master_ie.js; firefox will get master_ff.css, master_ff.js)

but the css and js file are written in a idk how to explain it way see the sample CSS and JS snippet of the master file

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>");

It would really help if you can explain it to me, slowly, like i'm a 10 year old.

EDIT2: (found solution) using JSF -> http://code.google.com/p/granule/ using ANT -> see below

Upvotes: 0

Views: 1518

Answers (2)

roel
roel

Reputation: 2003

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

I think you should lean it then. Or at least the basics. It is not that difficult. I followed your link and looked at the ant script. Just modify it for your files. replace 

<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" />
...

with your files

<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" />
...

Similar with css files

Upvotes: 1

jAndy
jAndy

Reputation: 236122

I don't really understand your problem.

You stated you've already used apache ANT, which is 100% what I would suggest there. Write a little ANT script, have a cool static build process !

http://ant.apache.org/

Upvotes: 2

Related Questions