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

Question

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

我在开发阶段挑选哪些图像，但在构建要部署的应用程序版本时，我需要手动检查主要 CSS 和 HTML 文件，并列出所使用的图像列表并将其复制过来。当然，这不是理想的解决方案，我想自动化这个“查找和构建”阶段。

应用程序的结构如下:

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

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

js/
------ main.js

index.html

我一直在寻找一个 Grunt 插件，它可以遍历我唯一的主 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");
}

并创建一个像这样的文件夹: “构建/图像/幻灯片”

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

是否有人已经有这样的 Grunt 插件可用，如果没有，我可以编写它，但我不想重新发明轮子。

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

非常感谢，

Answer 1

我创建了一个 grunt 插件 grunt-collect-css-images在你的问题之后。 (一路上学到了一些东西)。

像下面这样使用它

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

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