helps - gulp-minify-css

Concatenar/reubicar archivos CSS con Gulp

Question

Estoy buscando una cadena de plugins para usar con Gulp que brinde:

• soporte de mapa fuente
• Menos
• minificación
• concatenación
• Reemplazo de URL (rebase) para abordar la reubicación / concat

Actualmente tengo los primeros cuatro, pero no puedo encontrar una combinación de complementos existentes que también me den el último (rebase de URL). No he encontrado ningún complemento de rebase de URL que emita mapas de origen.

Para que quede claro, mi problema es que cuando compilo varios archivos CSS pequeños de las carpetas de desarrollo de proyectos y los publico en una carpeta común, el movimiento resultante de la concatenación rompe las URL relativas, como las de las imágenes de fondo.

EDICIONES:

Parece que la cadena de herramientas que uso actualmente ya está destinada a resolver este problema. Entonces, esa es aparentemente la respuesta. Sin embargo, eso plantea otra pregunta, cómo se supone que funciona la sintaxis requerida.

Esa pregunta teóricamente tiene muchos duplicados:

• clean-css # 152: funcionalidad de rebase muy frustrante
• clean-css # 195: opción de root en Windows
• clean-css # 263: Cómo obtener la opción relativeTo trabajando con archivos CSS en diferentes rutas
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• Grunt cssmin rebasando un URI relativo?

Desafortunadamente, ninguna respuesta explica realmente la sintaxis, solo demuestran el vudú; así que no sé por qué lo siguiente no está funcionando. Si puedo resolverlo, volveré aquí y marcaré esto para indicar que esta cadena de herramientas realmente hace lo que necesito.

Los archivos fuente:

/assets
    /site
        styleInput1.less "url(../site/logo.png)"
        logo.png
        background.png
    /application
        styleInput2.less "url(../site/background.png)"

La tarea del trago:

gulp.task(filename, function () {
    return gulp.src(files)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCss({ relativeTo: ''./compiled'' }))
        .pipe(concat(filename))
        .pipe(sourcemaps.write(''.''))
        .pipe(gulp.dest(''./compiled''));
});

El resultado, con URL rotos. Tenga en cuenta los defectos múltiples. Aunque el CSS se eleva a un nivel de directorio relativo a los activos requeridos, se agregó un directorio padre adicional (!). Además, una de las URL ha cambiado un nombre de carpeta de activos (!). Muy extraño:

/compiled
    styleOutput1.css "url(../../compiled/logo.png)"
    styleOutput2.css "url(../../site/background.png)"

Mis disculpas por continuar con el vudú, pero aquí está mi tubo de trago :

.pipe(minifyCss({ relativeTo: ''./compiled'', target: ''./compiled'' }))

Y el resultado correcto:

/compiled
    styleOutput1.css "url(../assets/site/logo.png)"
    styleOutput2.css "url(../assets/site/background.png)"

Answer 1

Yo personalmente uso gulp-minify-css y especifico el atributo relativeTo .

gulp.task(''css'', function() {
    gulp.src(''./assets/css/main.css'')
// Here I specify the relative path to my files
      .pipe(minifyCSS({keepSpecialComments: 0, relativeTo: ''./assets/css/'', processImport: true}))
      .pipe(autoprefixer({
        browsers: [''last 2 versions''],
        cascade: false
      }))
      .pipe(gulp.dest(''./assets/css/dist/''))
      .pipe(notify({
          "title": "Should I Go?",
          "subtitle": "Gulp Process",
          "message": ''<%= file.relative %> was successfully minified!'',
          "sound": "Pop",
          "onLast": true
      }));
  });

Si eso no funciona para ti, tienen muchos otros parámetros para volver a establecer las URL: https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically

Notablemente:

• rebase : establezca en falso para omitir el rebase de URL
• relativeTo - ruta para resolver las reglas relativas de importación y las URL
• restructuring : establezca en falso para deshabilitar la reestructuración en optimizaciones avanzadas
• root - ruta para resolver reglas @import absolutas y URL relativas rebase