Gulp - 处理多个主题和文件夹

Question

我正在尝试创建一个gulpfile我们可以在我们的一个大型网站上使用的终极版（一个具有多个主题的网站，具体取决于您所在网站的部分）。我试图让它只运行它需要运行的进程，而不是重新编译所有东西。

让我准确地布局我想要实现的目标：

文件夹结构

src/
    master-theme/
        css/
            style.scss
            partials/
                _a.scss
                _b.scss
        img/
            a.jpg
            b.jpg

    sub-theme/
        css/
            style.scss
            partials/
                _c.scss
                _d.scss
        img/
            c.png
            d.jpg

我想这些文件被压缩/编译，并与相同的文件夹结构中的目标文件夹落得（只需更换src用dest在你的头脑）

问题

目前我可以让它做我想做的事 - 但 gulpfile 编译并压缩所有内容。例如，如果我向其中添加图像，sub-theme/img将对所有“主题”运行图像压缩。我正在使用，gulp-changed但它仍然意味着它正在查看整个站点的所有图像。

sass 也是如此——如果我更新_c.scss，但是主 css 和子主题 css 被编译，这显然是不想要的。

当前解决方案

我现在真的没有。现在我正在使用gulp-file-tree生成文件夹结构的 json 文件，然后每当文件更改时，使用函数循环遍历（我知道这很可怕 - 但目前有效的解决方案）

var tree = require('./build/tree.json');
var children = tree.children;

for (var i = children.length - 1; i >= 0; i--) {

    var child = children[i];

    if(child.isDirectory)
        task(child)
}

有task()一个 gulp 任务传入（例如 Sass 编译）

文件夹结构不值得讨论 - 我不希望这变成“以不同方式构建文件”之类的事情。还有其他几个与这个问题无关的因素，即我们为什么这样（对不起，我不得不说......）

我愿意尝试任何事情，因为我已经盯着这个文件好几天了。我试图运行的任务是：

• Sass编译
• 精灵生成
• SVG 精灵到 PNG 精灵
• 图像压缩
• Javascript 压缩

在此先感谢您的帮助。如果找到解决方案，我会写一篇关于它的适当帖子，以便其他人不会感受到我的痛苦......

Answer 1

我将使用以下插件来管理已处理文件的缓存。然后它将使用缓存并确定需要更改的内容以及在此之前已经处理过的内容。

https://github.com/wearefractal/gulp-cached

华泰