Địa chỉ hình ảnh trong các mẫu ember grunt build

Question

Tôi đã sử dụng Yeoman để tạo một ứng dụng web trong EmberJS. Mọi thứ hoạt động ok, nhưng sau khi sử dụng lệnh grunt build, nếu tôi xem ứng dụng được xây dựng trong trình duyệt (từ thư mục dist), tôi có thể thấy một số hình ảnh bị thiếu do đường dẫn src sai.

Grunt đang thay đổi tên của tất cả hình ảnh trong thư mục "hình ảnh", nhưng không cập nhật đường dẫn trong HTML của tôi. Nó cập nhật đường dẫn chỉ trong các tệp css; hình ảnh trong tệp mẫu .hbs vẫn có đường dẫn cũ (có tên hình ảnh cũ) ...

Bất kỳ ai biết cách sửa lỗi này?

Answer 1

Cuối cùng tôi đã loại bỏ điều này:

tất cả những gì cần là chỉnh sửa Gruntfile.js trong thư mục gốc của dự án; nhiệm vụ rev là nhiệm vụ quản lý việc đổi tên hình ảnh; thường nó là một cái gì đó như thế này:

rev: { 
     dist: { 
      files: { 
       src: [ 
        '<%= yeoman.dist %>/scripts/{,*/}*.js', 
        '<%= yeoman.dist %>/styles/{,*/}*.css', 
        '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}', 
        '<%= yeoman.dist %>/styles/fonts/*' 
       ] 
      } 
     } 
    }, 

Bạn chỉ cần xóa các hàng đó nói cho anh ta để xử lý các thư mục hình ảnh:

rev: { 
     dist: { 
      files: { 
       src: [ 
        '<%= yeoman.dist %>/scripts/{,*/}*.js', 
        '<%= yeoman.dist %>/styles/{,*/}*.css', 
        '<%= yeoman.dist %>/styles/fonts/*' 
       ] 
      } 
     } 
    }, 

Và nó được thực hiện; tất cả các hình ảnh sẽ giữ nguyên tên gốc của chúng và do đó không có đường dẫn nào được cập nhật trong các tệp css, html hoặc hbs ... Lưu ý rằng nhiệm vụ rev chỉ chịu trách nhiệm đổi tên tệp, không phải để nén (đối với hình ảnh được thực hiện bởi tác vụ imagemin) và vì vậy hình ảnh sẽ được nén trong mọi trường hợp ...

Answer 2

FWIW, tôi tin rằng tác giả của rev đang được ý kiến ​​về một điều gì đó ở đây: họ khẳng định rằng hình ảnh phải được bao gồm dưới dạng CSS, chứ không phải thông qua img thẻ. Vì vậy, nếu các mẫu và chế độ xem của bạn có tất cả hình ảnh theo cách đó, bạn sẽ không gặp bất kỳ sự cố nào.

IMHO, đây là một quy ước khá tốt để làm theo. Làm tất cả mọi thứ với hình ảnh nền, và vấn đề cần được giải quyết trên ứng dụng.

Answer 3

Bạn có thể chuyển đổi các url hình ảnh trong ember biên soạn js mẫu ... đây là một cấu hình ví dụ về usemin mà thực hiện điều này:

usemin: { 
     html: ['<%= yeoman.dist %>/{,*/}*.html'], 
     css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
     options: { 
      assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/css'], 
      // The next pattern renames images within ember templates 
      patterns: { 
       js: [[/src=['"]([^"']+)["']/gm, 'Update the ember templates JS to reference our revved images']] 
      } 
     }, 
     js: ['<%= yeoman.dist %>/scripts/*.templates.js'] 
    } 

Answer 4

Hãy thử điều này:

usemin: { 
      html: ['<%= yeoman.dist %>/**/*.html'], 
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
      js: ['<%= yeoman.dist %>/scripts/**/*.js'], 
      options: { 
       dirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'], 
       assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'], 
       patterns: { 
        js: [ 
         [/["']([^:"']+\.(?:png|gif|jpe?g))["']/img, 'Image replacement in js files'] 
        ] 
       } 
      } 
     } 

Từ đây: Grunt plugin for assets versioning

Regex glob xác thực, thay vì giải pháp khác được hiển thị tại đây.

Cũng cuộn lại để sử dụng-min 2.1.1 NPM cài đặt grunt-usemin@2.1.1 --save-dev

Mặc dù, tôi nghĩ rằng 'assetsDirs' như trái ngược với chỉ 'dirs' làm cho không xác định lỗi chức năng?