一.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的更多相关文章

  1. laravel的elixir和gulp用来对前端施工

    使用laravel elixer npm install --global gulp  ok 然后在安装好的laravel 下 npm install 以安装 laravel-elixir subli ...

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

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

  3. laravel elixir

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

  4. Laravel 5 性能优化技巧

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

  5. 50分钟学会Laravel 50个小技巧

    50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45  Yuansir-web菜鸟 原文  http://www.yuansir-web.com/2015/12/09 ...

  6. laravel 中 与前端的一些事5 之解决缓存问题:version

    Version的主要目的就是解决浏览器的缓存问题,在这个方面,Elixir给出的解决方案很完美 应用场景:当我们的css或者js重新更新了,我们需要告诉浏览器我们不要缓存的css或js静态文件样式时, ...

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

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

  8. 为什么Laravel是最成功的PHP框架?

    Laravel 是一个有着美好前景的年轻框架,它的社区充满着活力,相关的文档和教程完整而清晰,并为快速.安全地开发现代应用程序提供了必要的功能.在近几年对PHP 框架流行度的统计中,Laravel始终 ...

  9. 10个技巧优化PHP程序Laravel 5框架

    10个技巧优化PHP程序Laravel 5框架 性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践www.itxdl.c ...

随机推荐

  1. HDU1556---树状数组 | 线段树 |*

    输入n,紧接n行,每行a,b n个气球,a,b表示从第a到第b个气球涂一次色,输出每个球最终的涂几次色 暴力超时,优化数据结构 1.树状数组 #include<iostream> #inc ...

  2. 【ZOJ4067】Books(贪心)

    题意:DG在书店买书,从左到右第i本书价格为ai. DG从左走到右,能买就买.如果已知DG买了m本书,问他原本最多有多少钱. 若无上限,输出“Richman”,若不可能买这么多书,输出“Impossi ...

  3. Strlcpy和strlcat——一致的、安全的字符串拷贝和串接函数【转】

    转自:http://blog.csdn.net/kailan818/article/details/6731772 英文原文: http://www.gratisoft.us/todd/papers/ ...

  4. Centos 查看硬盘空间

    df -h du -ah --max-depth=1 目录深度为1 -h:以人类可读的方式显示 -a:显示目录占用的磁盘空间大小,还要显示其下目录和文件占用磁盘空间的大小 -s:显示目录占用的磁盘空间 ...

  5. Appium+python自动化1-环境搭建(上)【转载】

    前言 appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.小编擅长Python,所以接下来的教程是appium+py ...

  6. Openstack ceilometer

    https://www.cnblogs.com/liguangsunls/p/6879879.html

  7. 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 ...

  8. Django学习笔记2:处理表单

    1.HTTP请求 HTTP协议以"请求-回复"的方式工作. 客户发送请求时,可以在请求中附加数据.服务器通过解析请求,就可以获得客户传来的数据,并根据URL来提供特定的服务. (1 ...

  9. 内存或磁盘空间不足,Microsoft Office Excel 无法再次打开或保存任何文档。 [问题点数:20分,结帖人wenyang2004]

    在环境里是没有问题的 就是发布网站后,会出现“/”应用程序中的服务器错误.--------------------------------------------------------------- ...

  10. JavaScript继承(图解笔记)

    JavaScript有多种继承模式,总结起来用到的方法有:原型链的传递.构造函数的借用.对象的复制.   对于原型链和原型的解释,可参考:JavaScript 原型中的哲学思想这篇文章讲得很清晰,让我 ...