2014-02-23 13 views
16

Ich bin für ein Grunzen Plugin suchen, der automatisch die Verweise auf statische Vermögenswerte ändern (js/css) innerhalb einer HTML-Datei wie folgt:Grunt-Plugin für Vermögenswerte Versionierung

<link rel="stylesheet" type="text/css" href="style.css?v=12345678" /> 
<script src="script.js?v=12345678"></script> 

ich die gruntjs gesucht. com/plugins -> "version", aber es scheint, dass alle von ihnen die tatsächliche Version der Dateien anstelle von Verweisen auf sie ändern.

Vermisse ich es? Gibt es ein Plugin, das diese Aufgabe ausführen kann?

Antwort

21

Dazu verwende ich grunt-filerev für die Versionierung und grunt-usemin für die automatische Aktualisierung der Referenzen in Quelldateien.

Diese beiden Module arbeitet gut zusammen (usemin Referenzen mit einer Abbildung ersetzt durch filerev zur Verfügung gestellt)

this helps

edit: einige Code-Beispiele (zeigen Sie nur das, was in Ihrem Fall interessant ist) : nur

I usemin & filerev verwenden, wenn meine app Verpackung (für die Bereitstellung):

In der Spitze meiner index.html, die folgender Code tell usemin alle Dateien zwischen dem build Tag zu nehmen und Agregate es in einen mit dem Namen ie-shims.js

[...] 
<!-- build:js /js/ie-shims.js --> 
    <script src="/vendor/html5shiv/dist/html5shiv.js"></script> 
    <script src="/vendor/respond/dest/respond.src.js"></script> 
<!-- endbuild --> 
[...] 

nächste in meinem gruntfile.js, ich habe zwei Knoten:

[...] 
filerev: { 
    options: { 
     encoding: 'utf8', 
     algorithm: 'md5', 
     length: 8 
    }, 
    source: { 
     files: [{ 
      src: [ 
       'www/js/**/*.js', 
       'www/assets/**/*.{jpg,jpeg,gif,png,ico}' 
      ] 
     }] 
    } 
}, 
useminPrepare: { 
    html: 'src/index.html', 
    options: { 
     dest: 'www' 
    } 
}, 

// usemin has access to the revved files mapping through grunt.filerev.summary 
usemin: { 
    html: ['www/*.html'], 
    css: ['www/css/**/*.css'], 
    js: ['www/js/**/*.js'], 
    options: { 
     dirs: ['www'], 
     assetsDirs: ['www'], 
     patterns: { 
      js: [ 
       [/["']([^:"']+\.(?:png|gif|jpe?g))["']/img, 'Image replacement in js files'] 
      ] 
     } 
    } 
} [...] 

Schließlich I haben ein Grunzen Aufgabe, die alles, was zusammen:

grunt.registerTask('build', 'Build task, does everything', ['useminPrepare', 'filerev', 'usemin']); 

Dann wird das erzeugte HTML wie folgt aus:

[...] 
<script src="/js/ie-shims.9f790592.js"></script> 
[...] 
+0

Vielen Dank für Ihre Antwort. Ich habe die Dokumentation dieser Module gelesen und versucht, sie zu verwenden. Sie funktionieren, aber es scheint, dass ich einen zusätzlichen Zielordner erstellen muss, der nicht OK ist. Ist es möglich, HTML- und JS-Dateien in ihren eigenen Verzeichnissen zu behalten, anstatt sie in ein neues Verzeichnis zu verschieben? Bitte beachten Sie die aktuelle Struktur meines Projekts: http://pastebin.com/qcsaUBHC – Andreas

2

Ich fand einen ordentlichen Post darüber, Grunt sauber zu halten, der durch eine komplette Ordnerstruktur läuft, Gruntfile.js config und Task läuft, vorbei an http://www.jayway.com/2014/01/20/clean-grunt/. Ihr Kommentar zu der früheren Antwort bezieht sich auf die Ordnerstruktur, also sollte es auch dabei helfen, da die Struktur dort auch keine index.html Datei im root hat.

  1. Prep Ihre HTML-Datei gemäß der Dokumentation von grunt-usemin (und/oder der Post I verknüpft)
  2. Sie müssen grunt-contrib-copy hinzuzufügen, so dass Sie index_src.html kopieren und benennen Sie sie in index.html (used this for inspiration) und fahren Sie mit der Task 'usemin' fort.
  3. ändern Verweise auf Ihr Vermögen in relative Pfade (ex ../js/controller.js.)
  4. dann Ihre Gruntfile.js wie folgt konfiguriert werden:

    [...] 
    useminPrepare: { 
        html: 'templates/index.html', 
        options: { 
         dest: 'js' 
        } 
    }, 
    
    // Concat - best to implement it this way for useminPrepare to inject the config 
    concat: { 
        options: { 
         separator: ';' 
        }, 
        // dist configuration is provided by useminPrepare 
        dist: {} 
    }, 
    
    // Uglify - best to implement it this way for useminPrepare to inject the config 
    uglify: { 
        // dist configuration is provided by useminPrepare 
        dist: {} 
    }, 
    
    filerev: { 
        options: { 
         encoding: 'utf8', 
         algorithm: 'md5', 
         length: 20 
        }, 
        source: { 
         files: [{ 
          src: [ 
           'js/**/*.js' 
          ] 
         }] 
        } 
    }, 
    
    copy: { 
        rename: { 
        files: [ 
         { 
         cwd: 'templates', 
         src: ['**/index_src.html'], 
         dest: 'templates', 
         rename: function(dest, src) { 
          return dest + src.replace(/_src\.html$/i, '.html'); 
         } 
         } 
        ] 
        } 
    }, 
    
    // usemin has access to the revved files mapping through grunt.filerev.summary 
    usemin: { 
        html: ['templates/index.html'], 
        options: { 
         assetsDirs: ['js'] 
        } 
    } [...] 
    

    Ich bin nicht 100% sicher über die regex die Datei umzubenennen, aber machen Sie eine Sicherung des Ordners und versuchen Sie es. Auch antworte ich wie der pastebin Link, den du gabst, der keine css Dateien enthielt. Wenn es welche gibt, werden die Dinge etwas kompliziert, also lassen Sie es mich wissen.

  5. Sie könnten dann die Aufgabe, Grunzen verwenden Bixi vorgeschlagen, aber auch Ihren Kopierschritt (und concat & uglify)

    grunt.registerTask('build', 'Build task, does everything', [ 
    'useminPrepare', 
    'concat', 
    'uglify', 
    'copy:rename', 
    'filerev', 
    'usemin' 
    ]);