Recipes for optimizing javascript and css?

[Seth Falcon]

Hi all,

I'm wondering if anyone has a recipe that is working for them to do some
optimization of site javascript and css. In particular, I'd like to:

1. concatenate all javascript files into a single file and run a minify
script over it.

2. run a minify script over the css

The minify part seems like it will be easy to add in as a filter, but
I'm not sure what the best way would be to "merge" javascript files into
a single file.

Anyone have something that is working along these lines already?

Thanks,

+ seth

[Choan Gálvez]

Nope, but you got me thinking about the JS part. I think it'd be doable
by creating a filter that uses Sprockets [1] to concatenate the files.

[1]: http://getsprockets.org/

Best.
--
Choan G�lvez

Ukecosas. Los ukeleles que nos gustan, tambi�n para ti
Vis�tanos: <http://ukecosas.es/>
Escr�benos: <mailto:ukec...@ukecosas.es>
S�guenos en Twitter: <http://twitter.com/ukecosas/>

[Felix]

I used to do it via a Rakefile task that collected together javascript
files that were in a directory with a '.js' extension. It would then
place them in a file named after the directory. It would also compress
the javascript using yuicompressor. So a src structure like this:

.
`-- public
`-- js
`-- src
|-- default.js
| |-- base.js
| `-- other.js
`-- jquery-1.4.js

Would result in a final structure of this:
.
`-- public
`-- js
|-- default.js <- concatenated and minified
`-- jquery-1.4.js <- concatenated and minified

CSS could be handled by rainpress in your Nanoc ruls file. This was the
relevant Rakefile tasks (you would need to change the two references to
'outpath' to suit):

namespace :compress do
task :default => [:js,:css]

desc 'Compress Javascript assets'
task :js do
outpath = File.join(File.dirname(__FILE__),'public','js')
inpath = File.join(outpath,'src')
Dir["#{inpath}/*.js"].each { |infile|
outfile = File.join(outpath,File.basename(infile).sub(/\.js$/,'.min.js'))
if File.directory? infile
File.new(outfile,'w+').close
sources = Dir["#{infile}/*.js"]
if sources.size == 0 || uptodate?(outfile, sources)
puts "SKIPPING: #{outfile}"
else
puts "CREATING: #{outfile}"
compress_js(sources.shift, outfile)
sources.each{|infile2|
compress_js(infile2, outfile, true)
}
end
else
if File.exists?(outfile) && uptodate?(outfile,[infile])
puts "SKIPPING: #{outfile}"
else
puts "UPDATING: #{outfile}"
compress_js(infile, outfile)
end
end
}
end

desc 'Compress CSS assets'
task :css do
outpath = File.join(File.dirname(__FILE__),'public','css')
inpath = File.join(outpath,'src')
Dir["#{inpath}/*.css"].each {|infile|
outfile = File.join(outpath,File.basename(infile))
if File.exists?(outfile) && uptodate?(outfile,[infile])
puts "SKIPPING: #{outfile}"
else
puts "UPDATING: #{outfile}"
File.open(infile) { |file|
File.new(outfile,'w+').write(Rainpress.compress(file.read))
}
end
}
end
end

def compress_js(infile, outfile, append=false)
pipe = append ? '>>' : '>'
cmd = "yuicompressor #{infile} #{pipe} #{outfile}"
system cmd
end

-felix

> --
> You received this message because you are subscribed to the nanoc discusssion group.
>
> To post to this group, send email to na...@googlegroups.com
> To unsubscribe from this group, send email to nanoc+un...@googlegroups.com
> For more options, visit this group at http://groups.google.com/group/nanoc

--
email: fe...@seconddrawer.com.au
web: http://seconddrawer.com.au/
gpg: E6FC 5BC6 268D B874 E546 8F6F A2BB 220B D5F6 92E3

Please don't send me Word or PowerPoint attachments.
See http://www.gnu.org/philosophy/no-word-attachments.html

[Chris Eppstein]

This sounds pretty complicated.

I would do it like this:

http://gist.github.com/416803 (Untested code)

Basically, the idea is that you make sure your javascripts are items, don't compile them, only route the ones that are marked as not compressed.

Then, just do some basic iteration via erb in one of your javascript files to concatenate them.

If you want to compress it, you can add a filter to it in the compilation step. this is left as an exercise to the reader ;)

Chris

[Felix]

Complicated, yes (it does concatenation, compression and status), but
its not peculiar to nanoc.

-felix

On Thu, May 27, 2010 at 10:46:04PM -0700, Chris Eppstein wrote:
> This sounds pretty complicated.
>
> I would do it like this:
>
> http://gist.github.com/416803 (Untested code)
>

> <http://gist.github.com/416803>Basically, the idea is that you make sure

> > nanoc+un...@googlegroups.com <nanoc%2Bunsu...@googlegroups.com>

> > > For more options, visit this group at
> > http://groups.google.com/group/nanoc
> >
> > --
> > email: fe...@seconddrawer.com.au
> > web: http://seconddrawer.com.au/
> > gpg: E6FC 5BC6 268D B874 E546 8F6F A2BB 220B D5F6 92E3
> >
> > Please don't send me Word or PowerPoint attachments.
> > See http://www.gnu.org/philosophy/no-word-attachments.html
> >
> > --
> > You received this message because you are subscribed to the nanoc
> > discusssion group.
> >
> > To post to this group, send email to na...@googlegroups.com
> > To unsubscribe from this group, send email to

> > nanoc+un...@googlegroups.com <nanoc%2Bunsu...@googlegroups.com>

[Carter Charbonneau]

The best way would be to use route to combine them.

> > nanoc+unsubscribe@googlegroups.com <nanoc%2Bunsubscribe@googlegroups.com>

> > > For more options, visit this group at
> > http://groups.google.com/group/nanoc
> >
> > --
> >  email: fe...@seconddrawer.com.au
> >    web: http://seconddrawer.com.au/
> >    gpg: E6FC 5BC6 268D B874 E546 8F6F A2BB 220B D5F6 92E3
> >
> > Please don't send me Word or PowerPoint attachments.
> > See http://www.gnu.org/philosophy/no-word-attachments.html
> >
> > --
> > You received this message because you are subscribed to the nanoc
> > discusssion group.
> >
> > To post to this group, send email to na...@googlegroups.com
> > To unsubscribe from this group, send email to

> > nanoc+unsubscribe@googlegroups.com <nanoc%2Bunsubscribe@googlegroups.com>

> > For more options, visit this group at http://groups.google.com/group/nanoc
> >
>
> --
> You received this message because you are subscribed to the nanoc discusssion group.
>
> To post to this group, send email to na...@googlegroups.com

> To unsubscribe from this group, send email to nanoc+unsubscribe@googlegroups.com

> For more options, visit this group at http://groups.google.com/group/nanoc