如何在 Laravel 5.1 中使用 Laravel Elixir 集成安装 Bootstrap

Laravel Bootstrap

Laravel Elixir 是一个用于简化处理Gulp的神奇的包,对不熟悉的人来说Gulp是一个允许你自动构建任务的JavaScript任务运行器。可以用来编译CSS、连接和最小化JavaScript以及更多其它任务。

Gulp被设计为通过使用node流成为比之前构建工具更快的构建工具,而Laravel Elixir封装了Gulp,并且使构建工作变得更加轻而易举。

下面我们就来看一个最常用的示例:使用Laravel Elixir在Laravel项目中集成Bootstrap。

1、安装NPM依赖

Bootstrap和Elixir都是可以通过NPM(node包管理器)安装的node包,如果你打开默认的package.json,可以看到起内容如下:

{
    "private": true,
    "devDependencies": {
        "gulp": "^3.8.8"
    },
    "dependencies": {
        "laravel-elixir": "^3.0.0",
        "bootstrap-sass": "^3.0.0"
    }
}

在命令行中,运行npm install,这样这两个包及其依赖都会被安装。其实该过程就类似使用Composer安装PHP依赖,原理是一样的。

npm install执行完成后,你会发现项目根目录下新增了一个node_modules文件夹,在该文件夹下包含了刚刚安装的两个包。

2、Bootstrap Sass

现在在Laravel项目集成Bootstrap非常简单。打开resources/assets/sass/app.scss,取消下面这行前面的注释:

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

保存修改并运行gulp,然后就会生成所有你需要的Bootstrap样式文件。

3、自定义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中已存在的字体变量font-family。这样之所以起作用是因为Bootstrap使用Sass的!default,下面是解释说明:

如果某个变量未被赋值,你可以通过添加!default标识到变量值的最后为该变量赋值。当然如果该变量已经被赋值,就不能再次赋值了。

如果你想查看所有的变量列表,可以打开这个文件:

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

4、使用Browserify引入Bootstrap JavaScript

要引入Bootstrap JavaScript我们有多个选择:使用它们的CDN、手动下载、或者使用Browserify。

Browserify允许你通过require('modules')在browser中打包所有依赖。

我们已经通过NPM安装了Bootstrap,接下来我们可以使用browserify将其导入app.js。首先,我们需要使用NPM安装jQuery:

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是全局的并且在所有js之前引入jQuery,然后紧随其后引入Bootstrap JavaScript。

现在我们编辑项目根目录下的gulpfile.js

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

就是这么简单,不过正因如此才显出Elixir的牛逼。只是添加一段.browserify('app.js'),所有东西都被自动处理。在再次运行完gulp之后Bootstrap JavaScript相关文件被编译到 public/js/app.js

最后将相应的Bootstrap样式文件和JavaScript文件引入布局文件,在浏览器的console中就可以看到3.3.5

本文为译文,英文原文:Setup Bootstrap Sass with Laravel Elixir

学院君 has written 1007 articles

Laravel学院院长,终身学习者

积分:119007 等级:P12 职业:手艺人 城市:杭州

26 条回复

  1. 此人已死 此人已死 says:
    @ biying 现在大部分插件不支持jquery 3.0 3.0改变和取消了一些常用的写法 目前建议用2.2.4
  2. lookas2001 lookas2001 says:
    学院君,这里貌似有坑。jquery在npm安装的时候默认安装jquery3而bootstrap不支持jquery3npm安装时貌似要做版本限制。。这是一个大坑浏览器控制台显示:Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3
  3. 小飞 小飞 says:
    关于bootstrap字体库的解决方法:This is what I have for the bootstrap fonts and it works well:elixir(function(mix) { mix.sass('app.scss'); mix.browserify('app.js'); mix.copy('./node_modules/bootstrap-sass/assets/fonts', 'public/fonts');});
  4. 赵福春 赵福春 says:
    @ 微凉清风 node-sass 被墙住了 用命令行无法安装的 这是我下好的 拿去用吧 https://yunpan.cn/cPI3SEfajJeX9 访问密码 a6b0 下载后扔到 node_modules 就没问题了
  5. 孙布斯 孙布斯 says:
    @ 孤锋 运行了,编译less、coffee没问题,编译sass就出问题

登录后才能进行评论,立即登录?