You are here

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

星期六, 2018-03-24 15:08 — adminshiping1

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

7 人觉得这篇文章很有用

学院君 has written 835 articles

终身学习者，Laravel学院院长

26 thoughts on “如何在 Laravel 5.1 中使用 Laravel Elixir 集成安装 Bootstrap”

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
回复
2016年7月21日 at 下午8:32

此人已死 says:
现在大部分插件不支持jquery 3.0 3.0改变和取消了一些常用的写法目前建议用2.2.4
回复
2016年7月22日 at 下午10:30

小飞 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’);});
回复
2016年7月11日 at 上午10:50
孙布斯 says:
编译Sass老是出错
C:phpStudyWWWlaravel>gulp
[20:25:07] Using gulpfile C:phpStudyWWWlaravelgulpfile.js
[20:25:07] Starting ‘default’…
[20:25:07] Starting ‘sass’…
[20:25:07] ‘sass’ errored after 41 ms
[20:25:07] Error: The `libsass` binding was not found in C:phpStudyWWWlaravel
node_modulesnode-sassvendorwin32-x64-47binding.node
This usually happens because your node version has changed.
Run `npm rebuild node-sass` to build the binding for your current node version.
at Object.sass.getBinaryPath (C:phpStudyWWWlaravelnode_modulesnode-sass
libextensions.js:158:11)
at Object. (C:phpStudyWWWlaravelnode_modulesnode-sasslibin
dex.js:16:36)
at Module._compile (module.js:398:26)
at Object.Module._extensions..js (module.js:405:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (C:phpStudyWWWlaravelnode_modulesgulp-sassindex.
js:183:21)
at Module._compile (module.js:398:26)
[20:25:07] Error in plugin ‘run-sequence’
Message:
An error occured in task ‘sass’.
[20:25:07] Finished ‘default’ after 67 ms
回复
2015年12月23日 at 下午8:27

孙布斯 says:
那要装什么模块呢？
回复
2015年12月23日 at 下午9:22
孙布斯 says:
运行了，编译less、coffee没问题，编译sass就出问题
2015年12月23日 at 下午9:30
学院君 says:
npm rebuild node-sass
2015年12月23日 at 下午9:37
孙布斯 says:
还是出错了
[泪]
2015年12月23日 at 下午9:56
学院君 says:
windows不行登录到虚拟机运行
2015年12月23日 at 下午10:31
赵福春 says:
node-sass 被墙住了用命令行无法安装的这是我下好的拿去用吧 https://yunpan.cn/cPI3SEfajJeX9 访问密码 a6b0 下载后扔到 node_modules 就没问题了
2016年5月18日 at 下午4:37
学院君 says:
谢谢分享 windows开发环境简直是噩梦
2016年5月18日 at 下午10:12
学院君 says:
在项目根目录下运行 npm install 了吗
回复
2015年12月23日 at 下午9:26
学院君 says:
相应的node模块没有安装
回复
2015年12月23日 at 下午9:20

quericy says:
npm install执行一直不成功,尝试用sudo npm install –no-bin-links错误依旧
npm cache clean清理过缓存,重新下载依然如此.
望解惑~~
回复
2015年12月18日 at 上午11:03

李坤严 says:
使用新版本的node试试，我成功了
回复
2015年12月23日 at 下午5:30

溪路 says:
站长，拜读了您的大作。
直接npm install安装报了这些错误：
npm WARN install Couldn’t install optional dependency: Unsupported
npm WARN deprecated lodash@2.4.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^3.0.0.
npm ERR! Linux 3.19.0-25-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "gulp"
npm ERR! node v5.0.0
npm ERR! npm v3.3.6
npm ERR! path ../mkdirp/bin/cmd.js
npm ERR! code EPROTO
npm ERR! errno -71
npm ERR! syscall symlink
npm ERR! EPROTO: protocol error, symlink '../mkdirp/bin/cmd.js' -> ‘/home/vagrant/Code/laravel/node_modules/.bin/mkdirp’
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! < https://github.com/npm/npm/issues>
npm ERR! Linux 3.19.0-25-generic
npm ERR! argv “/usr/bin/nodejs” “/usr/bin/npm” “install” “gulp”
npm ERR! node v5.0.0
npm ERR! npm v3.3.6
npm ERR! path npm-debug.log.546f0d0cc6d56d878a26aa631313f236
npm ERR! code ETXTBSY
npm ERR! errno -26
npm ERR! syscall rename
怎么回事?我用的是homestaed最新的版本（3.0.3）做虚拟机。
回复
2015年11月28日 at 上午11:56
网虫资源网 says:
CSS 编译后 fonts 字体图标可用吗？没有看到字体文件
回复
2015年11月9日 at 下午2:55
游鱼彩虹 says:
还是建议用bower管理这些js,css之类的。包文件比node_moudels小很多.
回复
2015年11月5日 at 上午11:41

学院君 says:
嗯看个人喜好后面博客系列教程会用bower
回复
2015年11月5日 at 下午12:07

Star says:
命令工具，提示$不是内部或外部命令也不是可运行的程序，这个怎样解决
回复
2015年11月4日 at 上午11:16

Star says:
安装了，没反应···
回复
2015年11月11日 at 上午9:39
学院君 says:
有将node安装目录放到系统路径中吗
回复
2015年11月11日 at 上午9:45
学院君 says:
你安装了Node.js了吗
回复
2015年11月4日 at 上午11:26

kiky says:
font文件怎么办
回复
2015年11月3日 at 上午11:21
ding says:
为什么我用了npm install 一下子安装了超级多的包？
回复
2015年11月3日 at 上午10:33

学院君 says:
因为还有依赖包
回复
2015年11月3日 at 上午10:40

来自 http://laravelacademy.org/post/1770.html

普通分类:

laravel

搜索表单

用户登录