Created
April 9, 2012 22:19
-
-
Save necolas/2347014 to your computer and use it in GitHub Desktop.
Simple, quick way to concatenate, minify, and version static files in a Wordpress theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Filename-based cache busting | |
# taken from https://github.com/h5bp/html5-boilerplate/ | |
# This rewrites file names of the form `name.123456.js` to `name.js` | |
# so that the browser doesn't use the cached version when you have | |
# updated (but not manually renamed) the file. | |
<IfModule mod_rewrite.c> | |
Options +FollowSymlinks | |
RewriteEngine On | |
RewriteCond %{REQUEST_FILENAME} !-f | |
RewriteCond %{REQUEST_FILENAME} !-d | |
RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] | |
</IfModule> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/bin/sh | |
# Run `bash build.sh` from within the theme's directory whenever | |
# you need to perform these tasks. | |
# A separate `watch.sh` script is better for continuous compilation | |
# of `.scss` files during development. | |
# Update any paths as needed. This example relies on all the theme's | |
# `.scss` files being in a `scss` directory, and all the `.js` files | |
# being in a `js` directory. | |
# Concatenate and minify the CSS | |
# Requires: Sass (Ruby) | |
END_CSS="style.css" | |
END_MIN_CSS="style.min.css" | |
SASS_COMMAND="sass --load-path scss --style" | |
$SASS_COMMAND expanded scss/style.scss:$END_CSS | |
$SASS_COMMAND compressed scss/style.scss:$END_MIN_CSS | |
echo "SCSS-to-CSS build compilation successful" | |
# Concatenate all JS files to into `site.js` | |
# Explicitly name and order the files if needed | |
cat js/*.js > js/site.js | |
echo "JS concatenation successful" | |
# Minify the combined JS | |
# Requires: UglifyJS (Node) | |
uglifyjs --output js/site.min.js js/site.js | |
echo "JS uglification successful" | |
exit 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
* Check environment | |
*/ | |
function is_prod() { | |
if ( home_url() == '<production-url>' ) { | |
return true; | |
} | |
else { | |
return false; | |
} | |
} | |
/* | |
* Basic file versioning | |
* Note: probably better to use `md5_file` instead of `filemtime` | |
* http://www.php.net/manual/en/function.md5-file.php | |
*/ | |
function version($filename) { | |
// get the absolute path to the file | |
$pathToFile = TEMPLATEPATH . '/' . $filename; | |
//check if the file exists | |
if (file_exists($pathToFile)) { | |
$needle = '.'; | |
// return the versioned filename based on the last modified time | |
$versioned = '.' . filemtime($pathToFile) . '.'; | |
// the position of the last instance of '.' | |
$pos = strrpos($filename, $needle); | |
if ($pos !== false) { | |
// replace and return | |
return '/' . substr_replace($filename, $versioned, $pos, strlen($needle)); | |
} | |
} | |
else { | |
// return the original filename | |
return '/' . $filename; | |
} | |
} | |
?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// other code | |
// only reference the minified file in production | |
// version which ever file is referenced | |
is_prod() ? $cssfile = 'style.min.css' : $cssfile = 'style.css'; | |
echo '<link rel="stylesheet" href="' . get_bloginfo('stylesheet_directory') . version($cssfile) . '">'; | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment