仅使用Grunt查找和复制在CSS文件中引用的图像

我有一个单一的Web应用程序(index.html),我使用我购买的响应模板来构build这个模板,所以模板带有100个我可以使用的图标和图像。

我在开发阶段select了哪些图片,但是在构build要部署的应用程序版本时,我需要手动浏览主CSS和HTML文件,并将所使用的图片列表复制并复制。 这当然不是理想的解决scheme,我想自动执行这个“查找和构build”阶段。

该应用程序的结构是这样的:

images/ ------ icons/ ------ logos/ ------ tab/ ------ slides/ css/ ------ compiled/main.css js/ ------ main.js index.html 

我一直在寻找一个Grunt插件,可以通过我唯一的主要CSS文件(编译/ main.css),并find我最终使用的所有图像。 这个CSS文件相当大。 然后它应该只将这些图像复制到一个“构build”文件夹,看起来像这样:

 build/ ------ images/ ------ css/ ------ js/ index.html 

在“构build/图像”文件夹中,它也应该在CSS中维护文件夹结构,以便引用不会中断。

例如,当我运行任务:

它在main.css文件中find这个片段 –

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

并创build一个如下所示的文件夹:“build / images / slides”

并将“hello.jpeg”复制到其中。

有没有人,如果有这样一个Grunt插件已经可用,如果没有,我可以写它,但我不想重新发明轮子。

如果可能的话,我想更进一步,并在index.html文件中查找图像链接并复制它们。

非常感谢,

       

网上收集的解决方案 "仅使用Grunt查找和复制在CSS文件中引用的图像"

你的问题后,我创build了一个咕噜插件grunt-collect-css-images 。 ( 一路上要学习一些东西 )。

像下面一样使用它

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

如上所述,当前目录中的所有css文件和level-1-dir目录的子目录都将被parsing为图像,并且所有这些图像将被复制到目录目录中,就像它们在原始目录层次结构中一样。

感谢您查看这个@Vishwanath,但是当您发布代码链接的时候我已经写了大部分的插件,所以继续下去并将它发布到npm。

它在这里: https : //www.npmjs.com/package/grunt-img-find-and-copy

代码在这里: https : //github.com/newbreedofgeek/grunt-img-find-and-copy

如上所述,它是一个简单的插件,您可以指向源HTML和CSS文件,它将只扫描这些文件的图像,并将其复制到您的生成文件夹,同时保持path。 对于在他们的项目中有100个图像的人来说,这将是非常有用的,但是想要自动完成任务,只将所使用的图像复制到一个构build中。 我已经testing了我自己的网站项目,它工作正常,但可能会有一些问题,如果提出,我会修复。

谢谢,