僅使用Grunt查找和複製CSS文件中引用的圖像

Question

我有一個單獨的頁面webapp（index.html），我使用我購買的響應模板構建了該模板，以便模板帶有100個圖標和圖像我可以使用。

我在開發階段挑選哪些圖片，但是當涉及到構建要部署的應用程序版本時，我需要手動瀏覽主CSS和HTML文件並製作所使用圖片的列表並複製它們過度。這當然不是理想的解決方案，我想自動執行這個「查找和構建」階段。

應用程序的結構，像這樣：

images/ 
------ icons/ 
------ logos/ 
------ tab/ 
------ slides/ 

css/ 
------ compiled/main.css 

js/ 
------ main.js 

index.html 

我一直在尋找一個咕嚕插件，可以通過我的唯一主css文件（編譯/ main.css的），並找到所有的圖像我結束了使用。這個CSS文件相當大。然後，它應該只圖像複製到「打造」的文件夾，它看起來像這樣：

build/ 
------ images/ 
------ css/ 
------ js/ 

index.html 

「建/圖片」在文件夾需要CSS這樣的參考不打破它也應該保持文件夾結構。

例如當我運行任務：

發現在main.css的文件，這個片段 -

#hero.bg { 
background-image: url("images/slides/hello.jpeg"); 
} 

，使像這樣的文件夾： 「構建/圖片/幻燈片」

，並複製'hello.jpeg'放入它。

有沒有人，如果有這樣一個Grunt插件已經可用，如果沒有，我可以寫它，但我不想重新發明輪子。

如果可能，我想更進一步，並在index.html文件中查找圖像鏈接並複製它們。

非常感謝，

Answer 1

感謝您關注@Vishwanath，但是當您發佈您的代碼鏈接時，我已經編寫了大部分插件，因此繼續並將其發佈到npm。

它的位置： https://www.npmjs.com/package/grunt-img-find-and-copy

和代碼是在這裏： https://github.com/newbreedofgeek/grunt-img-find-and-copy

如上所述，它的一個簡單的插件，你可以點源HTML和CSS文件，它會掃描這些文件僅適用於圖像並在維護路徑的同時將它們複製到構建文件夾。對於在項目中擁有100張圖像但希望將任務自動化爲僅將所使用的圖像複製到版本的用戶來說，這將非常有用。我用我自己的網站項目測試過它，它工作正常，但可能有一些問題，如果提出，我會修復。

感謝，

Answer 2

我創建了一個咕嚕你的問題後，插件grunt-collect-css-images。 （一路上要學習幾件東西）。

使用它像以下

grunt.initConfig({ 
    collect_css_images: { 
    custom_options: { 
     files: { 
     'dest': ['*.css', 'level-1-dir/**/*.css'] 
     } 
    } 
    } 
}); 

通過上面，在當前目錄下的所有CSS文件和Level-1-dir目錄的子目錄將被解析爲圖像，所有這些圖像將被複制到dest目錄因爲它們在原始目錄層次結構中。