laravel elixir
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的更多相关文章
- laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)
如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...
- Laravel 5 性能优化技巧
说明 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表 ...
- laravel 中 与前端的一些事2 之使用Gulp编译sass
下载所有依赖npm的packagist: 下载了前端laravel elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...
- laravel 5 优化
性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配 ...
- 十个 Laravel 5 程序优化技巧
性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配 ...
- 基于 Laravel 开发博客应用系列 —— 从测试开始(二):使用Gulp实现自动化测试
3.使用 Gulp 进行 TDD(测试驱动开发) Gulp 是一个使用 JavaScript 编写的自动化构建工具.用于对前端通用任务(如最小化.压缩.编译)进行自动构建.Gulp 还可以用来监控源代 ...
- PHP and laravel知识点小小积累
function () use ($x, &$y){} 自从PHP5.3开始有了closure/匿名函数的概念,在这里的use关键词的作用是允许匿名函数capture到父函数scope 内存在 ...
- 十个技巧快速优化你的Laravel 5 程序
性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配 ...
- laravel性能优化技巧(转)
说明 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表 ...
随机推荐
- java中的null和""区别
(1)问题一:null和""的区别String s=null;string.trim()就会抛出为空的exception String s=""; string ...
- 对Android项目中的文件夹进行解释
对Android项目中的文件夹进行解释: · src:里面存放的是Activity程序,或者是以后的其他组件,在此文件夹之中建立类的时候一定要注意,包名称不能是一级. · gen:此文件夹中的内容是自 ...
- Loadrunner关联
学习LoadRunner之关联(二) Lr学习之关联-随机删除一行数据和全部删除数据 录制一个系统,我录制的是一个交通方面的系统,登陆到系统里面,查询车牌颜色,将其中一条数据删除. "Nam ...
- new一个二维数组
.定义一个二维数组 char **array1 array1 = new char *[x]; for(i=0;i<x;++i) array1[i] = new char[y]; ...用的时候 ...
- 2016.7.9 计算机网络复习要点第四章之网际控制报文协议ICMP
1.ICMP允许主机或路由器报告差错情况和提交有关异常情况的报告:为了更有效地转发IP数据报和提高交付成功的机会: 2.ICMP不是高层协议,因为ICMP报文是装在IP数据报中的,作为其中数据部分,所 ...
- SU Demos 03T-F Analysis-03Suphasevel
不足之处,欢迎批评指正. 1.先看readme,共有3个脚本. 第1个脚本用到的模型文件. 2.第1个脚本 运行结果 3.第2个脚本 4.第3个脚本
- [LintCode] Word Break
Given a string s and a dictionary of words dict, determine if s can be break into a space-separated ...
- 简单几何(判断矩形的位置) UVALive 7070 The E-pang Palace(14广州B)
题目传送门 题意:给了一些点,问组成两个不相交的矩形的面积和最大 分析:暴力枚举,先找出可以组成矩形的两点并保存起来(vis数组很好),然后写个函数判断四个点是否在另一个矩形内部.当时没有保存矩形,用 ...
- Android 蓝牙 BLE 开发笔记
最近公司头戴换了一块蓝牙4.0 BLE模块,所以我们Android组要适配 BLE.Android BLE 需要 4.3 以上系统,api 还是非常简单的, 第一步就是扫描, 扫描到设备后就可以连接了 ...
- jquery插件 源码
下面是对Jquery几个经常用到的地方进行的增强. 功能是参考百度七巧板JS框架来完成的. 一.页面属性 $.page.getHeight():获取页面高度 $.page.getWidth():获取页 ...