> Laravel Mix 是 Laravel 提供的前端脚本构建工具，能够用几种常用的 CSS 和 JavaScript 预处理器处理项目脚本。 > Laravel Mix 是从 Laravel 5.4 起提供的 JavaScript 和 CSS 编译工具，之前是用 Laravel Elixir。区别是，前者是基于 Webpack，后者是基于 Gulp。 > 更多方法和帮助请看：[Laravel Mix](http://laravelacademy.org/post/8254.html) > 前后台资源合并分离：[Laravel自定义webpack.mix.js](https://segmentfault.com/a/1190000010437630) ## 安装 node - 安装 node、npm - 查看版本：node -v/npm -v ## Laravel 中安装 > 在 laravel5.4之后开始支持 查看 `package.json` 文件中，包含 `laravel-mix` 执行 `npm install` 。若在windows上执行 `npm install --no-bin-links` > 如果报错 cross-env ，则执行 `npm install --save-dev cross-env` 进行安装 ### 查看 Laravel Mix 项目根目录下编辑 `package.json` 文件，用来定义 Node 依赖 ```json { "private": true, "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", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.17", "bootstrap-sass": "^3.3.7", "cross-env": "^5.2.0", "jquery": "^3.2", "laravel-mix": "^1.0", "lodash": "^4.17.4", "vue": "^2.5.7" } } ``` ### 配置使用 - 查看项目根目录下是否存在 `webpack.mix.js`，没有则复制一份项目的根目录（备份好原有的配置文件）： `cp -r node_modules/laravel-mix/setup/webpack.mix.js ./` - 添加要处理的资源 ```javascript mix.js('src/app.js', 'dist/') .sass('src/app.scss', 'dist/'); ``` - 运行 `npm run dev` 适用于开发环境，最终输出的代码不会被压缩 `npm run production` 适用于生产环境，最终输出的代码会被压缩 - 使用版本号 在 `webpack.mix.js` 中，使用如下代码加版本号： ```javascript // 生产环境添加版本号 if (mix.config.inProduction) { mix.version(); } ``` 加版本号后，会在 `public`目录下生成 `mix-manifest.json` 文件，用来记录版本变化。 mix() 方法的参数其实是一个 Key ，而不是一个文件名。mix() 方法从 `mix-manifest.json` 文件中找到 Key 对应的 Value 的再导入。 在视图中使用 Laravel 全局的 mix 函数来加载相应的带哈希值的前端资源。mix 函数会自动判当前的已哈希文件名： ```html <link rel="stylesheet" href="{{ mix('css/app.css') }}"> <script src="{{ mix('js/app.js') }}"></script> ```
