咕嘟咕嘟的毗连和丑化的文件夹

Question

我有这样的文件夹结构在我的项目：

|- /src 
    |-- components 
     |-- folder1 
     |-- subfolder1 
      |-- file1.js 
      |-- file2.js 
      |-- file3.js 
     |-- folder2 
     |-- subfolder2 
      |-- file1.js 
      |-- file2.js 
      |-- file3.js 

我想在这里实现的是丑化这些js文件，并得到这样的结构：

|- /dist 
    |-- components 
     |-- folder1 
     |-- subfolder1 
      |-- subfolder1.js (minified) 
     |-- folder2 
     |-- subfolder2 
      |-- subfolder2.js (minified) 

我试图this gulp recepie这是生成每个文件夹一个文件，但我得到的是：

|- /dist 
    |-- components 
     |-- folder1.js (minified) 
     |-- folder2.js (minified) 

Answer 1

。我所做的是列出文件夹中的所有子文件夹，然后使用此列表连接它们中的所有js文件，最后在具有相同路径的文件夹中生成文件。

var gulp = require('gulp'), 
    fs = require('fs'), 
    path = require('path'), 
    concat = require('gulp-concat'), 
    normalize = require('normalize-path'), 
    gif = require('gulp-if'), 
    minify = require('gulp-minify'), 
    header = require('gulp-header'), 
    sourcemap = require('gulp-sourcemaps'), 
    paths = require('../../configs/paths.js'), 
    env = require('../../configs/env.js'), 
    headerConfig = require('../../configs/header.js'); 

var list = []; 

function getFolders(dir) { 
    fs.readdirSync(dir) 
     .filter(function(file) { 
      if (fs.statSync(path.join(dir, file)).isDirectory()) { 
       getFolders(path.join(dir, file)); 
       list.push({ 
        fullPath: normalize(path.join(dir, file)).replace('src/', '/'), 
        parentFolderName: path.join(dir, file).split(path.sep).slice(-1)[0] 
       }); 
      } 
     }); 
    return list; 
} 

gulp.task('js.components', function() { 
    return getFolders(paths.src + '/components/').map(function(subfolder) { 
     return gulp.src(paths.src + subfolder.fullPath + '/*.js') 
      .pipe(sourcemap.init()) 
      .pipe(concat(subfolder.parentFolderName + '.js')) 
      .pipe(gif(
       env.production, 
       minify({ 
        preserveComments: 'some', 
        noSource: true, 
        ext: { 
         min: '.js' 
        }, 
        mangle: true, 
        ignoreFiles: ['.min.js'] 
       }) 
      )) 
      .pipe(header(headerConfig.banner, { 
       pkg: headerConfig.pkg 
      })) 
      .pipe(sourcemap.write()) 
      .pipe(gulp.dest(paths.public + subfolder.fullPath)); 
    }); 
}); 

---

下面是执行此功能：

var list = []; 

function getFolders(dir) { 
    fs.readdirSync(dir) 
     .filter(function(file) { 
      if (fs.statSync(path.join(dir, file)).isDirectory()) { 
       getFolders(path.join(dir, file)); 
       list.push({ 
        fullPath: normalize(path.join(dir, file)).replace('src/', '/'), 
        parentFolderName: path.join(dir, file).split(path.sep).slice(-1)[0] 
       }); 
      } 
     }); 
    return list; 
} 

确保装入fs，path和normalize-path模块。

Answer 2

您只需将目标路径从/dist更改为/dist/folder即可。

下面是你需要的食谱做的修改：我设法在这里使用一些节点代码来解决这个问题

- .pipe(gulp.dest('/dist')) 
+ .pipe(gulp.dest('/dist/' + folder)) 

（假设你已经改变scriptsPath到/dist）