javascript - the - Grunt usemin y useminPrepare objetivos múltiples
install npm grunt (6)
¿Necesita ambos proyectos para vivir bajo el mismo repositorio y el mismo Gruntfile?
Usted dijo que son "páginas principales para 2 aplicaciones de una sola página". Si puede permitirse dividirlo en dos proyectos diferentes, probablemente se ahorrará algo de dolor.
Alternativamente, puede agrupar ambos índices bajo un directorio común. Así es como utilizo grunt-usemin con dos archivos de índice diferentes:
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'']
A partir de los problemas de usemin, parece que usemin y useminPrepare admiten múltiples objetivos en la última versión:
soporte de useminPrepare:
soporte de usemin:
Intenté usar múltiples objetivos con la siguiente configuración:
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'']
}
},
pero recibo el siguiente error:
Ejecución de la tarea "usemin: foo" (usemin) Advertencia: Patrón no admitido: foo
Use --force para continuar.
Usando grunt-usemin 2.0.2
foo/index.html y bar/index.html son las páginas principales para 2 aplicaciones de una sola página.
¡Gracias por tu ayuda!
Como una solución alternativa (luchó con esto por un tiempo), decidimos ejecutar todo el trabajo gruñido dos veces y agregamos una opción ronco que alteró el archivo objetivo a un valor diferente. No es elegante, sino simple.
Intentaba hacer algo similar cuando tenía varias páginas / plantillas con diferentes archivos dependientes css / js / img que quería procesar por separado a través de usemin. Puede usar un solo Gruntfile.js y usar una multitarea para lograr objetivos y destinos múltiples con usemin. Este sería tu 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'');
});
Con las tareas registradas, puede ejecutar todas las diferentes configuraciones de destino / destino con:
grunt.registerTask(''default'', [''useminPrepareMulti'']);
O ejecútelos individualmente desde el paqueteConfig que creó:
grunt.registerTask(''single'', [''useminPrepareMulti:'' + packageConfig[0]]);
También tuve que modificar los bloques usemin en el código html para incluir la ruta relativa a la raíz, por ejemplo:
<!-- build:js(./assets/dir/foo) scripts/vendor.js -->
<script src="scripts/file.js"></script>
<!-- endbuild -->
No estoy seguro si esto ayudará, pero pude lograr lo que estaba intentando con una combinación de Grunt-Contrib-Min y 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'']);
};
Este Grunt File tomará mi directorio de aplicaciones, lo mostrará todo en la carpeta PRO con algunas etiquetas especiales agregadas, y también producirá todo nuevamente en la carpeta Lite, con otros switches configurados.
Si bien los objetivos múltiples no se admiten actualmente en usemin, sí permiten definir nuevos patrones ...
Mientras tanto, puedes definir nuevos objetivos usando algo como:
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"
}
de manera predeterminada, usemin intenta detectar el tipo de analizador (html, css) del nombre de destino. cuando está utilizando un objetivo que su nombre no es un tipo de analizador válido, debe usar la opción de tipo para especificar el tipo de analizador de forma manual. esto dará como resultado dos objetivos para cada destino, uno para html y otro para 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'']}
}
}