By Yan Li
A PHP Yii framework extension to minify JavaScript and CSS files for a web page.
- Minify each JavaScript and CSS files before deployment (during build stage):
- For each JavaScript/CSS file we have, generated a minified version in same directory, and name it with a .min suffix;
- e.g. Minified version of
~/src/css/style.cssshould be named as~/src/css/style.min.css
- Concatenate the JavaScript/CSS files required on the page at run-time
- Create a new extension directory for your Yii application:
~/protected/extensions/minify - Download both src/MinifyClientScript.php and LICENSE.md, put them into
~/protected/extensions/minify - Update your Yii application configuration file(usually named
/protected/config/main.php) and replace the Yii CClientScript withMinifyClientScript - Before deploying, minify the individual JavaScript and CSS files:
- You can do it with Ant-MinifyJsCss
- Pack your application sources and deploy
Sample Yii application configuration file:
return array(
'basePath' => __DIR__ . '/..',
'name' => 'Your App Name',
'preload' => array('log'),
'import' => array(
'application.models.*',
'application.components.*',
'application.extensions.*'
),
'clientScript' => array(
'class' => 'ext.minify.MinifyClientScript',
'minify' => !YII_DEBUG, // Disable minifying while developing
// put all js files before end </body> tag
// note this setting won't affect css files, they will be put in <head>
'coreScriptPosition' => CClientScript::POS_END,
'packages' => array(
'home_page' => array(
'baseUrl' => '',
'js' => array(
'bower_components/jquery/jquery.js',
'bower_components/angular/angular.js',
'bower_components/bootstrap/dist/js/bootstrap.js',
'js/home/home_index.js'
),
'css' => array(
'bower_components/bootstrap/dist/css/bootstrap.css',
'css/home/home_index.css'
)
)
)
)
);It requires sticky session from load balance server, otherwise you'll encounter HTTP 404 problems.
- EClientScript: https://github.com/muayyad-alsadi/yii-EClientScript