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

HTH

Answer 2

您可以创建一个带有参数的函数，该函数仅编译更改的文件，然后您可以调用另一个组合结果的函数。例如生成 a.css 和 b.css，当 a.scss 更新时，只应更新 a.css。每次调用后，触发一个将 a 和 b 放在一起的组合函数。谷歌也看看你如何获得更改文件的路径。我不记得我用过哪个插件了

Answer 3

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

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));
});

// ...

这里的关键是使用gulp-changed 只通过更改的文件。其余的都是奶油。

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

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

这对我来说效果很好，YMMV。 :-)