Laravel之Elixir

Posted 2020-09-21 罗夏

一.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‘]);
});

　　

以上也可以使用方法链