第二章 前端工作流

Laravel 利用 NPM, Yarn, Laravel Mix 构成了一套完整的前端工作流。 [TOC] ## Yarn 可以使用 [NPM](https://github.com/npm/npm) 对前端扩展包进行安装，但由于 NPM 的安装速度、安全性和稳定性等都饱受开发者的诟病，因此改用 Facebook 在 2016 年的 10 月份开源的 [Yarn](https://github.com/yarnpkg/yarn) 来作为 NPM 的替代品。 本教程提供的定制化 Homestead 安装包中，已默认集成了 Yarn，因此不必再重复安装 Yarn。如果想知道 Yarn 具体的安装方式，可查阅 [Yarn 官方安装文档](https://yarnpkg.com/en/docs/install)。 ## Laravel Mix [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) 一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，来为 Laravel 应用定义 Webpack 编译任务。 Mix 支持许多常见的 CSS 与 JavaScript 预处理器，通过简单的调用，可以轻松地管理前端资源。此外还可以在 webpack.mix.js 文件中制定一些，如资源文件的编译、压缩等任务。 Laravel 已默认生成了 `webpack.mix.js` 文件，并集成了 laravel-mix 模块。可以通过简单的方法链，流式定义资源管道。例如： ~~~javascript mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css'); ~~~ ## SASS Sass 是一种可用于编写 CSS 的语言，起初由 Hampton Catlin 进行设计并由 Natalie Weizenbaum 开发。借助 Sass 可以少写很多 CSS 代码，并使样式代码的编写更加灵活多变。