【问题标题】:Gulp - run another task for every file from src collectionGulp - 为 src 集合中的每个文件运行另一个任务
【发布时间】:2018-10-23 19:35:58
【问题描述】:

我的任务很简单,就是从 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”之后的所有资源?

【问题讨论】:

    标签: gulp


    【解决方案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 文件的 Theme 文件夹的情况 - 但如果需要,可以过滤掉这些文件夹。

    【讨论】:

    • thnx,我试试这个模式。
    【解决方案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'));
    });
    

    【讨论】:

    • dest 文件夹名称是基于 src 文件名的动态。我需要使用原始路径解析。
    猜你喜欢
    • 1970-01-01
    • 2014-07-03
    • 2016-09-23
    • 1970-01-01
    • 2023-02-26
    • 1970-01-01
    • 2014-06-21
    • 1970-01-01
    • 2012-06-28
    相关资源
    最近更新 更多