创建 Gulp 任务以缩小/合并文件以将多个目录中的源打包到各自目录中的文件中

Question

我正在编写一个具有以下结构的 Angular 项目：

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

其中组件是共享资源，而直接驻留在 js/ 下的文件是所需组件和供应商库的包。

我想用 gulp 做的是创建一个任务，该任务将从每个组件目录流式传输文件，观察更改以触发 ngmin() 和 uglify()，然后将这些文件 concat() 到“{componentDirectoryName}”中。 package.min.js 的文件位于组件的目录中。结果看起来像这样：

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

当前实现：

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

您可以使用node-glob 获取组件的名称。
要将多个源注册为单个任务，您可以使用streamqueue 组合流。

这是我的解决方案：

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']);