Laravel如何利用gulp建構前端資源

Gulp 是一個自動化工具，前端開發者可以使用它來處理常見任務，以下這篇文章主要給大家介紹了關於Laravel利用gulp如何建立前端資源的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧

什麼是gulp？

gulp是新一代的前端專案建置工具，你可以使用gulp及其外掛程式對你的專案程式碼（less,sass）進行編譯，也可以壓縮你的js和css程式碼，甚至壓縮你的圖片，gulp只有少量的API，所以非常容易學習。 gulp 使用 stream 方式處理內容。 Node催生了一批自動化工具，像Bower，Yeoman，Grunt等。

gulp和grunt的異同點

#容易使用：採用程式碼優於設定策略，Gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。

高效率：透過利用Node.js強大的流，不需要往磁碟寫中間文件，可以更快地完成建置。

高品質：Gulp嚴格的外掛程式指導方針，確保外掛簡單且按你期望的方式運作。

容易學習：透過把API降到最少，你能在很短的時間內學會Gulp。建構工作就像你設想的一樣：是一系列流管道。

引言

最近把自己主頁前端程式碼進一步規範了，使用npm 引入一些前端的資源庫，在Laravel 5.5 中使用gulp遇到一些坑。

mix.sass 無法直接使用 node_modules 資料夾裡的，只能用 resource/assets/sass/app.scss 這個檔案產生 css，然後和其他的 css 合併為一個檔案。

mix.scripts 可以使用 node_modules 資料夾裡的 js，並且和自己的 js 合併為一個檔案。

mix.copy 可以複製 node_modules 中的檔案到指定的目錄，例如字體。

mix.version 可以增加合併後的檔案版本號。

貼出我最終的配置如下：

#

elixir(function (mix) {
 mix.sass([
  'app.scss'
 ], 'public/css')
  .styles([
   './public/css/app.css',
   'style.css',
   'pill.css',
  ], 'public/css/site.css')
  .styles([
   './public/css/app.css',
   'cover.css',
  ], 'public/css/cover.css')
  .scripts([
   './node_modules/jquery/dist/jquery.min.js',
   './node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
   'scrollerup.js'
  ],'public/js/app.js')
  .copy([
   './node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff',
   './node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2'
  ], 'public/build/fonts/bootstrap')
  .version([
   'public/css/cover.css',
   'public/css/site.css'
  ]);
});

以上程式碼出自我的gulpfile.js 檔案。

執行gulp 指令，線上執行gulp –production.

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於PHP框架Laravel外掛程式Pagination實作自訂分頁的方法

以上是Laravel如何利用gulp建構前端資源的詳細內容。更多資訊請關注PHP中文網其他相關文章！