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

我正在努力创造一个终极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 with 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)
}

There task()是传入的 gulp 任务（例如 Sass 编译）

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

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

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

在此先感谢您的帮助。如果找到解决方案，我会写一篇适当的文章，这样其他人就不会感受到我的痛苦......

我正在做几乎同样的事情，而且我想我已经成功了。

gulpfile.js：

var gulp = require('gulp'),
    debug = require('gulp-debug'),
    merge = require('merge-stream'),
    sass = require('gulp-sass'),
    less = require('gulp-less'),
    changed = require('gulp-changed'),
    imagemin = require('gulp-imagemin'),
    prefix = require('gulp-autoprefixer'),
    minifyCSS = require('gulp-minify-css'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload,
    path = require('path'),
    glob = require('glob');

// Log errors to the console
function errorHandler(error) {
    console.log(error.toString());
    this.emit('end');
}

function processThemeFolder(src) {
    function debugTheme(type) {
        return debug({ title: 'theme ' + theme + ' ' + type});
    }

    var theme = path.basename(src);
    var dest = 'public/themes/' + theme;

    return merge(
        gulp
            .src([src + '/sass/**/*.scss'])
            .pipe(changed(dest + '/css', { extension: '.css' }))
            .pipe(debugTheme('sass'))
            .pipe(sass())
            .pipe(minifyCSS())
            .pipe(gulp.dest(dest + '/css')),
        gulp
            .src([src + '/less/**/*.less'])
            .pipe(changed(dest + '/css', { extension: '.css' }))
            .pipe(debugTheme('less'))
            .pipe(less())
            .pipe(minifyCSS())
            .pipe(gulp.dest(dest + '/css')),
        gulp
            .src([src + '/js/**/*.js'])
            .pipe(changed(dest + '/js'))
            .pipe(debugTheme('js'))
            .pipe(uglify())
            .pipe(gulp.dest(dest + '/js')),
        gulp
            .src([src + '/img/**/*.{png,jpg,gif}'])
            .pipe(changed(dest + '/img'))
            .pipe(debugTheme('img'))
            .pipe(imagemin())
            .pipe(gulp.dest(dest + '/img'))
    ).on('change', reload);
}

gulp.task('themes', function() {
    var srcThemes = glob.sync('resources/themes/*');
    return merge(srcThemes.map(processThemeFolder));
});

// ...

这里的关键是使用吞咽改变 https://github.com/sindresorhus/gulp-changed仅传递已更改的文件。剩下的就是上面的奶油。

编译流都显示一条调试行，详细说明哪些文件将进入流。当流发生变化时， browserSync 被通知使用流式传输（如果可能）重新加载浏览器。主题任务只完成一次 它的所有编译流都已完成，并且只有当所有主题都完成时，总体主题任务才会被标记为已完成。

主题的源文件存储在resources/themes/themename中，并将其输出写入public/themes/themename。

这对我来说非常有效，YMMV。 :-)