码迷,mamicode.com
首页 > 其他好文 > 详细

Laravel之Elixir

时间:2017-06-03 09:48:48      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:query   global   arp   class   bsp   sharp   编译   set   而且   

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

标签:query   global   arp   class   bsp   sharp   编译   set   而且   

原文地址:http://www.cnblogs.com/itfenqing/p/6936216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!