Laravel之Elixir
一.Elixir安装和设置
1.安装node.js
2.安装Gulp 作为全局NPM 包
npm install --global gulp
3.最后,在新安装的Laravel 根目录下,你会发现有一个package.json 文件。该文件和composer.json 一样,只不过是用来定义Node 依赖而非PHP ,你可以通过运行如下命令来安装需要的依赖:
npm install
windows下:
npm install --no-bin-links
4.按需配置根目录下的gulpfile.js
二.常用命令
1.生成文件
gulp 2.最小化CSS 和JavaScript 文件
gulp --production 3.自动监控资源改变
gulp watch
gulp watch --production
三.常用配置
1.如果你只想要将多个原生CSS 样式文件合并到一个文件,可以使用styles 方法。传递给该方法的路径相对于resources/assets/css 目录,结果CSS 被存放在public/css/all.css:
elixir(function(mix) {
mix.styles([
'normalize.css',
'main.css'
]);
});
2.还可以通过传递第二个参数到styles 方法来输出结果文件到一个自定义路径
elixir(function(mix) {
mix.styles([
'normalize.css',
'main.css'
], 'public/assets/css');});
3.如果你有多个JavaScript 文件想要编译成单个文件,可以使用 scripts 方法。 scripts 方法假定所有路径相对于resources/assets/js 目录,而且所有结果JavaScript 默认存放在public/js/all.js :
elixir(function(mix) {
mix.scripts([
'jquery.js',
'app.js'
]);
});
4.如果你需要将多个脚本集合合并到不同的文件,需要多次调用scripts 方法。该方法的第二个参数决定每个合并的结果文件名:
elixir(function(mix) {
mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
.scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});
5.如果你需要将多个脚本合并到给定目录,可以使用scriptsIn 方法。结果JavaScript 会被存放到public/js/all.js :
elixir(function(mix) {
mix.scriptsIn('public/js/some/directory');
});
6.版本号/缓存刷新
Elixir 可以使用version 方法为你处理这种情况。version 方法接收相对于public 目录的文件名,附加唯一hash 到文件名,从而实现缓存刷新。例如,生成的文件名看上去是这样——all-16d570a7.css:
elixir(function(mix) {
mix.version('css/all.css');
});
模板中使用
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
*使用版本号生成的文件在/public/build目录下
一个示例:
elixir(function(mix) {
mix.styles(['a.css','b.css'], 'public/assets/css/style.css');
}); elixir(function(mix) {
mix.scripts(['a.js','b.js'],'public/assets/js/main.js');
}); elixir(function(mix) {
mix.version(['assets/css/style.css', 'assets/js/main.js']);
});
以上也可以使用方法链
Laravel之Elixir的更多相关文章
- laravel的elixir和gulp用来对前端施工
使用laravel elixer npm install --global gulp ok 然后在安装好的laravel 下 npm install 以安装 laravel-elixir subli ...
- laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)
如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...
- laravel elixir
npm install npm install jquery --save //bootsrap3.36 与 jquery3不兼容,下载jquery时可能需要确定版本号 npm install jqu ...
- Laravel 5 性能优化技巧
说明 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表 ...
- 50分钟学会Laravel 50个小技巧
50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45 Yuansir-web菜鸟 原文 http://www.yuansir-web.com/2015/12/09 ...
- laravel 中 与前端的一些事5 之解决缓存问题:version
Version的主要目的就是解决浏览器的缓存问题,在这个方面,Elixir给出的解决方案很完美 应用场景:当我们的css或者js重新更新了,我们需要告诉浏览器我们不要缓存的css或js静态文件样式时, ...
- laravel 中 与前端的一些事2 之使用Gulp编译sass
下载所有依赖npm的packagist: 下载了前端laravel elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...
- 为什么Laravel是最成功的PHP框架?
Laravel 是一个有着美好前景的年轻框架,它的社区充满着活力,相关的文档和教程完整而清晰,并为快速.安全地开发现代应用程序提供了必要的功能.在近几年对PHP 框架流行度的统计中,Laravel始终 ...
- 10个技巧优化PHP程序Laravel 5框架
10个技巧优化PHP程序Laravel 5框架 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践www.itxdl.c ...
随机推荐
- HDU1556---树状数组 | 线段树 |*
输入n,紧接n行,每行a,b n个气球,a,b表示从第a到第b个气球涂一次色,输出每个球最终的涂几次色 暴力超时,优化数据结构 1.树状数组 #include<iostream> #inc ...
- 【ZOJ4067】Books(贪心)
题意:DG在书店买书,从左到右第i本书价格为ai. DG从左走到右,能买就买.如果已知DG买了m本书,问他原本最多有多少钱. 若无上限,输出“Richman”,若不可能买这么多书,输出“Impossi ...
- Strlcpy和strlcat——一致的、安全的字符串拷贝和串接函数【转】
转自:http://blog.csdn.net/kailan818/article/details/6731772 英文原文: http://www.gratisoft.us/todd/papers/ ...
- Centos 查看硬盘空间
df -h du -ah --max-depth=1 目录深度为1 -h:以人类可读的方式显示 -a:显示目录占用的磁盘空间大小,还要显示其下目录和文件占用磁盘空间的大小 -s:显示目录占用的磁盘空间 ...
- Appium+python自动化1-环境搭建(上)【转载】
前言 appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.小编擅长Python,所以接下来的教程是appium+py ...
- Openstack ceilometer
https://www.cnblogs.com/liguangsunls/p/6879879.html
- Codeforces Round #191 (Div. 2) A. Flipping Game【*枚举/DP/每次操作可将区间[i,j](1=<i<=j<=n)内牌的状态翻转(即0变1,1变0),求一次翻转操作后,1的个数尽量多】
A. Flipping Game time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Django学习笔记2:处理表单
1.HTTP请求 HTTP协议以"请求-回复"的方式工作. 客户发送请求时,可以在请求中附加数据.服务器通过解析请求,就可以获得客户传来的数据,并根据URL来提供特定的服务. (1 ...
- 内存或磁盘空间不足,Microsoft Office Excel 无法再次打开或保存任何文档。 [问题点数:20分,结帖人wenyang2004]
在环境里是没有问题的 就是发布网站后,会出现“/”应用程序中的服务器错误.--------------------------------------------------------------- ...
- JavaScript继承(图解笔记)
JavaScript有多种继承模式,总结起来用到的方法有:原型链的传递.构造函数的借用.对象的复制. 对于原型链和原型的解释,可参考:JavaScript 原型中的哲学思想这篇文章讲得很清晰,让我 ...