it-swarm.com.de

Grunt usemin und useminPrepare mehrere Ziele

Aus den usemin-Ausgaben scheint es, dass usemin und useminPrepare mehrere Ziele in der neuesten Version unterstützen:

Unterstützen Sie mehrere Ziele in useminPrepare:

usemin unterstützung:

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']
    }
},

ich erhalte jedoch die folgende Fehlermeldung:

Task "usemin: foo" (usemin) ausführen Warnung: Nicht unterstütztes Muster: foo

Verwenden Sie --force, um fortzufahren.

Grunt-usemin 2.0.2 verwenden

foo/index.html und bar/index.html sind die Hauptseiten für zwei Einzelseitenanwendungen.

Danke für Ihre Hilfe!

27

standardmäßig versucht usemin, den Parser-Typ (html, css) anhand des Zielnamens zu ermitteln. Wenn Sie ein Ziel verwenden, dessen Name kein gültiger Parser-Typ ist, sollten Sie die Typ-Option verwenden, um den Parser-Typ manuell anzugeben. Dies führt zu zwei Zielen für jedes Ziel, eines für HTML und eines 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

5
smbeiragh

Benötigen Sie beide Projekte, um unter demselben Repository und demselben Gruntfile zu leben? 

Sie sagten selbst, sie seien "Hauptseiten für 2-Seiten-Anwendungen". Wenn Sie es sich leisten können, es in zwei verschiedene Projekte aufzuteilen, sparen Sie sich wahrscheinlich einige Schmerzen.

Alternativ können Sie beide Indizes in 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']
0
firstdoit

Um dieses Problem zu umgehen (wir hatten eine Weile mit diesem Problem zu kämpfen), beschlossen wir, den gesamten Grunt-Job zweimal auszuführen und eine Grunt-Option hinzuzufügen, durch die die Zieldatei auf einen anderen Wert umgeschaltet wurde. Nicht elegant, aber einfach.

0
AlexMA

Ich habe versucht, etwas Ähnliches zu tun, wo ich mehrere Seiten/Vorlagen mit verschiedenen abhängigen css/js/img-Dateien hatte, die ich separat durch usemin verarbeiten wollte. Sie können ein einzelnes Gruntfile.js verwenden und mithilfe von Multitask mehrere Ziele und Ziele mit usemin erreichen. Das wäre deine Grunzdatei:

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 Aufgaben können Sie alle verschiedenen Ziel-/Zielkonfigurationen ausführen mit:

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 so ändern, dass der Pfad relativ zur Wurzel eingeschlossen wird, z. :

<!-- build:js(./assets/dir/foo) scripts/vendor.js -->
<script src="scripts/file.js"></script>
<!-- endbuild -->
0
tswei

Ich bin mir nicht sicher, ob dies helfen wird, aber es gelang mir mit einer Kombination aus Grunt-Contrib-Min und Grunt-Contr

'use strict';

module.exports = function(grunt) {
// Project Configuration
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
            }
        }
    },
});


//Default task(s).
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 nimmt mein App-Verzeichnis auf, gibt alles in den PRO-Ordner aus und fügt einige spezielle Tags hinzu. Außerdem gibt es alles WIEDER in den Lite-Ordner und andere Schalter.

0
Code Whisperer

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

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

usemin: {
            html: ['index.html'],
            css: ['styles/{,*/}*.css'],
            options: {
                assetsDirs: ['src'],
                patterns: {
                    templates: [[ /<img[^\>]+src=['"]([^"']+)["']/gm,
                        'Update the templates with the new img filenames'
                    ]]
                }
            },
            templates: "scripts/**/*.tpl.html"
        }