28

useminの問題から、最新バージョンでは複数のターゲットuseminをサポートしているようです:useminPrepare

useminPrepare で複数のターゲットをサポート:

ユーザー サポート:

次の構成で複数のターゲットを使用してみました。

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

しかし、次のエラーが表示されます。

"usemin:foo" (usemin) タスクを実行中 警告: サポートされていないパターン: foo

--force を使用して続行します。

grunt-usemin 2.0.2 の使用

foo/index.htmlbar/index.html2 つの単一ページ アプリケーションのメイン ページです。

ご協力いただきありがとうございます！

4

6 に答える 6

0

両方のプロジェクトを同じリポジトリと同じ Gruntfile の下に置く必要がありますか?

あなたは、それらが「2 つの単一ページ アプリケーションのメイン ページ」であると言いました。プロジェクトを 2 つの異なるプロジェクトに分割する余裕がある場合は、多少の負担を軽減できるでしょう。

または、両方のインデックスを共通のディレクトリの下にグループ化することもできます。これは、2 つの異なるインデックス ファイルで grunt-usemin を使用する方法です。

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']
于 2014-02-24T12:45:46.240 に答える
0

複数のターゲットは現在 usemin ではサポートされていませんが、新しいパターンを定義できます...

その間、次のようなものを使用して新しいターゲットを定義できます。

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"
        }
于 2014-03-03T16:01:55.467 に答える
0

回避策として (しばらくこれに苦労しました)、grunt ジョブ全体を 2 回実行することにし、ターゲット ファイルを別の値に切り替える grunt オプションを追加しました。エレガントではありませんが、シンプルです。

于 2015-03-11T20:01:40.543 に答える
0

useminを介して個別に処理したい、依存するcss/js/imgファイルが異なる複数のページ/テンプレートがある場合、同様のことを試みていました。単一の Gruntfile.js を使用し、マルチタスクを使用して、usemin で複数のターゲットと宛先を達成できます。これはあなたのグラントファイルになります：

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

タスクを登録すると、次のようにさまざまなターゲット/宛先構成をすべて実行できます。

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

または、作成した packageConfig から個別に実行します。

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

また、html コードの usemin ブロックを変更して、ルートからの相対パスを含める必要がありました。

<!-- build:js(./assets/dir/foo) scripts/vendor.js -->
<script src="scripts/file.js"></script>
<!-- endbuild -->
于 2015-07-02T15:23:21.913 に答える