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

Standardmäßig versucht usemin, den Parser-Typ (html, css) aus dem Zielnamen zu erkennen. Wenn Sie ein Ziel verwenden, dessen Name kein gültiger Parser-Typ ist, sollten Sie die Option "type" verwenden, um den Parser-Typ manuell anzugeben. Dadurch wird für jedes Ziel zwei Ziele generiert, eins für html und eins für css.

usemin:{
    'foo-html':
    {
       options:
       {
           assetsDirs : ['fooDist'],
           type:'html'
       },
       files: {src: ['fooDist/**/*.html']}
    },
    'foo-css':
    {
        options:
        {
            assetsDirs : ['fooDist'],
            type:'css'
        },
        files: {src: ['fooDist/styles/**/*.css']}
    },
    'bar-html':
    {
        options:
        {
            assetsDirs : ['barDist'],
            type:'html'
        },
        files: {src: ['barDist/**/*.html']}
    },
    'bar-css':
    {
        options:
        {
            assetsDirs : ['barDist'],
            type:'css'
        },
        files: {src: ['barDist/styles/**/*.css']}
    }
}

https://github.com/yeoman/grunt-usemin/issues/255

Answer 2

Brauchen Sie beide Projekte im selben Repository und der selben Gruntfile?

Sie haben selbst gesagt, dass es sich um "Hauptseiten für 2 Einzelseitenanwendungen" handelt. Wenn Sie es sich leisten können, sie in zwei verschiedene Projekte aufzuteilen, werden Sie sich wahrscheinlich einige Schmerzen ersparen.

Alternativ können Sie beide Indexe unter einem gemeinsamen Verzeichnis gruppieren. So verwende ich grunt-usemin mit zwei verschiedenen Indexdateien:

useminPrepare:
    html: ['build/<%= relativePath %>/index.html', 'build/<%= relativePath %>/orderPlaced/index.html']
    options:
        dest: 'build/'
        root: 'build/'

usemin:
    html: ['build/<%= relativePath %>/index.html', 'build/<%= relativePath %>/orderPlaced/index.html']

Answer 3

Nicht sicher, ob dies hilfreich ist, aber es ist mir gelungen, das zu tun, was du versucht hast, mit einer Kombination aus Grunt-Contrib-Min und Grunt-Contr

'use strict';

module.exports = function(grunt) {
// Projektkonfiguration
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    copy: {
      main: {
        options: {
            encoding: 'UTF-16'
          },
        files:[
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/audio/*',
          dest: 'bin/pro/audio/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/fonts/*',
          dest: 'bin/pro/fonts/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/adaptors/*.html',
          dest: 'bin/pro/adaptors/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/lib/*',
          dest: 'bin/pro/lib/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/img/*',
          dest: 'bin/pro/img/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/manifest.json',
          dest: 'bin/pro/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/audio/*',
          dest: 'bin/lite/audio/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/fonts/*',
          dest: 'bin/lite/fonts/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/adaptors/*.html',
          dest: 'bin/lite/adaptors/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/lib/*',
          dest: 'bin/lite/lib/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/img-lite/*',
          dest: 'bin/lite/img/'
        },
        {
          expand: 'true',
          flatten: 'true',
          src: 'src/lite/manifest.json',
          dest: 'bin/lite/'
        }
      ]
   },
 },
    uglify: {
        all: {
            files: {
              'bin/pro/js/cupid.min.js': ['src/popup.js','src/cupid.js','src/adaptors/*.js'],
              'bin/pro/background.js': ['src/background.js'],
              'bin/lite/js/cupid.min.js': ['src/popup.js','src/cupid.js','src/adaptors/*.js'],
              'bin/lite/background.js': ['src/background.js'],
              'bin/lite/lite.js': ['src/lite.js'],
              'bin/pro/pro.js': ['src/pro.js'],
            },
            options: {
                compress: false,
                mangle:false
            }
        }
    },
    targethtml: {
      dist: {
        files: {
          'bin/pro/popup.html': 'src/popup.html'
        }
      },
      lite: {
        files: {
          'bin/lite/popup.html': 'src/popup.html'
        }
      },
    },

    cssmin: {
        all: {
            files: {
              'bin/pro/cupid.min.css': ['src/*.css'],
              'bin/lite/cupid.min.css': ['src/*.css'],

            },
            options: {
                compress: true,
                mangle:true
            }
        }
    },
});

//Standardaufgaben.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-targethtml');

grunt.registerTask('default', ['uglify','cssmin','copy','targethtml']);

};

Diese Grunt-Datei wird mein App-Verzeichnis nehmen, alles in den PRO-Ordner ausgeben mit einigen speziellen Tags hinzugefügt, und auch alles wieder in den Lite-Ordner ausgeben, mit anderen Einstellungen.

Answer 4

Auch wenn mehrere Ziele derzeit in usemin nicht unterstützt werden, können Sie damit neue Muster definieren...

In der Zwischenzeit können Sie neue Ziele definieren, indem Sie beispielsweise Folgendes verwenden:

usemin: {
            html: ['index.html'],
            css: ['styles/{,*/}*.css'],
            options: {
                assetsDirs: ['src'],
                patterns: {
                    templates: [[ /]+src=['"]([^"']+)["']/gm,
                        'Aktualisieren Sie die Vorlagen mit den neuen img-Dateinamen'
                    ]]
                }
            },
            templates: "scripts/**/*.tpl.html"
        }

Answer 5

Als Workaround (wir haben eine Weile damit gekämpft), haben wir beschlossen, den gesamten Grunt-Job zweimal auszuführen und eine Grunt-Option hinzuzufügen, die die Zieldatei auf einen anderen Wert umschaltet. Nicht elegant, aber einfach.