Solved

FREE tool for compressing source files

Posted on 2008-11-01
10
217 Views
Last Modified: 2013-11-19
Hi,
I need a free tool that I can use to remove line-breaks and whitespaces from my source files ( XHTML, JavaScript and CSS) so I get  files smaller in size.
I see that many sites use this technique.

 Is there such a tool or program or do I have to do it on my own?
Thanks!
0
Comment
Question by:mine_23
  • 5
  • 5
10 Comments
 
LVL 13

Expert Comment

by:brundo
ID: 22860700
Hi,

I've remember, this was called compression, and I think I've seen such files in Joomla (or was it Moodle?). Now you can search without me, too :-))

Try with:

0
 
LVL 1

Author Comment

by:mine_23
ID: 22862209
Cool links. Thanks!
But what XHTML files ?
0
 
LVL 13

Expert Comment

by:brundo
ID: 22865297
New day, new ideas :-))

Are you maybe on some Unix? (in your question you wrote you can write your own program... maybe you are...)

If yes, try with following from the command line:

tr -s '\r\n' '\t' <input_file.input_file_type | sed 's/\t/ /g' | sed 's/  //g' >output_file.input_and_output_file_type.css

(all the content should come in one line, change only filenames)

It replaces first all the line breaks (in file uploaded from Windows, with line feed and new line at the end of the line), then replaces all the tabs and, finally, all the double blanks. This works for all file types.

If you like this approach, the long line can be saved in a file and executed as a script.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 1

Author Comment

by:mine_23
ID: 22872013
Unfortunately, I am not using Unix.
I am using Windows XP.

Note that XHTML is a 100% valid XML  document. so this might help!
0
 
LVL 13

Expert Comment

by:brundo
ID: 22881489
I am now in RegExp mood (whatever it means ;-)) ).

This is a page with JavaScript, where you have to paste your code and obtain how it is getting smaller. It "eats" all the line breaks, tabs, and double blanks.

<html>
 
<head>
<meta http-equiv="Content-Language" content="hr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Eat them!</title>
 
<script type="text/javascript">
function eatThem (){
	var str = document.getElementById("original").value;
    document.getElementById("before").value = str.length;
	str = str.replace(/[\n\r\t]/g, " ");
 
	str = str.replace(/\ \ /g, " "); 
    document.getElementById("original").value = str;
    document.getElementById("after").value = str.length;
	while (str.search(/\ \ /) != -1) {
		str = str.replace(/\ \ /g, " "); 
	    document.getElementById("original").value = str;
	    document.getElementById("after").value = str.length;
    }
}
</script>
 
</head>
 
<body>
 
<form method="post" action="">
	<p><textarea rows="15" id="original" cols="88"></textarea></p>
	<!-- p><textarea rows="15" id="chowen" cols="88"></textarea></p -->
	<p>Before: <input type="text" id="before" size="20">, after: <input type="text" id="after" size="20"> characters</p>
	<p><input type="button" value="Eat them!" onclick="eatThem();"></p>
</form>
 
</body>
 
</html>

Open in new window

0
 
LVL 1

Author Comment

by:mine_23
ID: 22891133
OK.
But this approach is poor:

1) It doesn't remove comments.
2) It removes whitespaces, tabs and double blanks  from  attribute values (between double quotation marks).

I found a similar tool here http://www.peterbe.com/plog/blogitem-040406-1/compressor but it suffers from the the same problem.
0
 
LVL 13

Accepted Solution

by:
brundo earned 100 total points
ID: 22893567
1) comments are removed by the script in the attached version (although you didn't mention comments in your first question).

2) it removes only double blanks, and tabs from attribute values (and I can't remember any situation where it would be necessary to have double blanks or tabs in attribute values)

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Eat them!</title>
 
<script type="text/javascript">
function eatThem (){
	var str = document.getElementById("original").value;
    document.getElementById("before").value = str.length;
	str = str.replace(/[\n\r\t]/g, " ");
	str = str.replace(/<!--[^-]*?-->/g, " ");
	while (str.search(/\ \ /) != -1) {
		str = str.replace(/\ \ /g, " "); 
    }
	document.getElementById("original").value = str;
    document.getElementById("after").value = str.length;
}
</script>
 
</head>
 
<body>
 
<form method="post" action="">
	<p><textarea rows="15" id="original" cols="88"></textarea></p>
	<p>Before: <input type="text" id="before" size="20">, after: <input type="text" id="after" size="20"> characters</p>
	<p><input type="button" value="Eat them!" name="B1" onclick="eatThem();"></p>
</form>
 
</body>
 
</html>

Open in new window

0
 
LVL 1

Author Comment

by:mine_23
ID: 22900181
Yes, I did not mention comments. You are right!
Well, Sometimes, I use double blanks in ASP.NET pages but it is not that important.
Many thanks!
0
 
LVL 1

Author Closing Comment

by:mine_23
ID: 31512396
Thank you for the code.
I am sorry about asking for removing comments late!
0
 
LVL 13

Expert Comment

by:brundo
ID: 22900433
Thanks. Now you can play around with this code... join lines 11 and 12, then make 13 and 14 more effective :-))

You can start with http://www.regular-expressions.info/quickstart.html, but with one eye on the table with JavaScript dialect of regular expressions at http://www.javascriptkit.com/javatutors/redev2.shtml. It is interesting, especially when you know that many editors have regular expressions in their find&replace functions.
0

Featured Post

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Forms that calculate points for wordpress 10 50
Css regex 6 38
xss alert in domino url 9 32
Designing forms 3 16
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question