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




yeoman grunt-usemin (2)

ग्रुंट मेरे मिनिएज्ड सीएसएस को गड़बड़ कर रहा है और मैं समझ नहीं पा रहा हूं कि इसे और कैसे बचाना चाहिए।

संक्षिप्त होने के लिए, 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 में नहीं (जो भी मौजूद नहीं है ...)।

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

मैंने एक और स्टैक ओवरफ्लो प्रश्न ( यौमन सीएसएस इमेजेस राइट्स ) के पोस्ट में कहा, यमक के अनुमानित पैच संस्करण का उपयोग करने की कोशिश की, फिर भी कोई सफलता नहीं मिली ...

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

संपादित करें: मैं एक और विस्तार जोड़ सकता हूँ

HTML पथ के अंदर छवि पथ प्रभावित नहीं होता है, इस तरह से:
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'
  ]);
};

कुछ समय पहले, मुझे सीएसएसमीन के साथ एक समान समस्या थी ...

मेरा कॉन्फ़िग था:

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: ng-src="./images/box_{{$index+1}}.png" Images / box_ ng-src="./images/box_{{$index+1}}.png" छवियों के बारे में, ये सीधे यूज़मन के साथ संसाधित करना संभव नहीं है क्योंकि इस अभिव्यक्ति में फ़ाइल संशोधन को संभालने का कोई तरीका नहीं है ..

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

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

और उन मैप्स को यूज़िन के लिए अतिरिक्त पैटर्न के साथ संसाधित करें:

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>

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

brunch build --production

को छोटा करना देखें कि क्या आपके पास अभी भी इस संकलन समस्या है। 5 मिनट में किया गया





grunt-usemin