npm install
npm install jquery --save

//bootsrap3.36 与 jquery3不兼容,下载jquery时可能需要确定版本号

npm install jquery@.x  --save

编辑 resources/assets/sass/app.scss

@import "variables";

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

创建variables.scss,改写bootstrap样式变量

$body-bg:               #FEFEFE;
$brand-primary: darken(skyblue, 6.5%);
$panel-bg: #AFEEEE;

创建文件: resources/assets/js/app.js

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');

$( document ).ready(function() {
console.log($.fn.tooltip.Constructor.VERSION);
});

以上为引入jquery, 引入bootstrap.js, console.log 记录bootstrap版本号(测试用)

编辑项目根目录下的 gulpfile.js :

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

elixir(function(mix) {
mix.sass('app.scss')
.browserify('app.js')
.version(['css/app.css', 'js/app.js']);
});

运行gulp生成文件,在app.blade.php里就可以进行引入了

...

<link href="{{ elixir('css/app.css') }}" rel="stylesheet">

...
... <script src="{{ elixir('js/app.js') }}"></script> ...

如果使用less,建立app.less

@import "node_modules/bootstrap-less/bootstrap/bootstrap.less";
//@body-bg: silver;
@icon-font-path: "/fonts/bootstrap/";
@import "node_modules/bootstrap-less/bootstrap/utilities.less";

把gulpfile.js中更换sass未less即可

laravel elixir的更多相关文章

  1. laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

    如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...

  2. Laravel 5 性能优化技巧

    说明 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表 ...

  3. laravel 中 与前端的一些事2 之使用Gulp编译sass

    下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...

  4. laravel 5 优化

    性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配 ...

  5. 十个 Laravel 5 程序优化技巧

    性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配 ...

  6. 基于 Laravel 开发博客应用系列 —— 从测试开始(二):使用Gulp实现自动化测试

    3.使用 Gulp 进行 TDD(测试驱动开发) Gulp 是一个使用 JavaScript 编写的自动化构建工具.用于对前端通用任务(如最小化.压缩.编译)进行自动构建.Gulp 还可以用来监控源代 ...

  7. PHP and laravel知识点小小积累

    function () use ($x, &$y){} 自从PHP5.3开始有了closure/匿名函数的概念,在这里的use关键词的作用是允许匿名函数capture到父函数scope 内存在 ...

  8. 十个技巧快速优化你的Laravel 5 程序

    性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配 ...

  9. laravel性能优化技巧(转)

    说明 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表 ...

随机推荐

  1. Xamarin.Android开发实践(十七)

    Xamarin.Android之定位 一.前言 打开我们手中的应用,可以发现越来越多的应用使用了定位,从而使我们的生活更加方便,所以本章我们将学习如何在Xamarin中进行定位的开发. 二.准备工作 ...

  2. AppPoolService-IIS应用程序池辅助类(C#控制应用程序池操作)

    using System.Collections.Generic; using System.DirectoryServices; using System.Linq; using Microsoft ...

  3. IE下AjaxForm上传文件直接提示下载的兼容性Bug

    使用AjaxForm上传文件时候,在IE下直接提示下载保存: 我的示例代码: return this.Json( new { prop1 = 5, prop2 = 10 }); 这种问题只出现在IE下 ...

  4. Wcf for wp8 连接数据库,读写数据库,显示数据库数据(二)

    下载: Microsoft® SQL Server® 2012 Express http://www.microsoft.com/zh-cn/download/details.aspx?id=2906 ...

  5. 如何从本地把项目上传到github

    在本地项目所在目录按以下步骤操作 echo # test >> README.md git init git add README.md git add . git commit -m . ...

  6. CSS优化技巧

    CSS是页面效果呈现中非常重要的组成部分,它包括颜色.大小尺寸.背景和字体等.写CSS很简单很容易,但是要想写出精炼的CSS代码还是有很多技巧的. 下面就是技巧7则: . 合并多个相同属性: 比如很多 ...

  7. matlab练习程序(构造简单多边形)

    简单多边形是指各边不相交的多边形. 首先计算出所有顶点中心位置. 然后求每个顶点与中心的极角. 再对极角进行排序. 连接排序后的点就行了. 结果如下: matlab代码如下: clear all;cl ...

  8. 铭飞MCMS内容管理系统完整开源版J2EE代码

    当前版本:4.6.0铭飞MS官网:http://ms.mingsoft.net官网同时提供一键运行版本下载,请步移官网....QQ交流群号1:221335098很多人说铭飞MCMS是大天朝国唯一完整开 ...

  9. ToggleButton

    <ToggleButton android:id="@+id/toggle" android:layout_width="wrap_content" an ...

  10. tcp的三次握手及四次挥手(连接与中断流程)

    连接的三次握手: 1握.client向server发送连接请求,发送的报文是:syn=1,seq number=生成的随机数x .  这时client的状态是SYN_SEND 2握.server从sy ...