Grunt usemin et useminPrepare plusieurs cibles
D'après les usemin issues , il apparaît que usemin et useminPrepare prennent en charge plusieurs cibles dans la dernière version:
Soutenir plusieurs cibles dans useminPrepare:
soutien usemin:
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:
Exécution de la tâche "usemin: foo" (usemin) Avertissement: modèle non pris en charge: foo
Utilisez --force pour continuer.
Utiliser grunt-usemin 2.0.2
foo/index.html et bar/index.html étant les pages principales de 2 applications d'une page.
Merci de votre aide!
par défaut, usemin essaie de détecter le type d'analyseur (html, css) à partir du nom de la cible. Lorsque vous utilisez une cible dont le nom n'est pas un type d'analyseur valide, vous devez utiliser l'option type pour spécifier le type d'analyseur manuellement. cela donnera deux cibles pour chaque destination, une pour html et une 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 que les deux projets résident dans le même référentiel et le même Gruntfile?
Vous avez dit vous-même qu'il s'agissait de "pages principales pour 2 applications d'une seule page". Si vous pouvez vous permettre de le diviser en deux projets différents, vous épargnerez probablement un peu de peine.
Vous pouvez également 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']
Pour résoudre ce problème (nous avons eu du mal à le faire pendant un certain temps), nous avons décidé d'exécuter le travail de grognement complet deux fois et nous avons ajouté une option de grognement qui modifiait le fichier cible en une valeur différente. Pas élégant, mais simple.
J'essayais de faire quelque chose de similaire où j'avais plusieurs pages/modèles avec différents fichiers css/js/img dépendants que je voulais traiter séparément par nous. Vous pouvez utiliser un seul fichier Gruntfile.js et utiliser plusieurs tâches pour atteindre 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/destination avec:
grunt.registerTask('default', ['useminPrepareMulti']);
Ou exécutez-les individuellement à partir du packageConfig que vous avez créé:
grunt.registerTask('single', ['useminPrepareMulti:' + packageConfig[0]]);
J'ai également 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 -->
Je ne sais pas si cela aidera, mais j'ai réussi à faire ce que vous essayiez avec une combinaison de Grunt-Contrib-Min et de 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']);
};
Ce fichier Grunt prend mon répertoire App, le tout dans le dossier PRO avec quelques balises spéciales ajoutées, et tout le contenu AGAIN dans le dossier Lite, avec d'autres commutateurs définis.
Bien que plusieurs cibles ne soient pas actuellement prises en charge par usemin, elles vous permettent de définir de nouveaux modèles ...
En attendant, vous pouvez définir de nouvelles cibles 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"
}