最近正好遇到一个需求,是前端那边要求我们要能够监控CSS和JS等前端资源文件内容改变,动态的给其添加版本号后缀,以解决浏览器缓存的问题。
因为我们的项目后端使用的是Laravel框架,所以就查了laravel框架有没有自带这个功能,翻看了官方文档,看到其提供了Mix这个功能,以下就是laravel框架使用Mix的流程
一、Mix安装【详细的安装流程大家可以看下官方文档】
1、安装node依赖【在运行 Mix 之前,要先确保您的机器上已经安装了Node和NPM】
npm install
2、运行Mix
npm run dev
3、监控资源文件的变化
npm run watch
其实简易的安装流程就是这样,安装的话其实没啥要将的,有了node和npm的话,执行上述命令就可。
二、配置编译信息
在我们初始化项目的时候,根目录有一个webpack.min.js,这个文件就是我们要修改的内容,关于实现我们标题的功能,主要是以下内容:
1、编辑css文件
mix.css('resources/css/app.css', 'public/css');
2、编辑js文件
mix.js('resources/js/app.js', 'public/js')
3、增加版本号
mix.version();
4、模板引用
<script src="{{ mix('/js/app.js') }}"></script>
因为前端的资源文件过多,所以我们不可能按照上述的一行一行的去引入,所以我们去动态的读取css和js资源文件夹,动态的设置,将编译的后的文件存放与public/mix下,前端引用的为此文件夹内的文件,以下为完整的配置的文件:
const mix = require('laravel-mix');
const fs = require('fs');
const path = require('path');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
/**
* 遍历指定目录下的所有文件
* @param {*} dir
*/
const getAllFile = function (dir) {
var res = [];
function traverse (dir) {
fs.readdirSync(dir).forEach((file) => {
const pathname = path.join(dir,file);
if (fs.statSync(pathname).isDirectory()) {
traverse(pathname);
} else {
res.push(pathname);
}
});
}
traverse(dir);
return res;
};
/**
* 动态注册文件
* @param files
*/
const registerFile = function (files) {
files.forEach((name) => {
var index = name.lastIndexOf('\\');
index = (index === -1) ? name.lastIndexOf('/') : index;
var path = name.slice(0, index).replace('resources', 'public/mix');
mix.copy(name, path);
});
};
// 动态加载js
const jsFiles = getAllFile('./resources/js/');
registerFile(jsFiles);
// 动态加载css
const cssFiles = getAllFile('./resources/css/');
registerFile(cssFiles);
mix.version();
三、线上部署
我们这边线上部署的话,我们这边是将npm run prod命令放在脚本里,当线上代码更新会自动执行此命令,这样的话npm run watch就没必要再放在脚本里,因为每次执行npm run prod就会同步编译最新的文件