使用 Elixir 合併 CSS 與 JS
最后更新于：2022-04-01 23:12:41
# 使用 Elixir 合併 CSS 與 JS
Laravel CSS 與 JS 相關的資源預設是放在 `resources/assets/scss` 與 `resources/assets/js` 下，我們需要把我們的 CSS 與 JS 放在這個目錄下，才可以使用 Elixir 去編譯我們的 CSS 與 JS 檔案
> 使用 Elixir 之前請先安裝完所需要的軟體，詳情[請點這裡](#)
### 使用 Elixir 合併 CSS
### 撰寫 CSS
** resources/assets/scss/a.css **
~~~
.a {
color:green;
}
~~~
** resources/assets/scss/b.css **
~~~
.b {
color:blue;
}
~~~
### 合併 CSS 資源
在我們專案根目錄 `gulpfile.js` 檔案中，我們撰寫 `mix.styles(['a.css', 'b.css']);`，告訴 laravel-elixir 將我們的 CSS 資源整合起來
~~~
// gulpfile.js
// 載入 laravel-elixir 套件
var elixir = require('laravel-elixir');
// 使用 laravel-elixir 套件合併 CSS
elixir(function(mix) {
mix.styles(['a.css', 'b.css']);
});
~~~
### 執行 gulp 整合 CSS
在我們專案根目錄下執行 gulp 指令，使用 laravel-elixir 整合所有 CSS 資源，大概會像這樣：
~~~
kejyun@KeJyundeMBP:~/Code/KeJyunLaravel5Proj$ gulp
[22:33:04] Using gulpfile ~/Code/KeJyunLaravel5Proj/gulpfile.js
[22:33:04] Starting 'default'...
[22:33:04] Starting 'styles'...
[22:33:04] Merging: resources/assets/css/a.css, resources/assets/css/b.css
[22:33:04] Finished 'default' after 89 ms
[22:33:04] Finished 'styles' after 122 ms
~~~
預設會將 CSS 檔案整合至 `public/css/all.css` 檔案中，你在 `all.css` 會看到我們整合 CSS 檔案的結果，就像這樣
~~~
.a {
color:green;
}
.b {
color:blue;
}
/*# sourceMappingURL=all.css.map */
~~~
我們也可以在 `gulpfile.js` 檔案中指定我們要編譯檔案的名稱目錄是什麼，就像下面我把 CSS 編譯的檔案名稱目錄指定為 `public/css/kejyun.css`，laravel-elixir 就會將編譯的檔案設為您指定的名稱目錄
~~~
// gulpfile.js
// 載入 laravel-elixir 套件
var elixir = require('laravel-elixir');
// 使用 laravel-elixir 套件合併 CSS
elixir(function(mix) {
mix.styles(['a.css', 'b.css'], 'public/css/kejyun.css');
});
~~~
### 使用 Elixir 合併 JS
### 撰寫 JS
** resources/assets/js/a.js **
~~~
var a = 1;
~~~
** resources/assets/js/b.js **
~~~
var b = 2;
~~~
### 合併 JS 資源
在我們專案根目錄 `gulpfile.js` 檔案中，我們撰寫 `mix.scripts(['a.js', 'b.js']);`，告訴 laravel-elixir 將我們的 JS 資源整合起來
~~~
// gulpfile.js
// 載入 laravel-elixir 套件
var elixir = require('laravel-elixir');
// 使用 laravel-elixir 套件合併 JS
elixir(function(mix) {
mix.scripts(['a.js', 'b.js']);
});
~~~
### 執行 gulp 整合 JS
在我們專案根目錄下執行 gulp 指令，使用 laravel-elixir 整合所有 CSS 資源，大概會像這樣：
~~~
kejyun@KeJyundeMBP:~/Code/KeJyunLaravel5Proj$ gulp
[22:47:21] Using gulpfile ~/Code/KeJyunLaravel5Proj/gulpfile.js
[22:47:21] Starting 'default'...
[22:47:21] Starting 'scripts'...
[22:47:21] Merging: resources/assets/js/a.js, resources/assets/js/b.js
[22:47:21] Finished 'default' after 86 ms
[22:47:21] Finished 'scripts' after 122 ms
~~~
預設會將 JS 檔案整合至 `public/js/all.js` 檔案中，你在 `all.js` 會看到我們整合 JS 檔案的結果，就像這樣
~~~
var a = 1;
var b = 2;
//# sourceMappingURL=all.js.map
~~~
我們也可以在 `gulpfile.js` 檔案中指定我們要編譯檔案的名稱目錄是什麼，就像下面我把 JS 編譯的檔案名稱目錄指定為 `public/js/kejyun.js`，laravel-elixir 就會將編譯的檔案設為您指定的名稱目錄
~~~
// gulpfile.js
// 載入 laravel-elixir 套件
var elixir = require('laravel-elixir');
// 使用 laravel-elixir 套件合併 JS
elixir(function(mix) {
mix.scripts(['a.js', 'b.js'], 'public/js/kejyun.js');
});
~~~
### 使用 Elixir 同時合併 CSS 與 JS 檔案
我們可以透過 `Javascript Method Chaining` 的方式連續的指定我們要合併的資源，這樣我們執行 gulp 時，就可以同時整合這些資源
~~~
// gulpfile.js
// 載入 laravel-elixir 套件
var elixir = require('laravel-elixir');
// 使用 laravel-elixir 套件合併資源
elixir(function(mix) {
mix
.scripts(['a.js', 'b.js'], 'public/js/kejyun.js')
.styles(['a.css', 'b.css'], 'public/css/kejyun.css');
});
~~~
laravel-elixir 還可以整合其他的資源，像是 Less、SCSS、SASS、CoffeeScript...等等之類的資源，詳情請看 [Laravel Elixir - laravel.tw](http://laravel.tw/docs/5.1/elixir) 的說明即可！
### 參考資料
- [Elixir Improvements](https://laracasts.com/series/whats-new-in-laravel-5-1/episodes/3)
- [Laravel Elixir - laravel.tw](http://laravel.tw/docs/5.1/elixir)
';