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 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表 ...
随机推荐
- Wcf for wp8 调试Wcf服务程序(四)
1.要以管理员身份进行登录vs2012 否则会提示: 2.在wcf 服务程序上设为启动项 3.编译 运行你的wcf服务程序 点击 就出现wcftestclient.exe 客户端调试程序 双击点击Re ...
- 编辑WCF配置不出现
在使用VS2010创建
- 帧动画FrameAnimation
<!-- 布局 --> <item android:drawable="@drawable/girl_1" android:duration="100& ...
- js拆分数组
<script language="javascript"> str="2,2,3,5,6,6"; //这是一字符串 var strs= new A ...
- Android广播机制概述
1.Android广播机制概述 Android广播分为两个方面:广播发送者和广播接收者,通常情况下,BroadcastReceiver指的就是广播接收者(广播接收器).广播作为Android组件间的通 ...
- libswscale图像格式转换与放大缩小
缩放,例如640x360拉伸为1280x720 注意:没有裁剪! ======================== 有2种使用方法: 简单的初始化方法 (1) sws_getContext ...
- App Store上下载和安装Xcode
App Store上下载和安装Xcode Xcode的下载和安装 要编写一个Sprite Kit程序,需要使用到Xcode开发工具.本节将主要讲解此工具的两种下载和安装方式:一种是在App Store ...
- Quartz.net misfire实践
1.问题描述 在使用Quartz.net定时运行作业时,存在一种情况:作业错过了某次执行,当作业恢复的时候应该怎么处理?如:job1在3:50的时候应该执行的,但此刻job1处于暂停状态,而到3: ...
- HDU2243 考研路茫茫——单词情结(AC自动机+矩阵快速幂)
与POJ2778一样.这题是求长度不超过n且包含至少一个词根的单词总数. 长度不超过n的单词总数记为Sn,长度不超过n不包含词根的单词总数记为Tn. 答案就是,Sn-Tn. Sn=26+262+263 ...
- Codeforces 176B (线性DP+字符串)
题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=28214 题目大意:源串有如下变形:每次将串切为两半,位置颠倒形成 ...