咕嘟咕嘟的毗連和醜化的文件夾

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）