Gulp 文件夹中的 Concat 和 Uglify

Question

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

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

这里我想实现的是将这些js文件进行ugl化，得到这样的结构：

|- /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

您需要做的就是将目标路径从 /dist 更改为 /dist/folder。

这是您需要对食谱进行的更改：

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

（假设您已将 scriptsPath 更改为 /dist）

Answer 2

我在这里使用一些节点代码设法解决了这个问题。我所做的是列出文件夹中的所有子文件夹，然后我使用此列表将其中的所有 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 模块。

Gulp 文件夹中的 Concat 和 Uglify

Gulp Concat and Uglify in Folder

gulp

uglifyjs

gulp-concat

gulp-uglify