咕嚕插件資產版本

我正在尋找一個咕嚕插件會自動改變這樣一個HTML文件中，以靜態資產（JS/CSS）引用：咕嚕插件資產版本

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

我搜索在gruntjs。 com/plugins - >「version」，但似乎它們都改變了文件的實際版本，而不是對它們的引用。

我是否缺少它？有沒有可以執行此任務的插件？

來源

2014-02-23 Andreas

爲此，我使用grunt-filerev作爲版本號，grunt-usemin用於自動更新源文件中的引用。

這兩個模塊工作得很好（usemin與filerev提供的映射替換引用）

希望這有助於

編輯：幾個代碼示例（只顯示你什麼你的情況很有趣）：

包裝，只有當我的應用程序（用於部署）我用usemin & filerev：

在我的index.html的頭部，下面的代碼告訴usemin採取所有文件build標籤之間和agregate它變成一個名爲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 --> 
[...]

接下來，在我的gruntfile.js，我有兩個節點：

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

最後，我有把所有的一起一咕嚕任務：

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

然後，生成的HTML是這樣的：

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

來源

2014-02-24 12:41:15

非常感謝你的回覆。我閱讀了這些模塊的文檔並試圖使用它們。他們工作，但似乎我必須創建一個額外的目標文件夾，這是不正確的。是否有可能將html和js文件保存在自己的目錄中，而不是將它們移動到新目錄中？請參閱我的項目的當前結構：http://pastebin.com/qcsaUBHC – Andreas

我發現了一篇關於保持Grunt清潔的整潔文章，它遍歷整個文件夾結構，Gruntfile.js配置和任務運行，結束於http://www.jayway.com/2014/01/20/clean-grunt/。你對早期答案的評論是關於文件夾結構的，所以它也應該對此有所幫助，因爲那裏的結構在根中也沒有index.html文件。

準備你的HTML文件爲每grunt-usemin（我聯繫和/或後）的文檔
您需要添加grunt-contrib-copy，這樣你就可以index_src.html複製和重命名爲index.html的（used this for inspiration ），然後繼續使用'usemin'任務。
將資產變動引用相對路徑（例如../js/controller.js）

然後配置Gruntfile.js這樣的：

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

我不是100％肯定的正則表達式來重命名文件，但做一個文件夾的備份，並試一試。另外，我按照您提供的pastebin鏈接來回答，它不包含任何css文件。如果有的話，事情會變得複雜一些，所以讓我知道。

然後，您可以使用咕嚕任務碧溪建議，但包括您的副本步驟（和CONCAT &醜化）

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

來源

2014-03-13 20:53:00 Wraithers

咕嚕插件資產版本

回答

相關問題