Indirizzo immagine nei modelli di colore scuro grunt build

Ho usato Yeoman per creare un'app Web in EmberJS. Tutto funziona bene, ma dopo aver usato il comando grunt build, se visualizzo l'app costruita nel browser (dalla directory dist), posso vedere che alcune immagini sono mancanti perché il percorso src è sbagliato.Indirizzo immagine nei modelli di colore scuro grunt build

Grunt sta cambiando i nomi di tutte le immagini nella cartella "immagine", ma non sta aggiornando i percorsi nel mio HTML. Aggiorna il percorso solo nei file css; le immagini nei file modello .hbs hanno ancora il vecchio percorso (con il vecchio nome dell'immagine) ...

Qualcuno sa come risolvere questo problema?

fonte

2013-07-22 Cereal Killer

Infine mi sono liberato di questo:

tutto ciò che è necessario è quello di modificare i Gruntfile.js nella root del progetto; il task rev è quello che gestisce la ridenominazione dell'immagine; Di solito si tratta di qualcosa di simile:

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

Non vi resta che eliminare la riga che gli dica per elaborare la cartella di immagini:

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

E lo si fa; tutte le immagini manterranno il loro nome originale e quindi nessun percorso verrà aggiornato nei file css, html o hbs ... Si noti che l'attività rev è responsabile solo della ridenominazione dei file, non della compressione (per le immagini viene eseguita dal task imagemin) e quindi le immagini verranno compresse in ogni caso ...

fonte

2013-07-22 23:45:17

Grazie! Stavo solo combattendo con lo stesso problema :) – whatyouhide

Vedo la stessa cosa, ma questo non risolve il problema di root. Ho delle viste per la mia app AngularJS in cui sono specificate le immagini, e mi auguro che l'attività rev rinomini i percorsi nella versione dell'app della directory dist. Qualcuno sa come far funzionare il rev task con template/viste? – Swaraj

@Swaraj, nel mio compito usemin, ho cambiato 'html: ['<% = yeoman.dist%>/{, * /} *. Html']' a 'html: ['<% = yeoman.dist%> /{,*/}*.html ',' <% = yeoman.dist%>/views/{, * /} *. html '] 'che sembrava fare il trucco. – ozandlb

FWIW, credo che l'autore di rev sia stato supposto su qualcosa qui: stanno affermando che le immagini dovrebbero essere incluse come sfondi CSS, non via img tag. Quindi, se i tuoi modelli e visualizzazioni ottengono tutte le loro immagini in questo modo, non avrai alcun problema.

IMHO, questa è una convenzione piuttosto buona da seguire. Fai tutto con le immagini di sfondo e il problema dovrebbe essere risolto nell'intera applicazione.

fonte

2013-12-06 20:50:19 XML

punto, ho spostato il mio immagine src in css immagini di sfondo e l'attività di rev ha gestito come previsto. –

È possibile trasformare l'immagini url nella brace compilato js template ... ecco un esempio di configurazione di usemin che fa questo:

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'] 
    }

fonte

2013-12-09 09:38:45

questo non funziona per me su ember-generator v0.8. errore '' 'Elaborazione come JS - dist/scripts/7sd9af.templates.js Avviso: non definito non è una funzione''' –

Forse vai su https://github.com/yeoman/grunt-usemin#patterns e prova a fare un semplice esempio di lavoro ... potrebbe essere una versione precedente di Usemin? –

@AndreasUna soluzione eccellente! Questo risolve la radice del problema e dovrebbe essere contrassegnato come risposta accettata. +1 da me! – jedmao

Prova questo:

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'] 
        ] 
       } 
      } 
     }

Da qui: Grunt plugin for assets versioning

Il regex glob convalida, al contrario di altre soluzioni mostrate qui.

rotolato anche tornare a usare-min 2.1.1 npm installare [email protected] --save-dev

Anche se, credo che 'assetsDirs' Per quanto riguarda solo 'dirs' opposti causa la non definita errore di funzione?

fonte

2015-04-15 19:23:49

Indirizzo immagine nei modelli di colore scuro grunt build

risposta

Problemi correlati