relative path - Cómo reescribir las URL de las imágenes en los archivos CSS del proveedor utilizando Grunt

relative-path gruntjs

Question

Estoy tratando de mover las dependencias del frontend del sistema de control de versiones. Una combinación de Bower.io y Grunt debería poder hacer esto.

Sin embargo, ocurre un problema que aún no puedo resolver con la agrupación de bibliotecas de varios proveedores. Por ejemplo, supongamos que tengo la siguiente estructura de directorios donde el directorio de componentes es el directorio en el que Bower.io guarda las dependencias en:

├── assets
└── components
    ├── bootstrap
    │   ├── img
    │   │   └── glyhs.gif
    │   └── less
    │       └── bootstrap.css
    └── jquery-ui
        ├── css
        │   └── style.css
        └── images
            ├── next.gif
            └── prev.gif

Ahora, supongamos que quiero agrupar style.css y bootstrap.css de jQuery. Guardaré este archivo empaquetado en asset / bundled.css .

Sin embargo, en este archivo las referencias a las imágenes originales (../images/next.gif y ../img/glyhs.gif) son incorrectas. Deberán reescribirse para que funcionen (así que ../images/next.gif => ../components/jquery-ui/images/next.gif). Creo que (d) esta reescritura de URL es algo que Grunt debería poder hacer. Pero parece que no consigo que esto funcione con las tareas cssmin / less / copy . Por ejemplo, la siguiente configuración de Grunt (solo mover 1 archivo) no funciona:

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(''package.json''),
        less: {
            options: {
                compile: false,
                relativeUrls: true
            },
            bootstrap: {
                src: ''components/bootstrap/less/bootstrap.less'',
                dest: ''assets/bootstrap.css''
            }
        }
    });
    grunt.loadNpmTasks(''grunt-contrib-less'');
    grunt.registerTask(''dist-css'', [''less'']);
};

Ya sea:

• ¿He mal configurado Grunt o hecho algo mal?

• O el flujo de trabajo que estoy describiendo simplemente no es el correcto y debo usar otro en su lugar.

¡Gracias!

Answer 1

Probablemente desee echar un vistazo a este paquete gruñido https://github.com/Ideame/grunt-css-urls . Este paquete parece estar destinado a resolver exactamente su problema.

Edición: después de ver este complemento, no me gustó la idea de volver a escribir mi marca para que el proceso de compilación sea más sencillo. Así que terminé escribiendo mi propia función diminuta que hace la reescritura para mí.

Utilizo el complemento concat de grunt para empaquetar mis archivos css. Lo bueno de este complemento es que soporta la función de procesamiento de archivos antes de la concatenación. Ahora mi archivo se ve así:

grunt.initConfig({
concat: {
    options: {
    separator: ''/n'',
    process: function (src, filepath) {
        var cssPatt = new RegExp(''app(//.*//).*/.css$'');

        //filter out everithing except css files
        var file = cssPatt.exec(filepath);

        if (file) {
            var urlPatt = /url/(/'(.*)/'/)/g;

        console.log(''In file: '' + filepath);

        //replace every url(...) with its absolute path
        return src.replace(urlPatt, function (match, p1) {
            console.log('' * '' + match + '' -> '' + ''url(/''' + file[1] + p1 + ''/')'');
            return ''url(/''' + file[1] + p1 + ''/')'';
        });
        }

        return src;
    }
    },
}

Answer 2

Querrá hacer una búsqueda / reemplazo en su archivo dist css para generar las rutas relativas correctas. Hay una serie de complementos de gruñido que pueden hacer esto por usted, personalmente prefiero grunt-replace . Configure sus activos no comprimidos con variables y luego produzca un dist css con las URL generadas dinámicamente. Entonces:

body {
    background:url(@@IMG_PATH/background.jpg);
}

Se convierte esto en dist:

body {
    background:url(path/to/background.jpg);
}

Espero que esto ayude.

Answer 3

Solo como referencia: ahora hay una solución disponible. Publiqué este mismo problema en el plugin Grunt de CleanCss, lo aceptaron y publicaron este comportamiento en su nueva versión 1.1.

Puede encontrar el problema en el rastreador de GitHub aquí: https://github.com/GoalSmashers/clean-css/issues/129

Esta biblioteca permite utilizar la reescritura absoluta (desde un directorio raíz) o alterar las rutas de imagen relativas en función de un nuevo directorio de salida. Busque las directivas --root o --ouput .

Gracias por los consejos y respuestas a la gente!