編譯資源(Mix)

• 簡介
• #安裝& 設定
• 執行Mix
• 使用樣式表
  • Less
  • Sass
  • Stylus
  • PostCSS
  • #Plain CSS
  • URL 處理
  • #資源映射
• 使用JavaScript
  • Vendor 提取
• React
• Vanilla JS
• #自訂Webpack 設定

複製檔案& 目錄

Browsersync 重新載入

Laravel Mix

#安裝& 設定

#安裝Node

node -v
npm -v

npm install

執行Mix

Mix 是Webpack 的頂層配置，因此執行Mix 任務，只需要執行一個包含在Laravel 預設的package.json 檔案中的腳本：

// 运行 Mix 任务...
npm run dev
// 运行所有的 Mix 任务并最小化输出结果...
npm run production

監聽資源變更

npm run watch 指令能夠在終端機持續運作並且監聽相關檔案的變更。一旦它發現改變，Webpack 就會自動重新編譯資源：

npm run watch

你會發現在特定環境下，檔案改變並不會促使 Webpack 更新。如果系統中出現這種情況，不妨考慮使用watch-poll 指令：

npm run watch-poll

使用樣式表

webpack.mix.js 檔案所有資源編譯的切入點。把它想像為 Webpack 的輕量級配置封裝。 Mix 任務可以與如何編譯資源的配置一起被鍊式呼叫。

Less

#less 方法可用來將Less 編譯成CSS。下面的語句將app.less 檔案編譯為public/css/app.css：

mix.less('resources/less/app.less', 'public/css');

可以透過多次呼叫less 方法完成多檔編譯：

mix.less('resources/less/app.less', 'public/css')   
    .less('resources/less/admin.less', 'public/css');

如果希望自訂編譯後的CSS 檔名，可以把完整的檔路徑當作傳遞給less 方法的第二個參數：

mix.less('resources/less/app.less', 'public/stylesheets/styles.css');

如果需要覆寫隱含的Less 外掛選項 ，可以傳遞一個物件作為mix.less() 的第三個參數：

mix.less('resources/less/app.less', 'public/css', {
    strictMath: true
  });

Sass

sass 方法能將Sass 編譯成CSS。可以像下面這樣使用這個方法：

mix.sass('resources/sass/app.scss', 'public/css');

和less 方法類似，可以將多個Sass 檔案編譯為各自的CSS 文件，並為結果CSS 自訂輸出目錄：

mix.sass('resources/sass/app.sass', 'public/css')  
 .sass('resources/sass/admin.sass', 'public/css/admin');

額外的Node-Sass 外掛選項 可以作為第三個參數：

mix.sass('resources/sass/app.sass', 'public/css', {
    precision: 5
  });

Stylus

與Less 和Sass 相似，stylus 方法將Stylus 編譯成 CSS：

mix.stylus('resources/stylus/app.styl', 'public/css');

也可以安裝額外的Stylus 插件，例如Rupture 。先透過NPM （npm install rupture）安裝有插件，然後在呼叫mix.stylus() 時包含它：

mix.stylus('resources/stylus/app.styl', 'public/css', {  
  use: [       
   require('rupture')()  
   ]
 });

PostCSS

PostCSS 是一個轉換 CSS 的強力工具，它已經包含在 Laravel Mix 中。預設情況下，Mix 利用流行的 Autoprefixer 外掛程式自動附加所有必要的 CSS3 第三方前綴。不過，你可以自由添加應用程式中所需的任何附加插件。首先透過NPM 安裝所需插件，然後在webpack.mix.js 檔案引用：

mix.sass('resources/sass/app.scss', 'public/css') 
   .options({
        postCss: [        
            require('postcss-css-variables')()    
              ] 
           });

styles 方法。

mix.styles([  
  'public/css/vendor/normalize.css',    
  'public/css/vendor/videojs.css'], 
  'public/css/all.css'
 );

url() 呼叫。雖然初聽起來好像很奇怪，但這確實是個強大的功能。想像一下我們想要編譯包含圖片相對URL 的Sass：

.example {
    background: url('../images/example.png');
 }

{note} 任何給定

url() 的絕對路徑將被排除在URL 重寫之外。例如 url('/images/thing.png') 或 url('http://example.com/images/thing.png') 將不會被修改。

example.png, 將其複製到public/images 資料夾，然後重寫生成的樣式表中的url()。如此一平，編譯後的 CSS 將變成：

.example {
    background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
 }

url() 重寫：

mix.sass('resources/app/app.scss', 'public/css') 
 .options({
      processCssUrls: false   
  });

webpack.mix.js 檔案中加入這項配置，Mix 將不再符合任何url() 或複製資源到public 目錄。換句話說，編譯後的CSS 看上去和你原來輸入的內容一樣：

.example {
    background: url("../images/thing.png");
  }

mix.js('resources/js/app.js', 'public/js') 
  .sourceMaps();

使用 JavaScript

Mix 提供了幾個有助於使用 JavaScript 檔案的特性，例如編譯 ECMAScript 2015、模組打包、最小化和合併原生 JavaScript 檔案。更棒的是，所有這些都無需配置即可很好地工作。

