CODEWITHSUNDEEP
javascriptgulpconcatenationgulp-concat
tylorreimer
tylorreimer

Reputation: 79

Concatenate and Rename files based on Directory name with Gulp

I am trying to setup my gulpfile.js to concatenate all .js files in my src/js folder and name them based on their parent folder.

Example of folder structure:

project
|
+-assets
| |
| +-app.min.js
| |
| +-vendor.min.js
|
+-src
| |
| +-app
| | |
| | +-file1.js
| | |
| | +-file2.js
| |
| +-vendor
| | |
| | +-file1.js
| | |
| | +-file2.js

I can set it up for specific folders and have specific file names for each one but I would like a function that can run through an undefined variation of folders and names.

What I was using before was:

gulp.task('js', function () {
    gulp.src('src/js/app/**/*.js')
        .pipe(plumber(plumberErrorHandler))
        .pipe(jshint())
        .pipe(jshint.reporter('fail'))
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/js'))
});

Upvotes: 1

Views: 2109

Answers (2)

user764754
user764754

Reputation: 4236

Take a look at this official recipe. It should show exactly what you want.

function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

var folders = getFolders('src');

folders.map(function(folder) {      
      gulp.src(path.join('src', folder, '/**/*.js'))
        .pipe(concat(folder + '.js'))
        .pipe(gulp.dest('assets'));
   });

Upvotes: 2

Carlos Moreira
Carlos Moreira

Reputation: 331

but I would like a function that can run through an undefined variation of folders and names.

I personally don' know an easy way to do that. What I'd usually go for that solves my problem is to set a path variable with name of those folders and build my task like that.

var path = [ 'app', 'vendor' ];

gulp.task('js', function () {
  for (var i = 0; i < path.length; i++) {
    var p = path[i];
    gulp.src('src/' + p + '/**/*.js')
        .pipe(plumber(plumberErrorHandler))
        .pipe(jshint())
        .pipe(jshint.reporter('fail'))
        .pipe(concat(p + '.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/js'))
  }
});

I've heard that gulp-path might do what you want, but I personally haven't looked into it.

Upvotes: 0

Related Questions