2013-01-10 10 views
5

So habe ich yeoman.io für meine Projekte verwendet und ich habe eine feste Ordnerstruktur für meine Bilder. Aber wenn ich es erstelle ändert sich der Dateiname meiner Dateien.verhindern Sie yeoman.io von Bildern zu verkleinern

ich auch verwenden:

$ yeoman build:text 

, weil ich will nur meine css, js und HTML-Templates minify, aber es minifies noch die Bilder. Nicht sicher, ob ich etwas falsch mache.

EDIT:

ich alle Instanzen img im gruntfile kommentiert und das schien zu arbeiten, aber ich nicht, das ist der richtige Weg denken.

Antwort

20

Sie meinen Bildoptimierung oder Revision? Es gibt kein Problem, GruntFile.js für Ihre eigenen Bedürfnisse zu konfigurieren. Es macht Yeoman/Grunt sehr mächtig, weil es sehr anpassungsfähig ist. Wenn Sie keine Bildoptimierung wünschen, entfernen Sie die Konfiguration in der Task img.

// Optimizes JPGs and PNGs (with jpegtran & optipng) 
    img: { 
    }, 

Wenn Sie das Umbenennen von Bilddateien nicht wollen, entfernen Sie die img Linie von der rev Aufgabe:

// renames JS/CSS to prepend a hash of their contents for easier 
// versioning 
rev: { 
    js: 'scripts/**/*.js', 
    css: 'styles/**/*.css' 
}, 
+0

Vielen Dank, ich habe versucht, diese 'rev' Aufgabe ohne Verständnis zu deaktivieren, ist es ein Teil der Optimierung oder etwas anderes. Was genau nutzt es? –

+2

@AhmadAlfy: Es ist ein Cache-Buster. Wenn Sie Ihre Website aktualisieren möchten, müssen Sie sicherstellen, dass der Browser keine alte Version einer Ressource verwendet (html, js, image, ...). Der beste Weg, dies sicherzustellen, besteht darin, der Ressourcendatei einen zufälligen Hash hinzuzufügen, sodass dieser immer eindeutig ist. – asgoth

0

Wenn Sie das Bild entfernen revving es wird Ihr Cache Büste, sollten Sie versuchen zu halten Aktualisieren und aktualisieren Sie stattdessen Ihre JS-Dateien.

Versuchen Sie usemin Block um so etwas wie diese Aktualisierung:

usemin: { 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    js: '<%= yeoman.dist %>/scripts/{,*/}*.js', 
    options: { 
     assetsDirs: [ 
      '<%= yeoman.dist %>', 
      '<%= yeoman.dist %>/images', 
      '<%= yeoman.dist %>/styles' 
     ], 
     patterns: { 
      js: [ 
       [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images'] 
      ] 
     } 
    } 
} 

Sie bereits die usemin Methode haben sollte, fügen Sie einfach den js Attribut mit Ihnen Pfad regex und fügen Sie das Attribut pattern js. Dadurch werden alle Vorkommen des Bilds in Ihren JS-Dateien durch die neue Version ersetzt, sodass die Browser der Clients kein zwischengespeichertes Bild anstelle eines neuen Bildes verwenden.

Verwandte Themen