gruntjs - Grunt cssmin/CleanCSS mapa fuente rebasing

source-maps gruntfile

Question

Estoy usando cssmin con la siguiente estructura de carpeta "Contenido":

src
|--dir1
| |--style1.css
| |--images
| |--image1.png
|--dir2
|--style2.css
|--images
|--image2.png
dist
|--styles.min.css
|--styles.min.css.map

Donde styles.min.css y styles.min.css.map son el resultado de concatenar / minificar todas las hojas de estilo en la carpeta "src".

La primera vez que tuve problemas fue que styles.min.css contenía URL para las imágenes en lugares incorrectos (es decir, "images / image1.png" en lugar de "../src/dir1/images/image1.png") pero, afortunadamente, esta configuración gruñona se solucionó ese:

cssmin: {
options: {
rebase: true,
sourceMap: true
},
all: {
options: {
keepSpecialComments: 0
},
files: {
''content/dist/styles.min.css'': ["content/src/dir1/style1.css", "content/src/dir2/style2.css"]
}
}
}

El nuevo problema: el mapa fuente generado ("styles.min.css.map") contiene fuentes como esta: ["content / src / dir1 / style1.css", "content / src / dir2 / style2.css"] en lugar de ["../src/dir1/style1.css", "../src/dir2/style2.css"]. Esto significa que el mapa apunta a ubicaciones incorrectas, como:

"content / dist / content / src / dir1 / style1.css" y "content / dist / content / src / dir2 / style2.css"

¿Qué puedo hacer para resolver esto?

Como referencia, también probé el csswring, sin embargo, a pesar de que los mapas de origen funcionaban bien, encontré que la imagen general / import url rebasing no funcionaba correctamente, así que volví a cssmin.

¡Muchas gracias!

Answer 1

Caí con mi propia solución. Escribí una tarea que lee el mapa fuente JSON, obtiene la matriz de fuentes, las rebases, luego escribe el archivo nuevamente. Esta solución parece funcionar bien para mí, con suerte también puede ayudar a alguien más si se encuentran en una situación similar. Simplemente ejecute su tarea cssmin y luego esta:

grunt.registerTask("rebase-css-sourcemap-sources", "Rebases the CSS source map urls", function() {
var filePath = "./content/dist/styles.min.css.map";
if (grunt.file.exists(filePath)) {
var sourceMap = grunt.file.readJSON(filePath);
var sources = sourceMap.sources;
if (sources) {
for (var i = 0; i < sources.length; i++) {
sources[i] = sources[i].replace("content/src", "../src");
}
grunt.file.write(filePath, JSON.stringify(sourceMap));
grunt.log.ok("Rebased CSS source map source urls.");
}
} else {
grunt.log.error("Source map file does not exist: " + filePath);
}
});

Si bien esta solución funciona para mí, si alguien sabe de un método alternativo para resolver este problema que, idealmente, solo usa cssmin, sería mejor.