Quản lý tài sản trong Laravel 5

Question

Ai đó có thể giải thích cách tiếp cận đúng trong quản lý nội dung trong Laravel 5? Ví dụ, hãy tưởng tượng tôi muốn cài đặt một số plugin bằng cách sử dụng bower. Cách được đề nghị, như tôi đã nhận được, để giữ tất cả các tệp vào /vendor/bower_components. Vì vậy, tôi có một số css, một số hình ảnh, phông chữ và các tập tin javascript với các plugin.

Ngoài ra tôi có "app.less", nơi tôi nhập mọi thứ tôi cần, như @import ('../../../vendor/bower_components/someplugin/somestyle.css'). Vấn đề mặc dù tôi không có hình ảnh/js/phông chữ trong thư mục công cộng của tôi. Được rồi, tôi thấy rằng bạn có thể sử dụng chức năng gulp copy. Tuy nhiên, khi số lượng plugin tăng lên, tôi phải quản lý vị trí mỗi plugin giữ lại hình ảnh hoặc các tệp khác của nó như thế nào?

Thực ra tôi muốn thử ui ngữ nghĩa. Tôi đã tải về nó với bower. Tôi không biết gì về ngữ nghĩa ui, nhưng có một thư mục dist với semantic-ui.css. Ngoài ra còn có một số tệp phông chữ với số themes/basic/assets/fonts. Nếu tôi chỉ sao chép nó ra công chúng, nó sẽ là public/themes/basic/assets/fonts. Sau đó, tôi nhập khẩu ngữ nghĩa-ui.css vào app.les của tôi và nó sẽ tìm thấy phông chữ cần thiết. Điều gì sẽ xảy ra nếu tôi có một số plugin khác, nó sẽ trở nên khó chịu để quản lý tất cả.

Quy trình làm việc điển hình cho vấn đề này là gì? Cách đơn giản nhất chỉ là một cái gì đó giống như đặt tất cả mọi thứ vào công cộng và bao gồm nó bằng tay sử dụng <link> và <script> thẻ, nhưng nó sẽ đòi hỏi rất nhiều truy vấn.

Và tại sao việc giữ tất cả các thành phần bower_components ở bên ngoài là xấu? Trên sự tương tự của nhà soạn nhạc, chúng tôi không có bộ nạp tự động cho người đi thuyền, do đó, có một mớ hỗn độn của tài sản.

Answer 1

Bạn đúng ở nơi được đề xuất để đặt bower_components. Không nên đặt bower_components vào thư mục công cộng vì nó chứa TẤT CẢ các tệp trong gói cụ thể đó, không chỉ tệp bạn cần đưa vào HTML của bạn.

Vì bạn đang nói về Laravel5, nên sử dụng Laravel-elixir để quản lý tài sản. sử dụng gulp và có thể biên dịch ít hơn, sass hoặc nhiều tệp khác. Tôi không có bất kỳ kinh nghiệm với ui ngữ nghĩa, nhưng nó trông giống như bootstrap. Nếu không có phiên bản SaaS hoặc Less có sẵn trên npmjs.org, bạn sẽ cần sao chép các tệp cần thiết vào thư mục công cộng của mình. Elixir cung cấp một cách đơn giản để sao chép các tập tin hoặc toàn bộ thư mục từ bower_components vào thư mục công cộng của bạn.

Cách dễ nhất để bao gồm tất cả các tệp cần thiết mà không cần một tấn hoặc là sử dụng saas hoặc ít hơn.

Answer 2

Personally what I do is this using node 


var elixir = require('laravel-elixir'); 

var nodeDir = './node_modules/'; //This is the node directory(base directory) where all vendor files are downloaded in your case might be different 

/* 
|-------------------------------------------------------------------------- 
| Elixir Asset Management 
|-------------------------------------------------------------------------- 
| 
| Elixir provides a clean, fluent API for defining some basic Gulp tasks 
| for your Laravel application. By default, we are compiling the Sass 
| file for our application, as well as publishing vendor resources. 
| 
*/ 
elixir(function(mix) { 
mix the styles and copy fonts to my public/css folder 

    mix.styles([ 
     'bootstrap/dist/css/bootstrap.css', 
     'font-awesome/css/font-awesome.css' 
    ], './public/css/app.css', nodeDir) 
     .copy(nodeDir + 'font-awesome/fonts', 'public/fonts') 
     .copy(nodeDir + 'bootstrap/fonts', 'public/fonts'); 

//mix javascript from node directory and output to public/js/ folder 

    mix.scripts([ 
     'jquery/dist/jquery.js', 
     'bootstrap/dist/js/bootstrap.js' 

    ], './public/js/app.js', nodeDir); 


});