Question

我的项目中有这个文件夹结构：

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

我想在这里实现的是uglify这些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）

Gulp Concat和Uglify在文件夹中

2 个答案: