Gulp - 处理多个主题和文件夹 [英] Gulp - Handling multiple themes and folders

问题描述

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

I am trying to create an ultimate gulpfile that we can use on one of our big sites (one with multiple themes depending on the section of the site you are in). I'm trying to get it to only run the process it needs to run and not recompile everything.

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

Let me layout exactly what i'm trying to achieve:

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)

I want these files to be compressed/compiled and to end up in the destination folder with the same folder structure (just replace src with dest in your mind)

目前我可以让它做我想做的事 - 但是 gulpfile 编译和压缩 一切.例如.如果我将图像添加到sub-theme/img，它将为所有主题"运行图像压缩.我正在使用 gulp-changed 但这仍然意味着它正在查看整个站点的所有图像.

At the moment i can get it to do what I want - but the gulpfile compiles and compresses everything. E.g. if I add an image tosub-theme/img it will run the image compression for all the "themes". I am using gulp-changed but it still means that it is looking at all the images accross the site.

sass 也是如此 - 如果我更新 _c.scss，但主 css 和子主题 css 会被编译，这显然是不希望的.

The same is also for the sass - if I update _c.scss, but the master css and the sub-theme css get compiled which is obviously not desired.

我现在真的没有.现在我正在使用 gulp-file-tree 生成文件夹结构的 json 文件，然后每当更改文件时，循环遍历该文件有一个功能(我知道这很可怕 - 但目前有效的解决方案)

I don't really have one at the moment. Right now I am using gulp-file-tree to generate a json file of the folder structure, then whenever a file is changed, looping through that with a function (which I know is horrible - but a solution which currently works)

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编译)

There task() is a gulp tasks passed in (e.g. Sass compilation)

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

我已经盯着这个文件好几天了，我愿意尝试任何事情.我要运行的任务是:

I'm open to trying anything as i've stared at this file for days now.The tasks I am trying to run are:

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

提前感谢您的帮助.如果找到解决方案，我会写一篇适当的帖子，希望其他人不会感受到我的痛苦......

Thanks in advance for your help. If a solution is found, I'll write a proper post about it so that others will hopefully not feel my pain...

推荐答案

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

I'm doing pretty much the same thing, and I think I've nailed it.

gulpfile.js:

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 只通过更改的文件.其余的都是奶油.

The key here is to use gulp-changed to only pass through the changed files. The rest is cream on top.

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

The compilation streams all show a debug line detailing what files are going into the stream. On a change in the stream, the browserSync is notified to reload the browsers, using streaming (if possible). The theme task is only completed once all its compilation streams are done, and the over-all themes task will only be marked as done when all the themes are done.

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

The theme's source files are stored in resources/themes/themename, and writes its output to public/themes/themename.

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

This is working very well for me, YMMV. :-)

这篇关于Gulp - 处理多个主题和文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！