現在你已經安裝好 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"); }); ~~~