iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 30
2
Modern Web

Vue.js 30天系列 第 30

Vue.js 30 - 搭配後端 - Laravel(編譯流程跟設定)

搭配後端 - Laravel分為三篇


Laravel assets 編譯

有在寫Sass、需要編譯js的前端工程師,應該都聽過或用過 Gulp & Webpack

但後端就不一定了,Laravel怎麼處理這個狀況?

Laravel Elixir (將改名為 Laravel Mix)

這時需要中間層!
Laravel ElixirGulp包裝,簡化工具門檻!
讓php工程師使用簡單語法,呼叫內建Gulp編譯流程。

本質上還是Gulp!
所以熟悉的話,gulpfile設定檔可用原本習慣寫。
(些許差異先不提,有興趣可留言)

ps. 跟另一個語言 - elixir-lang 同名,之後會改名為 Laravel Mix (官方消息)。

Elixir 如何編譯 Vue

Elixir編譯流程寫在Gulp設定檔 - gulpfile.js
預設做了哪些事?

/* 載入 Elixir */
const elixir = require('laravel-elixir');

/* 載入編譯 vue 2.x 需要的 webpack loader */
require('laravel-elixir-vue-2');

/* 定義編譯流程 */
elixir(mix => {
    mix.sass('app.scss')   /* 編譯Sass */
       .webpack('app.js'); /* 編譯js */
});

編譯後,將檔案存在/public

└── VueSite/public
    └── js
        ├── css
        |	  └── app.css
        └── js
         	  └── app.js

(可自行對照前一篇resources/assets/檔案結構)

簡單吧?

還沒完

Elixir 已包裝 Webpack 編譯流程,若流程得做些微調,該怎麼辦呢?


自訂 Webpack 編譯流程

Elixir 雖有套預設流程,只要有自定的 Webpack 設定檔(預設叫webpack.config.js),會照自訂設定檔執行Webpack。

但這時後端就不能偷懶了,請閱讀文件,了解設定檔怎麼寫。

自訂Gulp流程也一樣,請閱讀Gulp Plugin文件。


上一篇
Vue.js 29 - 搭配後端 - Laravel(Vue檔案結構)
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言