GruntJS - percorsi di immagine errati dopo la costruzione del grugnito

Question

Grunt sta messaggiando il mio minifrile CSS e non riesco a capire perché e come evitarlo.

Per essere breve, prima che la minimizzazione ho alcune immagini di sfondo come questo:

.head-image { 
    height: 380px; 
    background: url("../images/head1_bg.png") repeat-x; 
    -webkit-background-size: cover; 
    background-size: cover; 
} 

Poi, dopo l'intero processo, ho un CSS minified che va come questo (frammento):

[...]background:url(/home/domo/projects/lp/.tmp/images/head1_bg.png) repeat-x;background-size:cover}[...] 

Il percorso di cui sopra non solo è un percorso assoluto, ma è anche sbagliato, dal momento che le immagini possono essere trovate in dist/images, non in .tmp/images (che non esiste nemmeno ...).

Un problema molto simile è menzionato qui: yeoman#824
Ho provato 2 soluzioni da quel filo (#17759188 e #29137057) ma inutilmente.

Ho anche provato ad utilizzare la versione presumibilmente patchata di Yeoman, come affermato in un altro Stack Overflow questione (Yeoman CSS image paths) inviati, ancora senza successo ...

Forse qualcuno ha già percorso questa strada e ha trovato una soluzione che Non l'ho trovato su internet

Edit: posso aggiungere un altro dettaglio

percorso dell'immagine all'interno parziali HTML non sono interessati, in questo modo:
ng-src="./images/box_{{$index+1}}.png"

Gruntfile.js

// Generated on 2014-07-14 using generator-angular 0.8.0 
'use strict'; 

// # Globbing 
// for performance reasons we're only matching one level down: 
// 'test/spec/{,*/}*.js' 
// use this if you want to recursively match all subfolders: 
// 'test/spec/**/*.js' 

module.exports = function (grunt) { 

    // Load grunt tasks automatically 
    require('load-grunt-tasks')(grunt); 

    // Time how long tasks take. Can help when optimizing build times 
    require('time-grunt')(grunt); 

    // Define the configuration for all the tasks 
    grunt.initConfig({ 

    // Project settings 
    yeoman: { 
     // configurable paths 
     app: require('./bower.json').appPath || 'app', 
     dist: 'dist' 
    }, 

    // Watches files for changes and runs tasks based on the changed files 
    watch: { 
     bower: { 
     files: ['bower.json'], 
     tasks: ['bowerInstall'] 
     }, 
     js: { 
     files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 
     tasks: ['newer:jshint:all'], 
     options: { 
      livereload: true 
     } 
     }, 
     jsTest: { 
     files: ['test/spec/{,*/}*.js'], 
     tasks: ['newer:jshint:test', 'karma'] 
     }, 
     compass: { 
     files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
     tasks: ['compass:server', 'autoprefixer'] 
     }, 
     gruntfile: { 
     files: ['Gruntfile.js'] 
     }, 
     livereload: { 
     options: { 
      livereload: '<%= connect.options.livereload %>' 
     }, 
     files: [ 
      '<%= yeoman.app %>/{,*/}/{,*/}*.html', 
      '.tmp/styles/{,*/}*.css', 
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
     ] 
     } 
    }, 

    // The actual grunt server settings 
    connect: { 
     options: { 
     port: 9000, 
     // Change this to '0.0.0.0' to access the server from outside. 
     hostname: '0.0.0.0', 
     livereload: 35729 
     }, 
     livereload: { 
     options: { 
      open: true, 
      base: [ 
      '.tmp', 
      '<%= yeoman.app %>' 
      ] 
     } 
     }, 
     test: { 
     options: { 
      port: 9001, 
      base: [ 
      '.tmp', 
      'test', 
      '<%= yeoman.app %>' 
      ] 
     } 
     }, 
     dist: { 
     options: { 
      base: '<%= yeoman.dist %>' 
     } 
     } 
    }, 

    // Make sure code styles are up to par and there are no obvious mistakes 
    jshint: { 
     options: { 
     jshintrc: '.jshintrc', 
     reporter: require('jshint-stylish') 
     }, 
     all: [ 
     'Gruntfile.js', 
     '<%= yeoman.app %>/scripts/{,*/}*.js' 
     ], 
     test: { 
     options: { 
      jshintrc: 'test/.jshintrc' 
     }, 
     src: ['test/spec/{,*/}*.js'] 
     } 
    }, 

    // Empties folders to start fresh 
    clean: { 
     dist: { 
     files: [{ 
      dot: true, 
      src: [ 
      '.tmp', 
      '<%= yeoman.dist %>/*', 
      '!<%= yeoman.dist %>/.git*' 
      ] 
     }] 
     }, 
     server: '.tmp' 
    }, 

    // Add vendor prefixed styles 
    autoprefixer: { 
     options: { 
     browsers: ['last 1 version'] 
     }, 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '.tmp/styles/', 
      src: '{,*/}*.css', 
      dest: '.tmp/styles/' 
     }] 
     } 
    }, 

    // Automatically inject Bower components into the app 
    bowerInstall: { 
     app: { 
     src: ['<%= yeoman.app %>/index.html'], 
     ignorePath: '<%= yeoman.app %>/' 
     }, 
     sass: { 
     src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
     ignorePath: '<%= yeoman.app %>/bower_components/' 
     } 
    }, 

    // Compiles Sass to CSS and generates necessary files if requested 
    compass: { 
     options: { 
     sassDir: '<%= yeoman.app %>/styles', 
     cssDir: '.tmp/styles', 
     generatedImagesDir: '.tmp/images/generated', 
     imagesDir: '<%= yeoman.app %>/images', 
     javascriptsDir: '<%= yeoman.app %>/scripts', 
     fontsDir: '<%= yeoman.app %>/styles/fonts', 
     importPath: '<%= yeoman.app %>/bower_components', 
     httpImagesPath: '/images', 
     httpGeneratedImagesPath: '/images/generated', 
     httpFontsPath: '/styles/fonts', 
     relativeAssets: false, 
     assetCacheBuster: false, 
     raw: 'Sass::Script::Number.precision = 10\n' 
     }, 
     dist: { 
     options: { 
      generatedImagesDir: '<%= yeoman.dist %>/images/generated' 
     } 
     }, 
     server: { 
     options: { 
      debugInfo: true 
     } 
     } 
    }, 

    // Renames files for browser caching purposes 
    rev: { 
     dist: { 
     files: { 
      src: [ 
      '<%= yeoman.dist %>/scripts/{,*/}*.js', 
      '<%= yeoman.dist %>/styles/{,*/}*.css', 
      '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
      '<%= yeoman.dist %>/styles/fonts/*' 
      ] 
     } 
     } 
    }, 

    // Reads HTML for usemin blocks to enable smart builds that automatically 
    // concat, minify and revision files. Creates configurations in memory so 
    // additional tasks can operate on them 
    useminPrepare: { 
     html: '<%= yeoman.app %>/index.html', 
     options: { 
     dest: '<%= yeoman.dist %>', 
     flow: { 
      html: { 
      steps: { 
       js: ['concat', 'uglifyjs'], 
       css: ['cssmin'] 
      }, 
      post: {} 
      } 
     } 
     } 
    }, 

    // Performs rewrites based on rev and the useminPrepare configuration 
    usemin: { 
     html: ['<%= yeoman.dist %>/{,*/}*.html'], 
     css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
     options: { 
     assetsDirs: ['<%= yeoman.dist %>'] 
     } 
    }, 

    // The following *-min tasks produce minified files in the dist folder 
    cssmin: { 
     options: { 
     root: '<%= yeoman.app %>' 
     } 
    }, 

    imagemin: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '<%= yeoman.app %>/images', 
      src: '{,*/}*.{png,jpg,jpeg,gif}', 
      dest: '<%= yeoman.dist %>/images' 
     }] 
     } 
    }, 

    svgmin: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '<%= yeoman.app %>/images', 
      src: '{,*/}*.svg', 
      dest: '<%= yeoman.dist %>/images' 
     }] 
     } 
    }, 

    htmlmin: { 
     dist: { 
     options: { 
      collapseWhitespace: true, 
      collapseBooleanAttributes: true, 
      removeCommentsFromCDATA: true, 
      removeOptionalTags: true 
     }, 
     files: [{ 
      expand: true, 
      cwd: '<%= yeoman.dist %>', 
      src: ['*.html', 'views/{,*/}*.html'], 
      dest: '<%= yeoman.dist %>' 
     }] 
     } 
    }, 

    // ngmin tries to make the code safe for minification automatically by 
    // using the Angular long form for dependency injection. It doesn't work on 
    // things like resolve or inject so those have to be done manually. 
    ngmin: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '.tmp/concat/scripts', 
      src: '*.js', 
      dest: '.tmp/concat/scripts' 
     }] 
     } 
    }, 

    // Replace Google CDN references 
    cdnify: { 
     dist: { 
     html: ['<%= yeoman.dist %>/*.html'] 
     } 
    }, 

    // Copies remaining files to places other tasks can use 
    copy: { 
     dist: { 
     files: [{ 
      expand: true, 
      dot: true, 
      cwd: '<%= yeoman.app %>', 
      dest: '<%= yeoman.dist %>', 
      src: [ 
      '*.{ico,png,txt}', 
      '.htaccess', 
      '*.html', 
      'views/{,*/}*.html', 
      'images/{,*/}*.{webp}', 
      'fonts/*' 
      ] 
     }, { 
      expand: true, 
      cwd: '.tmp/images', 
      dest: '<%= yeoman.dist %>/images', 
      src: ['generated/*'] 
     }] 
     }, 
     styles: { 
     expand: true, 
     cwd: '<%= yeoman.app %>/styles', 
     dest: '.tmp/styles/', 
     src: '{,*/}*.css' 
     } 
    }, 

    // Run some tasks in parallel to speed up the build process 
    concurrent: { 
     server: [ 
     'compass:server' 
     ], 
     test: [ 
     'compass' 
     ], 
     dist: [ 
     'compass:dist', 
     'imagemin', 
     'svgmin' 
     ] 
    }, 

    // By default, your `index.html`'s <!-- Usemin block --> will take care of 
    // minification. These next options are pre-configured if you do not wish 
    // to use the Usemin blocks. 
    // cssmin: { 
    // dist: { 
    //  files: { 
    //  '<%= yeoman.dist %>/styles/main.css': [ 
    //   '.tmp/styles/{,*/}*.css', 
    //   '<%= yeoman.app %>/styles/{,*/}*.css' 
    //  ] 
    //  } 
    // } 
    // }, 
    // uglify: { 
    // dist: { 
    //  files: { 
    //  '<%= yeoman.dist %>/scripts/scripts.js': [ 
    //   '<%= yeoman.dist %>/scripts/scripts.js' 
    //  ] 
    //  } 
    // } 
    // }, 
    // concat: { 
    // dist: {} 
    // }, 

    // Test settings 
    karma: { 
     unit: { 
     configFile: 'karma.conf.js', 
     singleRun: true 
     } 
    } 
    }); 


    grunt.registerTask('serve', function (target) { 
    if (target === 'dist') { 
     return grunt.task.run(['build', 'connect:dist:keepalive']); 
    } 

    grunt.task.run([ 
     'clean:server', 
     'bowerInstall', 
     'concurrent:server', 
     'autoprefixer', 
     'connect:livereload', 
     'watch' 
    ]); 
    }); 

    grunt.registerTask('server', function (target) { 
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 
    grunt.task.run(['serve:' + target]); 
    }); 

    grunt.registerTask('test', [ 
    'clean:server', 
    'concurrent:test', 
    'autoprefixer', 
    'connect:test', 
    'karma' 
    ]); 

    grunt.registerTask('build', [ 
    'clean:dist', 
    'bowerInstall', 
    'useminPrepare', 
    'concurrent:dist', 
    'autoprefixer', 
    'concat', 
    'ngmin', 
    'copy:dist', 
    'cdnify', 
    'cssmin', 
    'uglify', 
    'rev', 
    'usemin', 
    'htmlmin' 
    ]); 

    grunt.registerTask('default', [ 
    'newer:jshint', 
    'test', 
    'build' 
    ]); 
}; 