mix.js('resources/js/app.js', 'public/js');

只需這一行程式碼，就可以支援：

Vendor 提取

#將應用自身的JavaScript 和第三方函式庫綁定在一起有個潛在的缺點：會使長期快取變得困難。例如，應用程式碼的單獨更新將強制瀏覽器重新下載全部第三方程式庫，即使第三方程式庫沒有變更。

如果你打算頻繁地更新應用程式中的 JavaScript，應該考慮將第三方函式庫提取到它自己的檔案中。這樣一來，應用程式碼的改變將不會影響 vendor.js 檔案快取。 Mix 的extract 方法為之提供了便利：

mix.js('resources/js/app.js', 'public/js')  
 .extract(['vue'])

extract 方法接受你想要提取到vendor.js 的全部函式庫或模組的數組作為參數。使用上述範例中的程式碼片段，Mix 將產生以下檔案：

為避免JavaScript 錯誤，請確保以適應順序載入這些檔案：

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

React

Mix 能自動安裝React 支援所需的Babel 外掛程式。要達成此目的，只需要用 mix.react() 取代mix.js() ：

mix.react('resources/js/app.jsx', 'public/js');

Mix 將在背景下載並包含適用的babel-preset-react Babel 外掛。

Vanilla JS

#與利用mix.styles() 整合樣式表類似，你也可以使用scripts() 方法整合並最小化任意數量的JavaScript 檔案：

mix.scripts([   
 'public/js/admin.js',    
 'public/js/dashboard.js'],
 'public/js/all.js'
 );

對於不需要使用Webpack 編譯JavaScript 的遺留程式碼，這個選項尤其有用。

{tip}  mix.babel() 是 mix.scripts() 的小變體。它的方法簽章與 scripts 完全相同；但整合的檔案將由 Babel 編譯，它會將 ES2015 程式碼轉換為瀏覽器能夠理解的 vanilla JavaScript。

自訂 Webpack 設定

Lavarel Mix 在背景引用預先配置的 webpack.config.js 檔案以加速啟動和運行。有時，你可能需要手動編輯這個檔案。你可能有一個特殊的載入器或外掛程式需要引用，或者可能更願意用 Stylus 取代 Sass。在這種情況下，你有兩個選擇：

合併自訂設定

Mix 提供了webpackConfig 方法來合併任意簡短的Webpack配置以覆蓋已有配置。這是一個非常勾人的選擇，因為它不會要求你複製和維護你自己的 webpack.config.js 副本。 webpackConfig 方法接受一個物件作為作為參數，它包含你想要應用的任何Webpack 特定配置 ，

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')    
              ]  
          }
       }
    );

node_modules/laravel-mix/setup/webpack.config.js 檔案複製到專案的根目錄。然後將 package.json 檔案中所有的 --config 引用都指向新複製的設定檔。如果選擇用這種方式自訂配置，Mix webpack.config.js 後續的任何更新，都必須手動合併到你的自訂設定檔中。

copy 方法可以用來複製檔案和目錄到新位置。當 node_modules 目錄中特殊的資源需要重新定位到 public 資料夾時，這個方法很有用。

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

copy 方法將會扁平化目錄結構。想要保持目錄的原始結構，需要使用copyDirectory 方法：

mix.copyDirectory('resources/img', 'public/img');

許多開發者在他們編譯後的資源添加時間戳或唯一令牌作後綴，強制瀏覽器加載新的資源，以替換舊的程式碼副本。 Mix 可以使用

方法來替你處理它們。 .

方法自動在所有編譯後的檔案名稱後面追加唯一的雜湊值，從而實現更方便的快取銷毀：

mix.js('resources/js/app.js', 'public/js') 
  .version();

函數載入對應的雜湊資源。 mix 函數會自動判斷雜湊文件的目前檔名：

<script src="{{ mix('/js/app.js') }}"></script>

時執行版本化處理：

mix.js('resources/js/app.js', 'public/js');
if (mix.inProduction()) {
    mix.version();
   }

Browsersync 重加載

BrowserSync 能夠自動監控檔案變化，並且無需手動刷新就將變化注入到瀏覽器中。可以呼叫 mix.browserSync() 方法開啟此項目支援：

mix.browserSync('my-domain.test');
// 或...
// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.test'
  });

可以傳遞字串（代理）或物件 Y（BrowserSync 設定）給此方法。然後使用 npm run watch 指令啟動 Webpack 的開發伺服器。再編輯腳本或 PHP 文件，就會看到瀏覽器立即刷新以回應你的修改。

環境變數

#可以透過在.env 檔案中加入MIX_ 前綴，將環境變數注入Mix：

MIX_SENTRY_DSN_PUBLIC=http://example.com

一旦此變數被定義在.env 檔案中，就可以藉助 process.env 物件訪問它。如果在執行watch 任務時這個值發生改，就需要重新啟動任務：

process.env.MIX_SENTRY_DSN_PUBLIC

disableNotifications 方法來信用。

mix.disableNotifications();