Gulp Concat and Uglify in Folder

Question

I have this Folder Structure in my Project:

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

What I want to achieve here is to uglify these js file and get this structure:

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

I tried this gulp recepie which is for Generating a file per folder but what I get is:

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

score 0 · Accepted Answer · answered Nov 21 '16 at 10:27

I managed to solve the issue by using some node code here. What I do is I list all subfolders in a folder, then I use this list to concatenate all js files in them and finally produce the files in folders with the same path.

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));
    });
});

Here's the Function that does this:

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;
}

Make sure you load fs, path and normalize-path modules.

Tse Kit Yam · Answer 2 · 2016-11-21T07:39:57.933

-1

All you need to do is change the dest path from /dist to /dist/folder.

Here is the change you need to do on the recipe:

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

(Assumed that you have changed scriptsPath to /dist)

edited Nov 21 '16 at 07:39

answered Nov 21 '16 at 07:34

Tse Kit Yam

173
8

Gulp Concat and Uglify in Folder

2 Answers2