Grunt useminおよびuseminPrepare複数のターゲット
semin issues から、useminおよびuseminPrepareが最新バージョンの複数のターゲットをサポートしているようです：
UseminPrepareで複数のターゲットをサポート：
useminサポート：
次の構成で複数のターゲットを使用してみました。
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.htmlおよびbar/index.htmlは、2つのシングルページアプリケーションのメインページです。
ご協力いただきありがとうございます！
デフォルトでは、useminはターゲット名からパーサータイプ（html、css）を検出しようとします。名前が有効なパーサータイプではないターゲットを使用している場合は、typeオプションを使用してパーサータイプを手動で指定する必要があります。これにより、destごとに2つのターゲットが作成されます。1つはhtml用、もう1つは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']}
}
}
同じリポジトリと同じ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']
回避策として（しばらくの間これに苦労しました）、私たちは全体のgruntジョブを実行することを決定し、ターゲットファイルを別の値に切り替えるgruntオプションを追加しました。エレガントではありませんが、シンプルです。
私は、useminを介して個別に処理したい、依存するcss/js/imgファイルが異なる複数のページ/テンプレートがある場合に、同様のことを試みました。単一のGruntfile.jsを使用し、マルチタスクを使用して、useminで複数のターゲットと宛先を達成できます。これはあなたの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');
});
タスクを登録すると、次のコマンドを使用して、さまざまなターゲット/宛先構成をすべて実行できます。
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 -->
これが役立つかどうかはわかりませんが、Grunt-Contrib-Minと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']);
};
このGruntファイルは、私のAppディレクトリを取得し、いくつかの特別なタグを追加してすべてをPROフォルダーに出力します。また、他のスイッチを設定して、すべてを再びLiteフォルダーに出力します。
複数のターゲットは現在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"
}