ThinkPHP5 前端工作流

本文参考 Laravel 前端工作流，主要介绍 ThinkPHP5/Laravel 是怎样利用 Sass，NPM，Yarn，Laravel Mix 来构成一套完整的前端工作流。

1. SASS 语法基础

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

1.1 样式文件导入

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

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

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

@import "node_modules/bootstrap-sass/asserts/stylesheets/bootstrap/_alerts.scss";

1.2 变量

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

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

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

1.3 嵌套

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

body div {
    color: red;
}

body h1 {
    margin-top: 10px;
}

可写成：

body {
    div {
        color: red;
    }

    h1 {
        margin-top: 10px;
    }
}

1.4 引用父选择器

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

a {
    color: white;
}

a:hover {
    color: blue;
}

可改写为：

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

2. NPM

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

NPM 是 Node.js 的包管理和任务管理工具，其强大的功能也是 Node.js 能够如此成功的因素之一。在使用 NPM 安装第三方模块（也可以理解为扩展包）时，需要在 package.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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.16.2",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.1.10"
    }
}

然后运行下面的命令进行安装：

npm install

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

由于国内的网络环境原因，我们在使用 NPM 安装第三方模块时会耗费比较长的时间，为此我们可以通过淘宝提供的 cnpm 镜像来解决该问题。如安装第三方模块时，可以使用下面的命令替代：

cnpm install

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

3. Yarn

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

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

yarn install

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

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

yarn add [package]

4. 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 的输出目录。

4.1 使用 Mix

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

yarn install

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

npm run watch-poll

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