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 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表 ...
随机推荐
- 14、Silverlight 滤镜到 UWP 滤镜的移植(二)
上一篇文章 大致介绍了,移植戴震军大哥的 Windows Phone7 中,对于高斯模糊滤镜的移植,主要是 int[] 数组和 byte[] 数组的互相转换.同样的思路,只要把前文的方法封装一下,就能 ...
- x264_param_t结构体参数分析
转自:http://blog.chinaunix.net/uid-17053077-id-1987955.html 参考网上的一些资料,结合个人的理解,对x264中x264_param_t结构体作了初 ...
- Codeforces Round #359 (Div. 2) D. Kay and Snowflake 树DP
D. Kay and Snowflake After the piece of a devilish mirror hit the Kay's eye, he is no longer int ...
- Android 贝塞尔曲线 折线图
1.贝塞尔曲线:http://baike.baidu.com/view/60154.htm,在这里理解什么是贝塞尔曲线 2.直接上图: 3.100多行代码就可以画出贝塞尔曲线,直接上代码 packag ...
- XMLHTTPRequest对象
1.用于在后台与服务器交换数据: 2.XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求数据, 服务器端接受数据 ...
- cordova的android notify消息通知插件
最近在学习用CORDOVA(PHONEGAP)结合SENCHA TOUCH开发应用,想实现一个安卓下的消息通知功能,这个可以通过CORDOVA的插件来实现. 插件目录结构如下: notifyplugi ...
- 洛谷 P1008 三连击 Label:水
题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数构成1:2:3的比例,试求出所有满足条件的三个三位数. 输入输出格式 输入格式: 木有输入 输出格式: 若干行,每行3个 ...
- python模块之codecs
http://blog.csdn.net/suofiya2008/article/details/5579413
- iOS-OC根据时间戳获取距离现在的状态(刚刚,分钟前,今天,昨天)
iOS-OC根据时间戳获取距离现在的状态(刚刚,分钟前,今天,昨天) 获取时间戳 - (NSString *)distanceTimeWithBeforeTime:(double)beTime { ...
- NSOperationQueue
一.简介 一个NSOperation对象可以通过调用start方法来执行任务,默认是同步执行的.也可以将NSOperation添加到一个NSOperationQueue(操作队列)中去执行,而且是异步 ...