Laravel Elixir 是一个包装器，简化了使用 Gulp 的工作，它使编译、连接、压缩和版本化 JavaScript 和 CSS 文件变得非常流畅和容易。

因为许多使用 Bootstrap 的项目，当你开始一个新的 Laravel 项目时，你会发现它默认包含为基本起点，但 Laravel 并不规定你应该使用哪些 JavaScript 或 CSS 框架。一个替代方案是 thoughtbot 创建的 Bourbon 和 Neat。

Bourbon 是一个用于 Sass 的 mixin 库，而 Neat 是一个 Bourbon 附加组件，用于创建语义网格。

在本教程中，我们将探讨如何使用 Laravel Elixir 设置这些工具。

#概述

Bourbon: 一个用于 Sass 的简单 mixin 和函数库，它可以帮助你避免冗长乏味的重复代码。例如，如果你在 Sass 文件中编写以下代码

section {
@include linear-gradient(to top, red, orange);
    font-family: $helvetica;
}

编译后的 CSS 将是

section {
    background-color: red;
    background-image: -webkit-linear-gradient(bottom, red, orange);
    background-image: linear-gradient(to top, red, orange);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

非常方便，Bourbon 包含很多函数、字体、大小、动画、过渡、色调、像素到 em 等等！这将帮助你加快 CSS 开发过程。查看 Bourbon 文档 中所有可用的 mixin。

Neat: 一个基于 Bourbon 构建的轻量级语义响应式网格，它专注于使你的标记干净且语义化。Neat 依赖于 Sass mixin，而不是像 Bootstrap 和其他 CSS 框架那样用表示类污染你的 HTML。

#Bourbon 和 Neat 安装

现在让我们看看如何使用 Elixir 设置 Bourbon 和 Neat。Bourbon 和 Neat 都可以作为节点包，可以通过 NPM（节点包管理器）安装，这与 PHP 的 Composer 几乎相同。

要使用 Elixir 使用 Bourbon 和 Neat，你可以使用以下两种方法之一。

#方法 1

首先，通过 npm 安装 bourbon 和 neat

npm install bourbon --save
npm install bourbon-neat --save

然后，打开 **resources/assets/sass/app.scss** 并添加以下内容

@import "node_modules/bourbon/app/assets/stylesheets/bourbon";
@import "node_modules/bourbon-neat/app/assets/stylesheets/neat";

确保你的 **app.scss** 添加到 Elixir 中的 sass 任务中，如下所示

elixir(function(mix) {
    mix.sass('app.scss');
});

最后，通过在你的终端中运行 `gulp` 命令来编译你的 app.scss 文件。

#方法 2

与第一种方法类似，通过 npm 安装 bourbon 和 neat

npm install bourbon --save
npm install bourbon-neat --save

然后，编辑你的 **gulpfile.js** 并添加以下内容

var bourbon = require('bourbon').includePaths;
var neat = require('bourbon-neat').includePaths;
 
elixir(function(mix) {
    mix.sass('app.scss', null, { includePaths: bourbon.concat(neat) } );
});

打开 **resources/assets/sass/app.scss** 文件并添加以下内容

@import "bourbon";
@import "neat";

最后，通过在你的终端中运行 `gulp` 命令来编译你的 **app.scss** 文件。

现在你已经将所有内容都配置到位，可以开始构建你的下一个项目了。

如果你正在寻找一个轻量级的语义工具，不妨试试 Bourbon 和 Neat。