使用 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 的說明即可！

參考資料

KeJyun 最新新書推薦
Laravel 5 for beginner 新手道場：優雅運用框架快速開發 PHP 網站
Laravel框架开发详解：从零基础到运用框架快速开发PHP网站

Laravel 是 PHP 的框架（Framework），提供了很多開發網站或 API 所需的工具及環境，經過簡單的設定就可以完成資料的處理及顯示，使開發者可以很優雅且快速的開發出各個不同的產品。本書適合有 PHP 基礎的人，但不知道要怎麼選擇框架，或者不用框架的人也能夠明白它的好處。

雖然 WordPress 也能夠架站，但如果有客製化需求，要開發各式各樣的網站，或提供 App 使用的 API，如此一來你只能選擇用框架，而 Laravel 是目前最受歡迎的。

本書將解說為什麼要使用框架，以及理解框架的優缺點後，要怎麼選擇框架，並用框架快速建構一個網站。除非必要，否則書中會避免專業技術用語，盡量使用最生活化易懂的例子及語氣，讓大家更容易進入 Laravel 的世界。

購書連結

購書連結

results matching ""

    No results matching ""