Create Gulp tasks to minify/concat files to package sources from multiples directories into files in their respective directory

Question

I'm writing an Angular project with the following the structure:

js/
    components/
        component1/
            component1.directive.js
            component1.controller.js
            component1.factory.js
            component1.rest.service.js
        component2/
            component2.factory.js
            component2.rest.service.js
    vendor/
        angular/
        jquery/
    home.js
    page2.js

where the components are shared resources and files which reside directly under js/ are packages of required components and vendor libs.

What I want to do with gulp is create a task which will stream the files from each component directory, watch for changes to trigger ngmin() and uglify(), then concat() those files into a '{componentDirectoryName}.package.min.js' file while lives in the component's directory. The result would look something like this:

js/
    components/
        component1/
            component1.directive.js
            component1.controller.js
            component1.factory.js
            component1.rest.service.js
            component1.package.min.js
        component2/
            component2.factory.js
            component2.rest.service.js
            component2.package.min.js

Current implementation:

var gulp        = require('gulp');
var $           = require('gulp-load-plugins')({ camelize: true});
var glob        = require('glob');
var StreamQueue = require('streamqueue');

var publicDir = './src/main/webapp/public/';
var jsDir = publicDir + 'js/';
var components = jsDir + 'components/';

gulp.task('js', function() {
    var componentsDirectories = glob.sync(components + '/*/');
    var queue = new StreamQueue();

    componentsDirectories.forEach(function(directory) {
        var componentName = directory.match(/.+\/(.+)\/$/)[1];

        queue.queue(
            gulp.src([directory + '*.js', '!' + directory + '*-package.min.js'])
                .pipe($.ngmin())
                .pipe($.jsmin())
                .pipe($.concat(componentName + "-package.min.js"))
                .pipe(gulp.dest(directory))
        );
    });

    return queue.done().pipe($.livereload());

});

gulp.task('watch', function() {
    gulp.watch([components + '**/*.js', '!' + components + '**/*.min.js'], ['js']);
});

gulp.task('default', ['js', 'watch']);

Answer 1

You can use node-glob to get your components' names.
To register multiple sources as a single task you can compose streams with streamqueue.

Here's my solution:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');
var livereload = require('gulp-livereload');
var glob = require('glob');
var StreamQueue = require('streamqueue');

gulp.task('js', function() {

  var componentsFolders = glob.sync('components/*/');
  var queue = new StreamQueue();

  componentsFolders.forEach(function(folder){
    var componentName = folder.match(/.+\/(.+)\/$/)[1];
    queue.queue(
      gulp.src([folder + '*.js', '!' + folder + '*.package.min.js'])
          .pipe(ngmin())
          .pipe(uglify())
          .pipe(concat(componentName + ".package.min.js"))
          .pipe(gulp.dest(folder))
    );
  });

  return queue.pipe(livereload());
});

gulp.task('default', ['js']);