使用方式
最后更新于：2022-04-01 15:07:16
现在你已经安装好 Elixir，未来任何时候你都能进行编译及合并文件！ 在项目根目录下的 gulpfile.js 已经包含了所有的 Elixir 任务。
## 编译 Less
~~~
elixir(function(mix) {
mix.less("app.less");
});
~~~
在上述例子中，Elixir 会假设你的 Less 文件保存在 resources/assets/less 里。
## 编译多个 Less 文件
~~~
elixir(function(mix) {
mix.less([
'app.less',
'something-else.less'
]);
});
~~~
## 编译 Sass
~~~
elixir(function(mix) {
mix.sass("app.sass");
});
~~~
在上述例子中，Elixir 会假设你的 Sass 文件保存在 resources/assets/sass 里。
默认情况下， Elixir 会使用 LibSass 作为编译引擎。 在某些情况下, 使用 Ruby 版本的 Sass 编译可能更有优势，虽然运行不是很快但是有更多的特性。假设你已经安装了 Ruby 和 Sass gem (gem install sass), 你可以使用 Ruby 模式，比如像这样：
~~~
elixir(function(mix) {
mix.rubySass("app.sass");
});
~~~
## 无 Source Maps 编译
~~~
elixir.config.sourcemaps = false;
elixir(function(mix) {
mix.sass("app.scss");
});
~~~
Source maps 默认情况下是开启的。因此, 每当一个文件被编译，你都会在当前目录下看到 *.css.map 文件。这个映射文件允许你在进行 debugging 的时候，追溯编译后的样式选择器到原有的 Sass 或者 Less 文件！如果你想要关闭这个功能，可以使用上面的代码。
## 编译 CoffeeScript
~~~
elixir(function(mix) {
mix.coffee();
});
~~~
在上述例子中，Elixir 会假设你的 CoffeeScript 文件保存在 resources/assets/coffee 里。
## 编译所有的 Less 及 CoffeeScript
~~~
elixir(function(mix) {
mix.less()
.coffee();
});
~~~
## 触发 PHPUnit 测试
~~~
elixir(function(mix) {
mix.phpUnit();
});
~~~
## 触发 PHPSpec 测试
~~~
elixir(function(mix) {
mix.phpSpec();
});
~~~
## 合并样式文件
~~~
elixir(function(mix) {
mix.styles([
"normalize.css",
"main.css"
]);
});
~~~
传递给此方法的文件路径均相对于 resources/css 目录。
## 合并样式文件且保存在自定义的路径
~~~
elixir(function(mix) {
mix.styles([
"normalize.css",
"main.css"
], 'public/build/css/everything.css');
});
~~~
从特定相对目录合并样式文件
elixir(function(mix) {
mix.styles([
"normalize.css",
"main.css"
], 'public/build/css/everything.css', 'public/css');
});
styles 与 scrtips 方法可以通过传入第三个参数来决定来源文件的相对目录。
## 合并指定目录里所有的样式文件
~~~
elixir(function(mix) {
mix.stylesIn("public/css");
});
~~~
## 合并脚本文件
~~~
elixir(function(mix) {
mix.scripts([
"jquery.js",
"app.js"
]);
});
~~~
同样的，传递给此方法的文件路径均相对于 resources/js 目录
## 合并指定目录里所有的脚本文件
~~~
elixir(function(mix) {
mix.scriptsIn("public/js/some/directory");
});
~~~
## 合并多组脚本文件
~~~
elixir(function(mix) {
mix.scripts(['jquery.js', 'main.js'], 'public/js/main.js')
.scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});
~~~
## 压缩文件并加上哈希的版本号
~~~
elixir(function(mix) {
mix.version("css/all.css");
});
~~~
这个动作会为你的文件名称加上独特的哈希值，以防止文件被缓存。举例来说，产生出来的文件名称可能像这样：all-16d570a7.css。
接着在你的视图中，你能够使用 elixir() 函数来正确加载名称被哈希后的文件。举例如下：
`<link rel="stylesheet" href="{{ elixir("css/all.css") }}">`
程序的作用下，elixir() 函数会将参数内的源文件名转换成被哈希后的文件名并加载。是否有如释重担的感觉呢？
您也可以传给一个数组给 version 方法来为多个文件进行版本管理：
~~~
elixir(function(mix) {
mix.version(["css/all.css", "js/app.js"]);
});
~~~
~~~
<link rel="stylesheet" href="{{ elixir("css/all.css") }}">
<script src="{{ elixir("js/app.js") }}"></script>
~~~
## 复制文件到新的位置
~~~
elixir(function(mix) {
mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});
~~~
## 将整个目录都复制到新的位置
~~~
elixir(function(mix) {
mix.copy('vendor/package/views', 'resources/views');
});
Trigger Browserify
elixir(function(mix) {
mix.browserify('index.js');
});
~~~
Want to require modules in the browser? Hoping to use EcmaScript 6 sooner than later? Need a built-in JSX transformer? If so, Browserify, along with the browserify Elixir task, will handle the job nicely.
This task assumes that your scripts are stored in resources/js, though you're free to override the default.
## 方法连接
当然，你能够串连 Elixir 大部份的方法来建立一连串的任务：
~~~
elixir(function(mix) {
mix.less("app.less")
.coffee()
.phpUnit()
.version("css/bootstrap.css");
});
~~~