如何使用 bower、gulp 和 elixir 在 Laravel 5 中安装引导程序？答案

【问题标题】：How to install bootstrap in Laravel 5 using bower, gulp and elixir?如何使用 bower、gulp 和 elixir 在 Laravel 5 中安装引导程序？
【发布时间】：2015-03-01 16:08:48
【问题描述】：

我将 bootstrap-sass-official 添加到我的凉亭依赖项到 bower_components。

我以这种方式编译并添加了引导 css 文件到 public（在 gulpfile.js 中）：

var paths = {
    'bootstrap': 'bower_components/bootstrap-sass-official/assets/',
    'jquery':    'bower_components/jquery/dist/'
};


elixir(function(mix) {
    mix.sass('app.scss', null, {includePaths: [paths.bootstrap + 'stylesheets/']});
});

在app.scss 中有一行@import '_bootstrap';。并且 css 文件被编译并且它们可以工作。

如何向页面添加引导字体和脚本？

【问题讨论】：

你确定这个问题甚至与 Elixir 有关吗？
@OnorioCatenacci 我的意思是 Laravel Elixir：github.com/laravel/elixir
总是很高兴向您的解决方案的来源致敬，以供其他人阅读 - laravel-news.com/2014/10/setting-laravel-elixr-bootstrap

标签： twitter-bootstrap laravel-5 gulp bower laravel-elixir

【解决方案1】：

我找到了解决办法：

mix.scripts(
    '*',
    'resources/assets/javascripts',
    'public/js/app.js'
);
mix.scripts(
    [
        paths.jquery + 'jquery.js',
        paths.bootstrap + 'javascripts/bootstrap.js'
    ],
    'public/js/dependencies.js',
    'bower_components'
);
mix.copy(paths.bootstrap + 'fonts/bootstrap/', "public/fonts/");

【讨论】：

【解决方案2】：

我的解决方案，我很自豪。

/gulpfile.js

var elixir = require('laravel-elixir');

// Set your Bower target directory below.
var bowerDir = './vendor/bower_components';

// Helper function.
function bower(pkg, path) {
    return [bowerDir, pkg, path].join('/');
}

elixir(function (mix) {
    // Styles
    mix.sass('app.scss', null, {includePaths: [bowerDir]});

    // Fonts
    mix.copy(bower('bootstrap-sass', 'assets/fonts/**'), 'public/build/fonts');

    // Scripts
    mix.scripts([
        bower('jquery', 'dist/jquery.min.js'),
        bower('bootstrap-sass', 'assets/javascripts/bootstrap.min.js')
    ]);

    // Versioning
    mix.version([
        'css/app.css',
        'js/all.js'
    ]);
});

/resources/assets/sass/app.scss

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

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

PhpStorm 的额外提示

在 PhpStorm 中将 bowerDir 设置为资源根。这样您就可以摆脱警告。

使用 Ctrl+Space 显示路径自动补全。

【讨论】：

整洁！那些 phpstorm 警告真的很烦人