:::

15. 使用 Laravel Mix 來管理前端資源

  1. 由於接下來我們可能會用到一些javascript或CSS等前端資源,因此,我們可以使用 Laravel Mix 來管理前端資源。
  2. Laravel Mix 一款前端任務自動化管理工具,讓你能夠為你的 Laravel 應用定義 Webpack 編譯任務, 支持許多常見的 CSS 與 JavaScript 預處理器,可以輕鬆地管理前端資源。
  3. 在開始使用 Mix 之前,必須先確保你的機器上安裝了 Node.js 和 NPM。
    node -v
    npm -v

    安裝 Laravel Mix 及相關依賴

    npm install

     

  4. 接著順便安裝Yarn套件管理器(比npm更快的JavaScript 套件版本管理工具),請從這裡下載安裝:https://yarnpkg.com/zh-Hant/docs/install#windows-stable
  5. 接著,就可以使用 Yarn 來安裝依賴:
    yarn install --no-bin-links

      -no-bin-links只有在windows下才需要,就是在 npm install 時不要建立軟連結,避免在 ntfs 上運行 npm install 時會遇到的建立軟連結失敗的情況。

  6.  然後我們還需要修改一下 Mix 的設定檔webpack.mix.js
    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .version();
    在最後加了一個 version(),使 Mix 每次生成的靜態文件後面加上一個類似版本號的參數,避免被瀏覽器快取,而老是讀到錯誤的舊檔案。
  7. 最後,執行以下命令即可:
    npm run watch-poll

    watch-poll 會在終端裡一直運行,監控 resources 檔案夾下的資源檔案是否有發生改變。在 watch-poll 命令運行的情況下,一旦資源檔案發生變化,Webpack 會自動重新編譯。

  8. 如果都出現錯誤訊息,請先刪除 node_modules 目錄,然後按以下方式解決:

    npm cache clean --force 
    npm install 
    npm run dev 

     

  9. 注意:在開發過程中,我們需要保證 npm run watch-poll 一直處在執行狀態中,如果不想佔用VSCode的終端機,可以用PowerShell來執行之。正常運行的畫面看起來像這樣:

 

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D43%26tbdsn%3D1438

計數器

今天: 1480148014801480
昨天: 1416141614161416
總計: 7340127734012773401277340127734012773401277340127