样式美化

Bootstrap

Lravel默认集成了一些NPM扩展包，我们着重看一下几个：
* bootstrap-sass—–Bootstrap NPM扩展包；
* jquery——-jQuery BPM扩展包
* laravel-mix——由Laravel官方提供的静态资源管理工具
* vue——VUE.js前端框架

我们可以使用NPM对这些扩展包进行安装，但由于NPM的安装速度，安全性和稳定性都饱受开发者的诟病，，因此我们改用Facebook在2016年10月份开元的Yarn来作为NPM的替代品。

1. 在项目根目录下运行一下命令进行安装

yarn install --no-bin-links
yarn add cross-env

1. **编辑app.scss文件，删除此文件里的所有内容，只留下面一行，导入Bootstrap：

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

.scss是Sass（一种CSS开发工具）专属的文件格式

1. 将Bootstrap导入陈宫之后，我们需要使用以下命令来讲.scss文件编译为.css才能正常使用

npm run dev

1. 我们也可以通过下面的命令，在每次检测到.scss文件发生更改时，自动将其编译为.css文件

npm run watch-poll

请保证在进行项目开发时npm run watch -polkl一直运行着，避免出现前端文件更改后没有应用到页面上的歧义

Laravel前端工作流

SASS语法基础

Sass是一种可用于编写CSS的语言，借住Sass我们可以少些很多CSS代码，并使样式代码得编写更加灵活多变。
1. 样式文件导入
Sass使用@import来导入其它的样式文件。如：

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

sass/asset/stylesheets/bootstrap文件夹中的所有样式文件。你可以使用下面代码来对单独一个文件进行导入

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

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

$navbar-color:#3c3e42;
.navbar-inverse{
    background-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是Node.js的包管理和任务管理工具，其强大的功能也是Node.js能够如此成功的因素之一。在使用NPM安装第三方模块（也可理解为扩展包）时，你需要在package.json中对要安装的模块制定好名称和版本号。然后运行下面命令进行安装：

npm install

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

npm install -f

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

cnpm install

首次安装：
登录网站http://nodejs.cn/download/，下载对应系统的.msi文件进行安装，下载.zip压缩包，然后把压缩包的bin目录配置到环境变量里面。
2. Yarn
Yarn 是 Facebook 在 2016 年 10 月开源的一个新的包管理器，用于替代现有的 NPM 客户端或者其他兼容 NPM 仓库的包管理工具。Yarn 在保留 NPM 原有工作流特性的基础上，使之变得更快、更安全、更可靠。
通过下面命令来安装当前项目的所有包：

yarn install

或者

yarn

也可以通过下面命令来添加指定的包：

yarn add [package]

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

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会自动重新编译。