使用 Bootstrap 设置 Laravel Elixir

请注意：本教程针对 Laravel 5 和 Elixir 的测试版。您可以在此处找到最新教程：使用 Laravel Elixir 设置 Bootstrap Sass

本教程将出于历史原因保留在网站上，但您应该阅读新的教程。

---

Laravel 5 中的一项激动人心的功能是新的 Elixir 包。本质上，它是 gulp 的包装器，可以更轻松地处理资产。

为了第一次尝试这个新工具，我决定一个好的用例是设置 Bootstrap 并使其像在真实世界场景中一样工作。如果您不熟悉，Bootstrap 包含三个主要组件：CSS、JavaScript 和自定义字体。因此，我们需要在我们的设置中考虑所有这些。

#安装 Elixir

第一步是安装所有依赖项。我已经在我的机器上安装了 node，这是必需的。要验证您是否已安装它，可以运行

node -v

接下来，如果您还没有安装 gulp，请安装

npm install --global gulp

现在您已准备好开始。默认情况下，当您克隆 Laravel 5 时，它已包含一个 package.json 文件，这是 npm 使用的文件。可以将其视为您的 composer.json 文件用于 npm。由于它已包含，您只需运行以下命令

npm install

这将引入 Elixir 及其所有优点。

#安装 Bootstrap

您目前可以以两种方式获取 Bootstrap：Less 或 Sass。理想情况下，您会选择最熟悉的那个，在本指南中，我将使用 sass。

现在，有几种方法可以安装 Bootstrap。您可以使用 npm、bower 或下载 zip 文件、解压缩并将其物理移动。我决定使用 bower，因为它非常简单。

npm install -g bower

此时，我们需要为 bower 设置我们的应用程序。只需运行 bower init 并回答问题即可。如果您不知道任何问题的答案，也不要担心。只需点击继续。

完成后，创建一个新的 .bowerrc 文件，并在其中包含以下内容

{
  "directory": "vendor/bower_components"
}

这将把所有 bower 组件放在 vendor/ 文件夹中。当然，您可以使用任何目录，甚至可以使用默认目录。我选择这个位置是因为它已被忽略，并且我从未打算编辑这些文件中的任何一个。

最后，是时候真正安装 Bootstrap 了。在终端中，您可以运行 bower search bootstrap-sass，屏幕上将显示大量选项。

对我来说，看起来最好的一个是“bootstrap-sass-official”。我们都想要官方软件包，对吧？

现在我们安装它

bower install bootstrap-sass-official --save

请注意，我添加了 –save 标志，这样它会自动保存到 bower.json 文件中。

#Bootstrap SASS

当我开始一个新的 Bootstrap 项目时，我的工作流程是创建我自己的基础文件，该文件 @导入我需要的所有内容。

此设置的问题是 Elixir sass 任务不知道如何从 bower 找到导入文件。幸运的是，这是一个简单的修复方法

var paths = {
    'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
 
elixir(function(mix) {
    mix.sass("style.scss", 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});

在 mix.sass() 中，它接受三个参数。(src, output, options) 这里的关键是 options，对于 node-sass（在幕后使用），您可以定义自己的 includePaths 目录。

现在，当任务运行时，它知道尝试从您的 vendor/bower_components 目录中拉入 @imports。

#Bootstrap JavaScript 和字体

我计划永远不修改这些文件，因此我只需要将它们从 bower 移动到我的项目中。有几种方法可以做到这一点，但 Elixir 通过其“copy”组件提供了一种方法。让我向您展示该任务

.copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')

这将做的是获取路径并将所有文件复制到指定位置。在本例中是 public/fonts。

接下来是 JavaScript。Bootstrap 需要 jQuery，并且它包含它自己的文件集。Elixir 的 scripts 组件将为我们处理这些文件的连接。以下是该任务

.scripts([
    paths.jquery + "dist/jquery.js",
    paths.bootstrap + "javascripts/bootstrap.js"
], './', 'public/js/app.js');

这将做的是首先拉入 jQuery，然后拉入 bootstrap.js，最后将两者连接到 public/js/app.js 文件中。

#最终 Gulp 任务

现在，一切就绪，我们只剩下最后的 elixir 任务了

var elixir = require('laravel-elixir');
 
var paths = {
    'jquery': './vendor/bower_components/jquery/',
    'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
 
elixir(function(mix) {
    mix.sass("style.scss", 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
        .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
        .scripts([
            paths.jquery + "dist/jquery.js",
            paths.bootstrap + "javascripts/bootstrap.js"
        ], './', 'public/js/app.js');
});

这将构建我们的 sass、复制字体、合并所有脚本，最后将其放到 public 目录中，准备供我们使用。我已经创建了一个 gist，其中包含三个主要文件，如果您觉得更容易理解和复制粘贴，可以参考它。

如果您对此设置有任何疑问或意见，请随时在下方留言。