下面我会详细讲解PHP实现动态压缩js与css文件的方法的完整攻略。
准备工作
在开始实现动态压缩js与css文件之前，需要先准备好以下两个工具：
可以使用npm快捷安装：
npm install uglify-js clean-css
实现步骤
- 需要先将需要压缩的js/css文件的路径（相对于根目录）存入一个数组中。以下示例代码存放在compress.php中。
```php
```
- 在需要压缩的页面上引入该php文件，以输出压缩后的代码。以下示例代码存放在index.php中。
```html
```
- 在compress.php中处理需要压缩的文件和输出压缩后的代码。以下为示例代码：
```php
code;
$css_content = '';
foreach ($css_files as $file) {
$css_content .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $file);
}
$css_content = \Minify_CSS::minify($css_content);
// 输出压缩后的代码
$js_file_path = $_SERVER['DOCUMENT_ROOT'] . '/js.min.js';
file_put_contents($js_file_path, $js_content);
echo "";
$css_file_path = $_SERVER['DOCUMENT_ROOT'] . '/css.min.css';
file_put_contents($css_file_path, $css_content);
echo "
";
?>
```
- 在示例中的js.php和css.php中，直接引用刚刚输出的压缩文件即可，示例代码如下：
```php
```
```php
```
示例说明
以下是两组示例。
示例一
有一页面需要引用几个js和css文件，分别是jquery.min.js、bootstrap.min.js、common.js、main.css和bootstrap.min.css。
- 将需要压缩的文件的路径（相对于根目录）存入一个数组中，示例代码如下：
php
$js_files = array(
'/js/jquery.min.js',
'/js/bootstrap.min.js',
'/js/common.js'
);
$css_files = array(
'/css/main.css',
'/css/bootstrap.min.css'
);
- 在需要引用js和css的页面中引入compress.php文件，示例代码如下：
html
<head>
<title>示例页面</title>
<?php include('compress.php'); ?>
<script>
<?php include('js.php'); ?>
</script>
<style>
<?php include('css.php'); ?>
</style>
</head>
- 在compress.php中处理需要压缩的文件和输出压缩后的代码，示例代码如下：
```php
// 目标文件
$js_files = array(
'/js/jquery.min.js',
'/js/bootstrap.min.js',
'/js/common.js'
);
$css_files = array(
'/css/main.css',
'/css/bootstrap.min.css'
);
// 调用uglify-js和clean-css进行压缩和合并
$js_content = '';
foreach ($js_files as $file) {
$js_content .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $file);
}
$js_content = \UglifyJS\JS::minify($js_content)->code;
$css_content = '';
foreach ($css_files as $file) {
$css_content .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $file);
}
$css_content = \Minify_CSS::minify($css_content);
// 输出压缩后的代码
$js_file_path = $_SERVER['DOCUMENT_ROOT'] . '/js.min.js';
file_put_contents($js_file_path, $js_content);
echo "";
$css_file_path = $_SERVER['DOCUMENT_ROOT'] . '/css.min.css';
file_put_contents($css_file_path, $css_content);
echo "
";
```
- 在示例中的js.php和css.php中，直接引用刚刚输出的压缩文件即可，示例代码如下：
```php
```
```php
```
示例二
有一页面需要引用很多JS和CSS文件，并且需要动态压缩。例如，需要引入bootstrap.min.css、font-awesome.css、swiper.min.css等12个CSS文件，并引用jquery.min.js、bootstrap.min.js等9个JS文件。
- 将需要压缩的文件的路径（相对于根目录）存入一个数组中，示例代码如下：
php
$js_files = array(
'/js/jquery.min.js',
'/js/bootstrap.min.js',
'/js/jqzoom-core.js',
'/js/lazyload.js',
'/js/jquery.mousewheel.js',
'/js/swiper.min.js',
'/js/jquery.cookie.js',
'/js/jquery.weui.js',
'/js/jquery.qrcode.min.js'
);
$css_files = array(
'/css/bootstrap.min.css',
'/css/font-awesome.css',
'/css/swiper.min.css',
'/css/reset.css',
'/css/style.css',
'/css/animate.min.css',
'/css/amazeui.min.css',
'/css/jquery.weui.css',
'/css/weui.css'
);
- 在需要引用js和css的页面中引入compress.php文件，示例代码如下：
html
<head>
<title>示例页面</title>
<?php include('compress.php'); ?>
<script>
<?php include('js.php'); ?>
</script>
<style>
<?php include('css.php'); ?>
</style>
</head>
- 在compress.php中处理需要压缩的文件和输出压缩后的代码，示例代码如下：
```php
// 目标文件
$js_files = array(
'/js/jquery.min.js',
'/js/bootstrap.min.js',
'/js/jqzoom-core.js',
'/js/lazyload.js',
'/js/jquery.mousewheel.js',
'/js/swiper.min.js',
'/js/jquery.cookie.js',
'/js/jquery.weui.js',
'/js/jquery.qrcode.min.js'
);
$css_files = array(
'/css/bootstrap.min.css',
'/css/font-awesome.css',
'/css/swiper.min.css',
'/css/reset.css',
'/css/style.css',
'/css/animate.min.css',
'/css/amazeui.min.css',
'/css/jquery.weui.css',
'/css/weui.css'
);
// 调用uglify-js和clean-css进行压缩和合并
$js_content = '';
foreach ($js_files as $file) {
$js_content .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $file);
}
$js_content = \UglifyJS\JS::minify($js_content)->code;
$css_content = '';
foreach ($css_files as $file) {
$css_content .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $file);
}
$css_content = \Minify_CSS::minify($css_content);
// 输出压缩后的代码
$js_file_path = $_SERVER['DOCUMENT_ROOT'] . '/js.min.js';
file_put_contents($js_file_path, $js_content);
echo "";
$css_file_path = $_SERVER['DOCUMENT_ROOT'] . '/css.min.css';
file_put_contents($css_file_path, $css_content);
echo "
";
```
- 在示例中的js.php和css.php中，直接引用刚刚输出的压缩文件即可，示例代码如下：
```php
```
```php
```
以上就是PHP实现动态压缩js与css文件的方法的完整攻略。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：PHP实现动态压缩js与css文件的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 