使用 Laravel Elixir 设置 Bootstrap Sass

Laravel Elixir 是一个很棒的软件包，简化了使用 Gulp 的过程。对于不熟悉 Gulp 的人来说，它是一个 JavaScript 任务运行器，允许您自动化任务。它可以用于编译 CSS、连接和压缩 JavaScript，以及更多功能。

Gulp 旨在通过利用节点流比以前的构建工具更快，并已成为主要的构建系统之一。Laravel Elixir 是 Gulp 的一个包装器，使设置变得轻而易举。

在本教程中，让我们看看如何在默认的 Laravel 5.1 安装中使用 Elixir 设置 Bootstrap Sass。

#安装 NPM 依赖项

Bootstrap 和 Elixir 都是通过 NPM（节点包管理器）提供的节点包。如果您打开默认的 package.json 文件，您将看到一个依赖项列表。

"dependencies": {
    "laravel-elixir": "^3.0.0",
    "bootstrap-sass": "^3.0.0"
}

从终端运行 npm install，这两个包以及它们的任何依赖项都将被安装。如果您熟悉 PHP 的 Composer，那么它几乎是相同的。

命令运行完成后，您可以在 node_modules 文件夹中查看所有包的列表。

#Bootstrap Sass

将 Bootstrap 实现到您的项目中现在很简单。打开 resources/assets/sass/app.scss 并取消注释此行

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

保存它并运行 gulp，然后您将拥有所有可供您使用的 Bootstrap 样式。这实际上是唯一需要做的事情。

#定制 Bootstrap 样式

如果您对默认的 Bootstrap 设计不满意，可以通过覆盖其变量轻松地进行定制。例如，让我们将默认字体更改为来自 Google Fonts 的 Lato。

再次打开 resources/assets/sass/app.scss，我们可以导入字体并调整变量。以下是包含这些更改的整个文件

@import url(https://fonts.googleapis.com/css?family=Lato);
$font-family-sans-serif: 'Lato', sans-serif;
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

它的工作原理是，我们首先从 Google 导入 Lato 字体。接下来，我们覆盖 Bootstrap 现有的字体系列变量。之所以有效，是因为 Bootstrap 使用了 Saas 的 !default。以下是如何描述它

如果变量尚未被分配，您可以分配给变量，方法是在值末尾添加 !default 标志。这意味着如果变量已经分配了，它将不会被重新分配，但如果它还没有值，它将被分配一个值。

要查找可以定制的所有变量列表，请打开

node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

#使用 Browserify 包含 Bootstrap JavaScript

为了包含 Bootstrap JavaScript，我们有几个选择。我们可以使用它们的 CDN，手动下载，或者使用一个名为 Browserify 的系统。

Browserify 允许您通过捆绑所有依赖项来在浏览器中 require('modules')。

因为我们已经通过 NPM 安装了 Bootstrap，所以我们可以利用 browserify 将它们拉入我们的 app.js 文件中。首先，我们需要安装 jQuery，并且可以通过 NPM 通过运行以下命令来完成

npm install jquery --save

现在，创建以下文件：resources/assets/js/app.js 并添加以下代码

window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');
 
$( document ).ready(function() {
    console.log($.fn.tooltip.Constructor.VERSION);
});

Bootstrap 期望 jQuery 是全局的，第一行我们包含 jQuery 并将其分配给 window。第二行正在引入 Bootstrap JavaScript。最后一部分只是一个 jQuery 就绪，并记录了 bootstrap 工具提示版本。它用于确认它按预期加载。

现在，让我们修改项目根目录中的 gulpfile.js

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

它的简洁性体现了 Elixir 的强大之处。只需添加 .browserify('app.js')，一切都会自动处理。保存后再次运行 gulp，这将被编译成 public/js/app.js

如果您在布局中包含它并在浏览器中加载站点，您应该在控制台中看到 3.3.5。

#更进一步

本教程只是简要介绍了 Elixir 的功能。查看 官方文档 获取更多信息，并确保查看 Laravel Elixir 类别获取更多教程和资源。