If you’re like me and you enjoy compressing all your text based static files (such as CSS and JS) ready for production then I’m sure you’ve been in the pickle where you’ve wanted to use the local uncompressed files but also not need to edit anything before deployment. Well, here’s a little bit of code I like to use, in this case it’s been adapted for WordPress’s footer:
<?php if ( $_SERVER[ 'HTTP_HOST' ] === 'workshops.dev' ): ?>
<script>
<!--
var s = [
'jquery', 'modernizr', 'suitcase'
];
var t = ( new Date() ).getTime();
while ( s.length )
{
document.write( '<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/js/' + s.shift() + '.js?x=' + t + '"></' + 'script>' );
}
-->
</script>
<?php else: ?>
<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/js/packaged.js"></script>
<?php endif; ?>
<script>
<!--
var s = [
'jquery', 'modernizr', 'suitcase'
];
var t = ( new Date() ).getTime();
while ( s.length )
{
document.write( '<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/js/' + s.shift() + '.js?x=' + t + '"></' + 'script>' );
}
-->
</script>
<?php else: ?>
<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/js/packaged.js"></script>
<?php endif; ?>
I’m very organised and I like to keep my theme directory like so:
a_theme
- index.php
- style.css (this actually only contains the meta data, no CSS, just a linked to my compressed stuff)
- more php files...
- assets
- - js
- - - packaged.js (this is for the production and the <b>only</b> JS file uploaded)
- - - more js files...
- - css
- - - styles.less (again this is watched by the <a href="http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q=lesscss">LESSCSS</a> daemon so it compresses as I save)
- - - styles.css (this is the css file that the standard 'style.css' links to)
- - image (you can guess what this is)
- index.php
- style.css (this actually only contains the meta data, no CSS, just a linked to my compressed stuff)
- more php files...
- assets
- - js
- - - packaged.js (this is for the production and the <b>only</b> JS file uploaded)
- - - more js files...
- - css
- - - styles.less (again this is watched by the <a href="http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q=lesscss">LESSCSS</a> daemon so it compresses as I save)
- - - styles.css (this is the css file that the standard 'style.css' links to)
- - image (you can guess what this is)
And so on.
