[prev in list] [next in list] [prev in thread] [next in thread] 

List:       quanta
Subject:    Re: [Quanta] Compressing CSS (single-line rules)
From:       Rudy - Italy <rudy.troger () gmail ! com>
Date:       2009-02-17 22:54:33
Message-ID: 22068101.post () talk ! nabble ! com
[Download RAW message or body]


Hi again,

thank you both for your answers. James, thanks to You I built a great system
for multiloading css and js, all compressed with a minifier and gzipped.
Works great. 

Niko really helped me with the main thing I was after with this question,
the solution is a user defined action bound to a simple executable script
and a keyboard-shortcut bound to the action. After knowing how to define the
action in quanta to call the script, the rest was fairly easy. I just wanted
to post my script in case someone needs it too.

Here it is:

#!/bin/sh
cat | tr -d '\r' | tr -d '\n' | sed -e 's/\t/ /g' | sed -e 's/}/ }\n/g' |
sed -e 's/{/ { /g' | sed -e 's/,\s*\(.*\){/,\n\1{/g' | sed -e 's/\([;:]\)/\1
/g' | sed -e 's/\*\//\*\/\n/g' | sed -e 's/\s\s/ /g'

Thanks again & best regards
Rudy


Bugzilla from james.ellis@gmail.com wrote:
> 
> Hi
> 
> I guess you are trying to minimise the CSS (and JS) file size to decrease 
> download time ?
> Turning on Gzip or Deflate on your web server for these files helps a lot, 
> i've been able to squeeze files down by a factor of 5 or so, which has
> sped up 
> site speed no end.
> 
> One other handy trick is to combine all your JS and CSS files into one
> large 
> file (and Gzip / Deflate that file). I use a PHP script to do this, called
> by 
> the HTML pages. The resulting file can be cached so it isn't hit all the
> time.
> 
> <?php
> //multiloader.css.php
> header('Content-Type: text/css');
> $files = array(
> 	'file1.css',
> 	'file2.css',
> 	//etc etc
> );
> $files = new ArrayIterator($files);
> while($files->valid()) {
> 	$file = file_get_contents(dirname(__FILE__) . '/' . $files->current());
> 	print $file . "\n";
> 	$files->next();
> }
> ?>
> 
> (yes, you can also foreach over the array, although that creates a copy of
> the 
> array in memory).
> 
> then in your HTML doc:
> <link rel="stylesheet" type="text/css" href="/path/to/multiloader.css.php"  
> media="screen" />
> 
> For CSS you can only combine styles into one file for one "media"  -
> doesn't 
> work combining screen and print CSS together! For JS you can just sandwich 
> everything (careful of the calling order of some functions).
> 
> You can also go so far as to strip out CR and LF and write some regular 
> expressions to remove comments in the resulting file, to cut down on file
> size 
> even more.
> 
> This way, the actual CSS / JS files you edit are in human readable format,
> the 
> minimising happens on the fly on the web server.
> 
> The Yahoo yslow plugin for Firebug is also a good starting point for
> frontend 
> optimisation.
> 
> Cheers
> James
> 
> On Thursday 09 October 2008 05:34:52 Niko Sams wrote:
> > Hi,
> > 
> > You create yourself a simple user script that does this compressing.
> > A few regular expressions will do the job.
> > You can then integrate this user-script perfectly into quanta.
> > 
> > Niko
> > 
> > On Sun, Oct 5, 2008 at 5:09 PM, Rudy - Italy <rudy.troger@gmail.com>
> > wrote:
> > > Hello,
> > > 
> > > At home I Quanta is my only choice for editing CSS, at work I have to
> > use
> > > Windows and Topstyle. However there is a handy feature called "Style
> > > Sweeper" in Topstyle, I wondered if it is possible to achieve a similar
> > > functionality in Quanta. It would be enough to convert a stylesheet
> > like
> > > this:
> > > 
> > > #bar, #foo {
> > > bar: foobar;
> > > bar2: foobar2;
> > > } /* Foo Bar */
> > > 
> > > .foo2 {
> > > bar2: foo;
> > > }
> > > ...
> > > 
> > > into this:
> > > 
> > > #bar,
> > > #foo { bar:foobar; bar2: foobar2; } /* Foo Bar */
> > > .foo2 { bar2: foo; }
> > > ...
> > > 
> > > without all the silly stuff like combine rules etc. which only messes
> > up
> > > the code. Simply remove newlines from the rules, and every rule in a
> > > single line, possibly available by keyboard shortcut. Is there a way to
> > > easily integrate such functionality?
> > > 
> > > Thanks for any help,
> > > Rudy
> > > 
> > > 
> > > --
> > > V
> 
> _______________________________________________
> Quanta mailing list
> Quanta@mail.kde.org
> https://mail.kde.org/mailman/listinfo/quanta
> 
> 

-- 
View this message in context: \
http://www.nabble.com/Compressing-CSS-%28single-line-rules%29-tp19825437p22068101.html
 Sent from the quanta-user list2 mailing list archive at Nabble.com.

_______________________________________________
Quanta mailing list
Quanta@mail.kde.org
https://mail.kde.org/mailman/listinfo/quanta


[prev in list] [next in list] [prev in thread] [next in thread]