首頁  >  文章  >  後端開發  >  Laravel如何利用gulp建構前端資源

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

不言
不言原創
2018-06-13 17:03:221160瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn