之前讲过从零开始部署一个 Laravel 项目
这次讲一下怎么自动压缩php模板文件
安装依赖
1 2 3 | cd / var /www/html/laravel-project
npm i -D laravel-mix@^5.x laravel-mix-template-minifier watch shelljs
|
登录后复制
压缩处理
打开文件webpack.mix.js
,并添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 | mix.minTemplate \= require ( "laravel-mix-template-minifier" );
mix.minTemplate( "storage/framework/views/\*.php" , "storage/framework/views/" , {
collapseInlineTagWhitespace: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeAttributeQuotes: false,
removeComments: true,
removeTagWhitespace: false,
trimCustomFragments: false,
});
|
登录后复制
压缩的参数,见html-minifier(https://github.com/kangax/html-minifier?spm=a2c6h.14275010.0.0.70f559611yXtvP)
监听文件变化
在项目根目录新建文件compress.js
,写入以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let shell = require ( "shelljs" );
let watch = require ( "watch" );
let precessing = false;
watch.watchTree( "./storage/framework/views" , function (f, curr, prev) {
if (!precessing) {
precessing = true;
shell. exec ( "npm run prod" );
setTimeout(() => {
precessing = false;
}, 5000);
}
});
|
登录后复制
开机自启监听命令
以上步骤完成后,在命令行执行node compress.js
,即可实现自动监听压损模板文件,可以打开网页看到页面内的<style>
以及<script>
中的内容已经压缩了。打开storage/framework/views/
中的模板文件,发现html已被压缩成一行,如果模板中有包含php
代码,则不会去除php
中的换行等。
有些页面的js
代码不会压缩,暂时没找到什么原因。
由于监听文件命令是常驻命令台的,所以我们要设置开机自启,并且后台启动该命令。
1 2 3 4 5 6 7 8 | nano /etc/rc.d/rc.local
# 添加以下内容
cd / var /www/html/ysmj-laravel
nohup node compress.js > / var /www/html/laravel-project/compress.out 2>&1 &
# 保存文件。然后设置权限使其开机自启
chmod +x /etc/rc.d/rc.local
|
登录后复制
优化
由于laravel
自带的package
命令npm run prod
中带有--progress
,长期使用,会导致压缩日志compress.out
日益过大。
在package.json
中,新添加compress
命令,去除--progress
参数,如下:
1 2 3 4 5 6 7 8 9 10 | "scripts" : {
"dev" : "npm run development" ,
"development" : "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" ,
"watch" : "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" ,
"watch-poll" : "npm run watch -- --watch-poll" ,
"hot" : "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js" ,
"compress" : "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" ,
"prod" : "npm run production" ,
"production" : "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
|
登录后复制
然后compress.js
文件需要修改,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let shell = require ( "shelljs" );
let watch = require ( "watch" );
let precessing = false;
watch.watchTree( "./storage/framework/views" , function (f, curr, prev) {
if (!precessing) {
precessing = true;
shell. exec ( "npm run compress" );
setTimeout(() => {
precessing = false;
}, 5000);
}
});
|
登录后复制