Grunt usemin und useminPrepare mehrere Ziele

Question

Von den usemin issues scheint es, dass usemin und useminPrepare multiple Ziele in der neuesten Version unterstützen:

Unterstützung von mehreren Zielen in useminPrepare:

• pull#162

• pull#206

usemin Unterstützung:

• Mehrere Ziele

Ich habe versucht, mehrere Ziele mit der folgenden Konfiguration zu verwenden:

useminPrepare: {
    foo: {
        dest: 'fooDist',
        src: ['foo/index.html']
    },
    bar: {
        dest: 'barDist',
        src: ['bar/index.html']
    }
},
usemin: {
    foo: {
        options: {
            assetsDirs : ['fooDist']
        },
        html: ['fooDist/**/*.html'],
        css: ['fooDist/styles/**/*.css']
    },
    bar: {
        options: {
            assetsDirs : ['barDist']
        },
        html: ['barDist/**/*.html'],
        css: ['barDist/styles/**/*.css']
    }
},

aber ich erhalte den folgenden Fehler:

Running "usemin:foo" (usemin) task Warning: Unsupported pattern: foo

Use --force to continue.

Mit grunt-usemin 2.0.2

foo/index.html und bar/index.html sind die Hauptseiten für 2 Single Page Applications.

Danke für deine Hilfe!

Answer 1

Ich habe versucht, etwas Ähnliches zu tun, bei dem ich mehrere Seiten/Vorlagen mit verschiedenen abhängigen CSS/JS/Bild Dateien hatte, die ich separat durch usemin verarbeiten wollte. Sie können eine einzige Gruntfile.js verwenden und eine Multitask verwenden, um mehrere Ziele und Zieldateien mit usemin zu erreichen. Dies wäre Ihr Gruntfile:

var packageConfig = [];
var gruntConfig = {};
gruntConfig.useminPrepareMulti = {};
gruntConfig.useminPrepare = {};
gruntConfig.usemin = {
  html: [],
  css: [],
  options: {
    assetDirs: []
  }
};

var projectDirs = ['foo', 'bar'];

var src, dist;
projectDirs.forEach(function(dir) {
  src = path1 + dir;
  dist= path2 + dir;
  gruntConfig.useminPrepareMulti[dir] = {
    html: src + '*.html',
    options: {
      dest: dist,
      staging: '.tmp' + dir,
      flow: { html: { steps : { js : ['concat'] } } },
      post: {}
    }
  };
  packageConfig.push(src);
  gruntConfig.usemin.html.push(dist + '*.html');
  gruntConfig.usemin.css.push(dist + '/styles/*.css');
  gruntConfig.usemin.options.assetsDirs.push( dist, dist + '/styles');
});

grunt.initConfig(gruntConfig);

grunt.registerMultiTask('useminPrepareMulti', 'multi-target-usemin', function() {
  grunt.config.set('useminPrepare', this.data);
  grunt.task.run('useminPrepare');
});

Mit den registrierten Tasks können Sie alle verschiedenen Ziel-/Zieldateikonfigurationen mit dem folgenden Befehl ausführen:

grunt.registerTask('default', ['useminPrepareMulti']);

Oder führen Sie sie einzeln aus der packageConfig aus, die Sie erstellt haben:

grunt.registerTask('single', ['useminPrepareMulti:' + packageConfig[0]]);

Ich musste auch die usemin Blöcke im HTML-Code ändern, um den Pfad relativ zum Root einzuschließen, z.B.: