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

我做了几乎相同的事情，我想我已经把它钉了出来。

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（如果可能）通知browserSync重新加载浏览器。主题任务只完成一次它的所有编译流都已完成，并且只有在完成所有主题后，才会将整体主题任务标记为已完成。

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

这对我来说非常好，YMMV。： - ）

Answer 2

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

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

HTH

Answer 3

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

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

文件夹结构

问题

当前解决方案

3 个答案: