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

Question

我有一个单页 Web 应用程序 (index.html)，我使用购买的响应式模板构建了它，因此该模板附带了 100 个我可以使用的图标和图像。

我在开发阶段挑选图像，但在构建要部署的应用程序版本时，我需要手动查看主 CSS 和 HTML 文件，列出使用过的图像并将它们复制过来。这当然不是理想的解决方案，我想自动化这个 "find and build" 阶段。

应用程序的结构是这样的：

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

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

js/
------ main.js

index.html

我一直在寻找一个 G运行t 插件，它可以通过我唯一的主 CSS 文件 (compiled/main.css) 并找到所有我最终使用的图像。这个 CSS 文件相当大。然后应该只将这些图像复制到 "build" 文件夹中，如下所示：

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

index.html

在 "build/images" 文件夹中，它还应根据需要维护 CSS 中的文件夹结构，因此引用不会中断。

例如当我运行任务时：

它在 main.css 文件中找到这个片段 -

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

并创建一个如下所示的文件夹： "build/images/slides"

并将'hello.jpeg'复制到其中。

有没有人有这样的G运行t插件已经可以用了，没有的话我也可以写但是我不想重新造轮子

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

非常感谢，

Answer 1

我根据你的问题创建了一个 grunt 插件 grunt-collect-css-images。（一路上学到了一些东西）。

像下面这样使用它

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

在上面，所有 css 当前目录中的文件和 level-1-dir 目录的子目录将被解析为图像，所有这些图像将被复制到 dest 目录中，因为它们在原始目录中目录层次结构。

Answer 2

感谢您查看此 @Vishwanath，但是当您发布代码时 link 我已经编写了大部分插件，所以继续将它发布到 npm。

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

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

如前所述，它是一个简单的插件，您可以将源文件指向 HTML 和 CSS 文件，它将扫描这些文件以仅查找图像并将它们复制到您的构建文件夹，同时维护路径。对于项目中有数百个图像但希望自动执行任务以仅将使用过的图像复制到构建中的人来说，这将非常有用。我已经用我自己的网站项目对其进行了测试，它运行良好，但可能存在一些问题，如果提出，我会解决。

谢谢，

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

Only Find and Copy the Images referenced in the CSS File using Grunt

node.js

gruntjs