最近正好遇到一个需求，是前端那边要求我们要能够监控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就会同步编译最新的文件