Laravel mix样式美化
2018-07-03 本文已影响0人
__o__o
在开始使用 Mix 之前,必须先确保你的机器上安装了 Node.js 和 NPM。
node -v
npm -v
Laravel Mix
然后就只需要安装 Laravel Mix。在新的 Laravel 项目中,你可以在目录结构的根目录中找到一个 package.json
文件,它包括了运行基本的 Mix 所需的内容。就如同 composer.json 文件,只不过它定义的是 Node 的依赖而不是 PHP。你可以使用以下的命令安装它引用的依赖项:
npm install
如果你正在 Windows 系统上进行开发,或者在 Windows 主机系统上运行虚拟机,那你要在运行 npm install命令时使用 --no-bin-links:
npm install --no-bin-links
Laravel 默认集成了一些 NPM 扩展包,我们重点看以下几个:
- bootstrap-sass —— Bootstrap NPM 扩展包;
- jquery —— jQuery NPM 扩展包;
- laravel-mix —— 由 Laravel 官方提供的静态资源管理工具;
- vue —— VUE.js 前端框架;
这些扩展包,为 Laravel 提供了一套完整的前端工作流。
我们可以使用 NPM 对这些扩展包进行安装,但由于 NPM 的安装速度,安全性和稳定性等都饱受开发者的诟病,因此我们改用 Facebook 在 2016 年的 10 月份开源的 Yarn 来作为 NPM 的替代品。现在先让我们使用 Yarn 对扩展包进行安装,请在项目根目录下运行以下命令进行安装:
$ yarn install --no-bin-links
$ yarn add cross-env
运行 Mix
Mix 是位于 Webpack 顶部的配置层,所以要运行 Mix 任务,只需要执行默认的Laravel package.json 文件中包含的一个 NPM 脚本:
// 运行所有 Mix 任务...
npm run dev
// 运行所有 Mix 任务并缩小输出..
npm run production
监控资源文件修改
npm run watch
会在你的终端里持续运行,监控所有相关的资源文件以便进行更改。
Webpack 会在检测到文件更改时自动重新编译资源:
npm run watch
在某些环境中,当文件更改时,Webpack 不会更新。如果系统出现这种情况,请考虑使用watch-poll
命令在后台运行:
npm run watch-poll &