laravel mix有什么用

laravel mix用于管理前端任务，它是一款前端任务自动化管理工具，可使用工作流的模式对制定好的任务依次执行；Mix提供了简洁流畅的API，让开发者能够为Laravel应用定义Webpack编译任务，可以轻松地管理前端资源。

本教程操作环境：windows7系统、Laravel6版，DELL G3电脑。

laravel mix是什么？有什么用？

Laravel Mix 一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器，通过简单的调用，你可以轻松地管理前端资源。

默认文件和文件夹结构

默认 Sass 文件在 resources/assets/sass/app.scss 中（文件的内容是完全一样的），而默认的 JS 文件在 resources/assets/js/app.js（因为文件是完全相同的，所以想要学习更多关于 Vue 在 5.3 中的基础结构，可以查看 Matt Stauffer 写的 5.3 的前端结构 这一帖子）。

如果你深入到 app.js 中引用的 bootstrap 文件（ resources/assets/js/bootstrap.js ），你会看到我们使用Axios 而不是 Vue-Resource 来设置 X-CSRF-TOKEN（ Vue-Resource 在 2016 年之后将不再工作）。

如果你在 Mix 的项目上运行 npm run dev，可以看到：

默认情况下，我们生成的文件的位置与 Elixir 相同：public/css/app.css 和 public/js/app.js 。

主要 Mix 方法

正如你所见，你可以轻松的使用 Mix 处理 Sass 和 JS。Sass，显而易见，运行 Sass 文件，并将其输出为 CSS。用 JS 方法支持 ECMAScript 2015 语法、编译 .vue 文件、针对生产环境压缩代码以及对 JavaScript 文件进行其他处理。

还可以用 .less 方法将 Less 编译为 CSS：

mix.less('resources/assets/less/app.less', 'public/css');

用 combine 方法将文件组合在一起：

mix.combine([
    'public/css/vendor/jquery-ui-one-thing.css',
    'public/css/vendor/jquery-ui-another-thing.css'
], 'public/css/vendor.css');

用 copy 复制文件或目录：

mix.copy('node_modules/jquery-ui/some-theme-thing.css', 'public/css/some-jquery-ui-theme-thing.css');
mix.copy('node_modules/jquery-ui/css', 'public/css/jquery-ui');

与 Elixir 不同，Source Maps 默认情况下是关闭的，可以在 webpack.mix.js 中调用以下方法来开启：

mix.sourceMaps();

默认情况下 Mix 会以系统通知的方式告知你编译结果，如果不希望它们运行，可以使用 disableNotifications() 方法禁用。

Mix.manifest.json 和 缓存清除

熟悉 Elixir 的人可能会注意到上面的输出图像有一点与 Elixir 不同：Mix 正在生成一个开箱即用的清单文件 public/mix-manifest.json。 当然，Elixir 也会生成清单文件：public/build/rev-manifest.json，与 Mix 直接生产不同，它只会在确定启用了缓存清除（版本控制）的功能时生成它。

这些清单文件是用来映射前端文件与已经版本化处理的前端文件副本，例如： /js/app.js 与 /js/app-86ff5d31a2.js 之间的映射。有了这个文件就可以在 HTLM 用简单的引用指向该引用的版本化文件。例如