GruntJS - गड़बड़ी के निर्माण के बाद गलत छवि पथ

Question

ग्रंट मेरे मिनीफाइड सीएसएस को गड़बड़ कर रहा है और मुझे पता नहीं लगा कि इसे क्यों और कैसे टालना है।

संक्षिप्त होने के लिए, minification इससे पहले कि मैं इस तरह की कुछ पृष्ठभूमि छवियों है:, तब

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

पूरी प्रक्रिया के बाद, मैं एक न्यूनतम किया गया सीएसएस है कि इस (स्निपेट) की तरह हो जाता है है:

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

उपर्युक्त पथ न केवल एक पूर्ण पथ है, लेकिन यह भी गलत है, क्योंकि छवियों को dist/images में पाया जा सकता है, .tmp/images में नहीं (जो भी मौजूद नहीं है ...)।

एक बहुत ही इसी तरह की समस्या यहां बताया गया है: yeoman#824
मुझे लगता है कि धागा (#17759188 और #29137057) से लेकिन कोई लाभ नहीं हुआ 2 समाधान की कोशिश की।

मैं भी Yeoman का माना जाता है कि समझौता संस्करण का उपयोग कर, के रूप में एक और स्टैक ओवरफ़्लो सवाल (Yeoman CSS image paths) पोस्ट में कहा गया है, अभी भी कोई सफलता के साथ करने की कोशिश की ...

हो सकता है कि किसी ने पहले ही इस मार्ग चला गया और एक समाधान पाया गया है कि मुझे इंटरनेट पर नहीं मिला है।

संपादित करें: मैं एक और विस्तार

छवि पथ एचटीएमएल partials अंदर प्रभावित नहीं हैं, इस तरह जोड़ सकते हैं:
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

है आपने Brunch का उपयोग करने पर विचार किया? वे यमन/ग्रंट की तुलना में सीएसएस न्यूनीकरण के लिए एक अलग नोड प्लगइन चलाते हैं। ब्रंच के साथ खनन के बाद मुझे अपने "../" सापेक्ष पथ बनाए रखने में कोई समस्या नहीं है। उनके Angular skeleton प्रयास करें, बस में अपने स्टाइलशीट ड्रॉप और साथ

brunch build --production

कम करें करने के लिए एक निर्माण चलाते हैं। देखें कि क्या आपके पास अभी भी यह संकलन समस्या है या नहीं। 5 मिनट में किया गया।

Answer 2

कुछ समय पहले, मैं cssmin के साथ एक समान मुद्दा ...

मेरे config था:

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

तो मैं निकाल दिया है root संपत्ति और यह समस्या हल हो।

UPD1:

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

UPD2: इसके अलावा, आप छवियों usemin के लिए configutarion में assetsDirs को जोड़ने की जरूरत है ng-src="./images/box_{{$index+1}}.png" साथ छवियों के बारे में, यह संभव नहीं उन्हें usemin क्योंकि के साथ सीधे कार्रवाई करने के लिए है इस अभिव्यक्ति में फ़ाइल संशोधन को संभालने का कोई तरीका नहीं है ...

लेकिन आप की तरह, छवि यूआरएल के साथ अलग से नक्शा जोड़ सकते हैं:

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

और 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'] 
     ] 
    } 
    } 
}, 

तब के बाद निर्माण आप की तरह कुछ मिल जाएगा:

<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

मेरे पास एक ही समस्या है, अंततः मैं grunt.filerev.summary का उपयोग कर रहा था और पैटर्न जेएस फ़ंक्शंस, जो पुराने आईएमजी यूआरएल को मिला और grunt.filerev.summary json "map" में मिलान करने वाले मामले के साथ इसे बदल दिया