¿Cómo reescribir la url relativa en CSS minificado con cssmin?

gruntjs minify

Question

He estado buscando una solución a mi problema y he encontrado publicaciones con problemas similares, pero no es lo mismo. Tengo la siguiente estructura de carpetas:

js
└── GUIFramework
├── external
└── WaspFramework
├── Core
└── GUI
└── Controls
└── WaspMask
├── css
│ └── WaspMask.css
└── resources
└── default_loader_circle.gif

Dentro del archivo WaspMask.css tengo esta regla:

.wasp-loader-default {background-image: url ("../ resources / default_loader_circle.gif"); }

Bueno, he intentado minificarlo (combinado con otros archivos css) con el complemento cssmin . Mi gruntfile se coloca en la carpeta WaspFramework , y quiero generar el css minificado allí. El archivo gruntfile se ve así:

module.exports = function (grunt) {
var _sources = grunt.file.readJSON(''./sources.json'');
var _filesCSS = _sources.css;
grunt.initConfig({
cssmin: {
wasp: {
options: {
keepSpecialComments: 0
},
files: {
''wasp-bundle.min.css'': _filesCSS
}
}
}
});
// load plugins
grunt.loadNpmTasks(''grunt-contrib-cssmin'');
// register at least this one task
grunt.registerTask(''default'', [''cssmin'']);
};

En _filesCSS tengo las rutas de todos los archivos para minimizar y combinar, WaspMask.css incluido.

Mi problema es que con esta configuración de cssmin , la url de la clase wasp-loader-default no ha cambiado, así que, obviamente, el archivo de salida no puede encontrar la imagen. Intenté cambiar las opciones de cssmin , agregando la propiedad root :

options: {
keepSpecialComments: 0,
root: ''.'',
},

Cambia la URL a /GUI/Controls/WaspMask/resources/default_loader_circle.gif , pero no funciona debido a la primera barra de la ruta. Necesitaría obtener una ruta relativa al archivo de salida ( GUI/Controls/WaspMask/resources/default_loader_circle.gif debería funcionar) porque mi aplicación se publica bajo un directorio virtual. Entonces no puedo usar una ruta completa desde la raíz de la aplicación. Incluso he intentado establecer otros valores para root pero algunos cambian la URL a una ruta completa y otros agregan la primera barra inclinada a la ruta devuelta.

Alguna idea sobre como resolver esto?

Answer 1

Después de buscar una solución a mi problema, encontré la propiedad que necesito en este tema del complemento ''cssmin'' : https://github.com/gruntjs/grunt-contrib-cssmin/pull/47

Aunque encontré un pequeño problema mientras comprimía el archivo ''bootstrap.css'' en el archivo del paquete de mi proveedor. Este problema y una posible solución (básicamente, establecer la propiedad "noAdvanced" en las opciones de la tarea) se explican en profundidad en la publicación que hice ayer: https://github.com/gruntjs/grunt-contrib-cssmin/issues/103

EDITAR: Aquí está mi archivo gruñido:

module.exports = function (grunt) {
var conf = grunt.file.readJSON(''sources.json'');
grunt.initConfig({
cssmin: {
options: {
keepSpecialComments: 0,
target: ''commonDir'',
noAdvanced: true
},
test: {
files: {
''test.min.css'': conf.css
}
}
}
});
// load plugins
grunt.loadNpmTasks(''grunt-contrib-cssmin'');
// register at least this one task
grunt.registerTask(''default'', [''cssmin'']);
};

La propiedad de target es el directorio físico común a todos los archivos para minificar (cargo esos archivos a través de un archivo json que contiene sus rutas de acceso).

noAdvanced propiedad noAdvanced es la opción que uso para evitar el problema que he explicado con bootstrap.css , aunque en el último comentario de @XhmikosR publicado en https://github.com/gruntjs/grunt-contrib-cssmin/issues/103 , él dice que hay un parche para arreglarlo. No lo he comprobado todavía