Grunt usemin et useminpréparer plusieurs cibles
à Partir de la usemin questions, il apparaît que usemin et useminPrepare en charge plusieurs cibles dans la dernière version:
usemin prepare support:
usemin support:
j'ai essayé d'utiliser plusieurs cibles avec la configuration suivante:
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']
}
},
mais je reçois l'erreur suivante:
lancer "usemin:foo" (usemin) avertissement de tâche: motif non supporté: foo
Utilisation de --force pour continuer.
Utilisation de grunt-usemin 2.0.2
foo/index.html et bar/index.html > les pages principales pour les demandes de 2 pages simples.
merci de votre aide!
6 réponses
par défaut usemin essaie de détecter le type d'analyseur (html,css) à partir du nom cible. lorsque vous utilisez une cible dont le nom n'est pas un analyseur valide, Vous devez utiliser l'option type pour spécifier le type d'analyseur manuellement. cela entraîne deux cibles pour chaque destination, un pour html et un pour 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']}
}
}
avez-vous besoin des deux projets pour vivre sous le même dépôt et le même Gruntfile?
Vous avez dit vous-même que ce sont des "pages principales pour 2 applications d'une seule page". Si vous pouvez vous permettre de le diviser en deux projets différents, vous vous épargnerez probablement un peu de peine.
Vous pouvez aussi regrouper les deux index dans un répertoire commun. Voici comment j'utilise grunt-usemin avec deux fichiers d'index différents:
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']
Je ne suis pas sûr que cela puisse aider, mais j'ai réussi à faire ce que vous essayiez avec une combinaison de Grunt-Contrib-Min et Grunt-contra
'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']);
};
Ce fichier Grunt va prendre mon répertoire App, le sortir tout dans le dossier PRO avec quelques étiquettes spéciales ajoutées, et aussi tout sortir à nouveau dans le dossier Lite, avec d'autres commutateurs réglés.
bien que les cibles multiples ne soient pas supportées actuellement dans usemin, elles vous permettent de définir de nouveaux modèles...
Donc en attendant, vous pouvez définir de nouveaux objectifs en utilisant quelque chose comme:
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"
}
comme solution de contournement (nous avons eu du mal à le faire pendant un certain temps), nous avons décidé d'exécuter l'ensemble du travail grunt deux fois et ajouté une option grunt qui a modifié le fichier cible à une valeur différente. Pas très élégant, mais simple.
j'ai essayé de faire quelque chose de similaire où j'avais plusieurs pages/gabarits avec différents fichiers CSS/js/img dépendants que je voulais traiter séparément par usemin. Vous pouvez utiliser un seul Gruntfile.js et utiliser un multitâche pour accomplir plusieurs cibles et destinations avec usemin. Ce serait votre 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');
});
avec les tâches enregistrées, vous pouvez exécuter toutes les différentes configurations cible/dest avec:
grunt.registerTask('default', ['useminPrepareMulti']);
exécuter individuellement Ou du packageConfig vous avez créé:
grunt.registerTask('single', ['useminPrepareMulti:' + packageConfig[0]]);
j'ai aussi dû modifier les blocs usemin dans le code html pour inclure le chemin relatif à la racine, par exemple:
<!-- build:js(./assets/dir/foo) scripts/vendor.js -->
<script src="scripts/file.js"></script>
<!-- endbuild -->