Automate - CSS & JS min and merge files

Question

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

I dont understand what your want to achieve. What do you mean with "automate the CSS and JS" — roel
– roel, Commented Feb 23, 2012 at 12:17
my bad. I've edited my post now and made it clear. I want to take 394857 Js files... 2039472903 css files and turn it into 1 minified css & 1 minified js. — April Kawano
– April Kawano, Commented Feb 23, 2012 at 12:35

jAndy · Accepted Answer · 2012-02-23 11:25:09Z

2

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/

answered Feb 23, 2012 at 11:25

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

April Kawano Over a year ago

I don't know how to use / write ANT scripts. I edited my post now, thank you.

roel · Accepted Answer · 2012-02-24 08:55:23Z

1

"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

answered Feb 24, 2012 at 8:55

roel

2,0033 gold badges26 silver badges42 bronze badges

1 Comment

April Kawano Over a year ago

Yes, learned how to write ant builds now. I opened up the build xml from h5bp and various examples available on the internet. I've built a system now, I'm improvising from my primitive build to give the user a command line input to choose which files to compile. this helped a lot samaxes.com/2009/05/…

Collectives™ on Stack Overflow

Automate - CSS & JS min and merge files

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related