Answer 1

Avere hai considerato l'utilizzo di Brunch? Eseguono un diverso plugin del nodo per la minifficazione CSS rispetto a Yeoman/Grunt. Non ho alcun problema a mantenere i miei percorsi "../" dopo aver minimizzato con il Brunch. Provate il loro Angular skeleton, basta semplicemente inserire il tuo foglio di stile in ed eseguire una build con

brunch build --production

a minify. Verifica se hai ancora questo problema di compilazione. Fatto in 5 minuti.

Answer 2

Qualche tempo fa, ho avuto un problema simile con cssmin ...

La mia configurazione è:

cssmin: { 
    options: { 
    root: '<%= yeoman.app %>' 
    } 
}, 

poi ho rimosso root proprietà ed ha risolto il problema.

UPD1: Inoltre è necessario aggiungere immagini assetsDirs in configutarion per usemin:

usemin: { 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    options: { 
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'] 
    } 
}, 

UPD2: A proposito di immagini con ng-src="./images/box_{{$index+1}}.png", non è possibile elaborare direttamente con usemin perché non c'è modo di gestire la revisione dei file in questa espressione ...

Ma è possibile aggiungere carta separato con gli URL di immagine, come:

<div ng-init="boxes=[ 
    {src:'images/box1.png'}, 
    {src:'images/box2.png'}, 
    {src:'images/box3.png'}]> 
    .... 
    <img ng-src={{boxes[$index].src}}/> 
    .... 
</div> 

ed elaborare quelle mappe con il modello aggiuntivo per usemin:

usemin: { 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    htmlExtra: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    options: { 
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'], 
    patterns:{ 
     htmlExtra:[ 
      [/['"]?src['"]?\s*:\s*['"]([^"']+)['"]/gm, 'Replacing urls in image maps'] 
     ] 
    } 
    } 
}, 

Poi, dopo costruire otterrete qualcosa di simile:

<div ng-init="boxes=[ 
     {src:'images/box1.xxxx.png'}, 
     {src:'images/box2.xxxx.png'}, 
     {src:'images/box3.xxxx.png'}]"> 
    .... 
    <img ng-src={{boxes[$index].src}}/> 
    .... 
</div> 

Answer 3

Ho avuto lo stesso problema, alla fine stavo usando il grunt.filerev.summary e il pattern js funziona, che ha trovato il vecchio img url e lo ha sostituito con il caso corrispondente nel grunt.filerev.summary json "map"