Laravel 前端工作流介绍

Laravel 前端工作流#

接下来讲解 Laravel 是如何利用 Sass, NPM, Yarn, Laravel Mix 来构成一套完整的前端工作流。

SASS 语法基础#

Sass 是一种可用于编写 CSS 的语言，起初由 Hampton Catlin 进行设计并由 Natalie Weizenbaum 开发。借助 Sass 我们可以少写很多 CSS 代码，并使样式代码的编写更加灵活多变。接下来我们将对 Sass 的几个主要功能进行讲解。

1. 样式文件导入#

Sass 使用 @import 来导入其它的样式文件。如：

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

上面代码将导入存放在 node_modules/bootstrap-sass/assets/stylesheets/bootstrap 文件夹中的所有样式文件。你也可以使用下面代码来对单独一个文件进行导入：

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss";
2. 变量#

Sass 还允许你在代码中加入变量，所有的变量均以 $ 开头。

$navbar-color: #3c3e42;.navbar-inverse {  background-color: $navbar-color;}

上面代码定义了一个 $navbar-color 颜色变量，在编译成功之后，变量将被替代为它所对应的值。

3. 嵌套#

Sass 还允许你在选择器中进行相互嵌套，以减少代码量。

body div {  color: red;}body h1 {  margin-top: 10px;}

可写成：

body {  div {    color: red;  }  h1 {    margin-top: 10px;  }}
4. 引用父选择器#

你还可以在 Sass 嵌套中使用 & 对父选择器进行引用：

a {  color: white;}a:hover {  color: blue;}

可改写为：

a {  color: white;  &:hover {    color: blue;  }}
NPM, Yarn, Laravel Mix#
1. NPM#

注意以下区块中 npm 安装相关的命令只用于说明，不需要在命令行中运行。我们将在本文后面使用 Yarn 来作为我们的安装器。

NPM 是 Node.js 的包管理和任务管理工具，其强大的功能也是 Node.js 能够如此成功的因素之一。在使用 NPM 安装第三方模块（也可理解为扩展包）时，你需要在 package.json 中对要安装的模块指定好名称和版本号。然后运行下面命令进行安装：

$ npm install

在开始安装之前，npm install 命令会先检查 node_modules 文件夹是否已存在要安装的模块，如果该模块已安装，则跳过，接着安装下一模块。安装完成后，所有的第三方模块都将被下载到 node_modules 文件夹中。你也可以使用下面命令来强制安装所有模块，不管该模块之前是否安装过：

$ npm install -f

由于国内的网络环境原因，我们在使用 NPM 安装第三方模块模块时会耗费较长时间，为此我们可通过淘宝提供的 cnpm 镜像来解决该问题。如果你的虚拟机是通过本教程提供的 Homestead 安装包进行安装，则可以使用 cnpm命令来代替 npm，如安装第三方模块时可使用下面命令替代：

$ cnpm install

在本教程中，出于效率考虑，我们使用更加现代化的 Yarn 来替代 NPM 的包管理功能。然而我们仍然会使用到 NPM 的任务管理功能，如命令 npm run watch-poll。

2. Yarn#

Yarn 是 Facebook 在 2016 年 10 月开源的一个新的包管理器，用于替代现有的 NPM 客户端或者其他兼容 NPM 仓库的包管理工具。Yarn 在保留 NPM 原有工作流特性的基础上，使之变得更快、更安全、更可靠。在后面的项目开发中，我们统一使用 Yarn 来代替 NPM 进行安装包的管理。

我们可通过下面命令来安装当前项目的所有包：

$ yarn install

或是使用下面这种更加简洁的命令：

$ yarn

当执行 yarn install 命令时，Yarn 会先判断当前文件夹中是否存在 yarn.lock 文件，存在的话会按照文件中特定的包版本进行安装，否则读取 package.json 文件中的内容并发送到服务器上解析，解析成功后把结果写入 yarn.lock 文件中，最后安装扩展包。 Laravel 自带 yarn.lock 文件，此文件的作用与 composer.lock 一致，是为了保证项目依赖代码版本号绝对一致而存在的。

另外，我们也可以通过下面命令来添加指定的包：

$ yarn add [package
3. Laravel Mix#

Laravel Mix 一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器，通过简单的调用，你可以轻松地管理前端资源。我们可以在 webpack.mix.js 文件中制定一些如资源文件的编译、压缩等任务。Laravel 已默认为我们生成了 webpack.mix.js 文件，并集成了 laravel-mix 模块。

webpack.mix.js

let mix = require('laravel-mix');mix.js('resources/assets/js/app.js', 'public/js')   .sass('resources/assets/sass/app.scss', 'public/css');let mix = require('laravel-mix');

webpack.mix.js 的解析引擎是 Node.js ，在 Node.js 中require 关键词是对模块进行引用。

Mix 提供了一些函数来帮助你使用 JavaScript 文件，像是编译 ECMAScript 2015、模块编译、压缩、及简单的合并纯 JavaScript 文件。更棒的是，这些都不需要自定义的配置。

mix.js('resources/assets/js/app.js', 'public/js')

以上这一行简单的代码，支持：

• ECMAScript 2015 语法；
• Modules；
• 编译 .vue 文件；
• 针对生产环境压缩代码。
  

js 方法的第二个参数可以用来自定义生成的 JS 文件的输出目录。

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

sass 方法可以让你将 Sass 文件编译为 CSS，你可以使用第二个参数来自定义生成的 CSS 的输出目录。

开始使用 Mix#

使用 Mix 很简单，首先你需要使用以下命令安装 npm 依赖：

$ yarn install

安装成功后，运行以下命令即可：

$ npm run watch-poll

watch-poll 会在你的终端里持续运行，监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下，一旦资源文件发生变化，Webpack 会自动重新编译。

在后面的课程中，我们需要保证 npm run watch-poll 一直处在执行状态中。

好好学习，天天向上。