Question

我有一个简单的任务，可以从LESS文件生成多个主题。

gulp.task("themes-base", function () {
    return gulp
        .src(["./build/THEMES/*Theme.less"])
        .pipe(less())
        .pipe(postcss([autoprefixer()]))
        .pipe(chmod(666))
        .pipe(rename(function (path) {
            path.dirname += "/" + path.basename + "_New";
            path.basename = "styles";
            path.extname = ".css";
        }))
        .pipe(gulp.dest("./dist/Content/Themes"));
});

仅从源目录中获取所有文件，并根据文件名创建输出目录并放入已编译的CSS中。

Get AAATheme.less and compile it to Themes/AAA/styles.css  
Get BBBTheme.less and compile it to Themes/BBB/styles.css

它工作正常。

但是现在我需要从静态文件夹到主题文件夹的每个已处理的LESS文件复制资源（图像，字体，...）。

Get everything from build/Images folder and copy all to Themes/AAA/Images
Get everything from build/Images folder and copy all to Themes/BBB/Images

因此，每个主题在其自己的文件夹中将具有相同的资源。

如何创建任务以解析目标目录结构以复制“ gulp.dest”之后的所有资源？

Answer 1

例如，参见run the same task on multiple folder。

const gulp = require('gulp');
const glob = require('glob');

// this gets an array of matching folders
const themeFolders = glob.sync('Themes/*/');
// console.log(themeFolders);

gulp.task('copy', () => {

  let stream;

  // work on each folder separately
  themeFolders.forEach(function (themeFolder) {

    stream = gulp.src( 'build/**/*' )
      // do other stuff here is you want
      .pipe(gulp.dest( themeFolder ));
  });
  return stream;
});

这是一项非常有用的技术，很容易了解。我没有考虑过其中有一个主题文件夹，其中没有styles.css文件的情况-但是可以根据需要将这些文件夹过滤掉。

Answer 2

只需将任务copy和/**/*用于目录和子目录。

gulp.task('copy', function () {
    gulp.src('./build/Images/**/*')
        .pipe(gulp.dest('./Themes/AAA/Images'));
});

动态

gulp.task('copy', function () {
  return gulp.src('./build/Images/**/*')
    .pipe(uglify())
    .pipe(rename(function (path) {
        path.dirname += "/"+path.basename;
    }))
    .pipe(gulp.dest('./dist/Content/Themes'));
});

Gulp-为src集合中的每个文件运行另一个任务

2 个答案: