Quản lý tài sản - duy trì tham chiếu đến tài sản tương đối sau khi ghép nối và phiên bản

Question

Tôi biết rằng L5 và Elixir vẫn đang được phát triển, nhưng tôi rất vui khi bắt đầu suy nghĩ về cách tổ chức lại mã của mình. Tôi nghĩ câu hỏi của tôi có liên quan nhiều hơn đến quản lý tài sản, trong bối cảnh của L5 và Elixir.

Muốn làm rõ cách ghép nối và phiên bản phải được xử lý (trong trường hợp của tôi, tôi đang sử dụng số điện thoại styles() và version() của Elixir). Vấn đề tôi gặp phải là tập tin mới sau khi concat/phiên bản sẽ được đặt trong một thư mục mới, phá vỡ bất kỳ tham chiếu đến tài sản từ các tập tin gốc css hoặc js.

Ví dụ: tệp CSS gốc có background-image: url('../img.png') sẽ không hoạt động nữa. Tôi đã thử một vài điều, nhưng cả hai đều không lý tưởng đặc biệt trong trường hợp các plugin của nhà cung cấp:

1. Di chuyển các nội dung yêu cầu qua từng người một (sử dụng mix.copy() cho mỗi thư mục nội dung) , đến đường dẫn xây dựng mới (ví dụ: đường dẫn xây dựng được sử dụng bởi phiên bản Elixir).
2. thủ chỉnh sửa đường dẫn trong mỗi tập tin tài sản để đề cập đến một đường dẫn tuyệt đối

Mặc dù cả hai tùy chọn này sẽ làm cho mọi việc làm việc, tôi cảm thấy như thể tôi có thể bị thiếu một cái gì đó. Nó cũng trở nên khá không thực tế khi làm việc với các plugin javascript (ví dụ: các plugin đi kèm với hình ảnh, phông chữ, bảng định kiểu, vv) của riêng chúng.

Có cách nào thực tế hơn trong việc quản lý đường dẫn tương đối khi ghép và phiên bản không?

Answer 1

EDIT:

Tôi chỉ đưa ra một pull request để Elixir, vì vậy bạn chỉ có thể làm:

mix.version(
    ['css/style.css', 'css/vendor/style.css'], //files to be versioned 
    ['fonts', 'css/vendor/icons'] //dependent files/dirs to be copied 
); 

---

ĐÁP OLD:

Trên thực tế, nếu bạn sử dụng mix.copy(...) một mình, bạn chỉ không thể sử dụng gulp watch và bạn sẽ cần phải biên dịch lại toàn bộ ngăn xếp của bạn để làm việc này.

Bạn có thể đạt được kết quả tương tự với các giải pháp dưới đây và không cần phải biên dịch lại tất cả mọi thứ, bởi vì nó sẽ chỉ làm việc khi bạn thay đổi một tập tin phiên bản:

var shell = require('gulp-shell'); 

gulp.task('cp', shell.task(['cp -R public/fonts public/build/', 
          'cp -R path/to/vendor/dir public/build/vendor/', 
          '... etc ...'])); 

elixir(function(mix) { 

    ... 

    //register a watcher to run 'cp' when you rebuild 
    mix.task('cp','public/build/**/*.(js|css)'); 

} 

Answer 2

Đó là các đường dẫn tương đối - vì vậy hãy giữ mối quan hệ tương đối.

Chỉ cần di chuyển hình ảnh qua thư mục public/build/ như một phần của lệnh gulp, sau khi nhìn thấy.

Answer 3

Dưới đây là giải pháp cho Laravel Elixir sau khi bạn xây dựng cho phiên bản. Đối với lệnh sao chép, bạn cần tham khảo nó dưới dạng đường dẫn đầy đủ.

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

/* 
|-------------------------------------------------------------------------- 
| 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 Less 
| file for our application, as well as publishing vendor resources. 
| 
*/ 

elixir(function(mix) { 
    mix.version('themes/default/assets/css/styles.css') 
     .copy('public/themes/default/assets/img/', 'public/build/themes/default/assets/img/'); 
});