Grunt Build: CSS nicht im rechten Bildverzeichnis suchen

Question

Ich habe eine eckige Anwendung über Yeoman generiert.

Wenn ich grunt build starte, sucht main.css nach Dateien im Verzeichnis/assets/images, was meiner Projektstruktur entspricht. Die Dateispeicherorte werden in CSS nicht geändert.

Mein dist Verzeichnis Projektstruktur:

• dist/
  • bower_components/
  • images/
  • Skripte
  • styles/
  • index.html

Das Problem

main.css sucht/assets/images statt/Bilder. Ich bin mir nicht sicher, welches Plugin das verursacht.

Insbesondere verwende ich Hintergrundbild.

.landing-container { 
    background-image: 
     linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 52%,rgba(0,0,0,1) 100%), 
     url('/assets/images/bg_landing.jpg'); 
} 

Hier ist meine package.json:

"devDependencies": { 
    "grunt": "^0.4.5", 
    "grunt-autoprefixer": "^2.0.0", 
    "grunt-concurrent": "^1.0.0", 
    "grunt-contrib-clean": "^0.6.0", 
    "grunt-contrib-compass": "^1.0.0", 
    "grunt-contrib-concat": "^0.5.0", 
    "grunt-contrib-connect": "^0.9.0", 
    "grunt-contrib-copy": "^0.7.0", 
    "grunt-contrib-cssmin": "^0.12.0", 
    "grunt-contrib-htmlmin": "^0.4.0", 
    "grunt-contrib-imagemin": "^1.0.0", 
    "grunt-contrib-jshint": "^0.11.0", 
    "grunt-contrib-uglify": "^0.7.0", 
    "grunt-contrib-watch": "^0.6.1", 
    "grunt-filerev": "^2.1.2", 
    "grunt-google-cdn": "^0.4.3", 
    "grunt-karma": "*", 
    "grunt-newer": "^1.1.0", 
    "grunt-ng-annotate": "^0.9.2", 
    "grunt-svgmin": "^2.0.0", 
    "grunt-usemin": "^3.0.0", 
    "grunt-wiredep": "^2.0.0", 
    "jshint-stylish": "^1.0.0", 
    "karma-jasmine": "*", 
    "karma-phantomjs-launcher": "*", 
    "load-grunt-tasks": "^3.1.0", 
    "time-grunt": "^1.0.0" 

}

Hier sind meine Grunzen Datei Aufgaben:

// 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'] 
    }, 
    server: { 
    options: { 
     map: true, 
    }, 
    files: [{ 
     expand: true, 
     cwd: '.tmp/styles/', 
     src: '{,*/}*.css', 
     dest: '.tmp/styles/' 
    }] 
    }, 
    dist: { 
    files: [{ 
     expand: true, 
     cwd: '.tmp/styles/', 
     src: '{,*/}*.css', 
     dest: '.tmp/styles/' 
    }] 
    } 
}, 

// Automatically inject Bower components into the app 
wiredep: { 
    app: { 
    src: ['<%= yeoman.app %>/index.html'], 
    ignorePath: /\.\.\// 
    }, 
    test: { 
    devDependencies: true, 
    src: '<%= karma.unit.configFile %>', 
    ignorePath: /\.\.\//, 
    fileTypes:{ 
     js: { 
     block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi, 
      detect: { 
      js: /'(.*\.js)'/gi 
      }, 
      replace: { 
      js: '\'{{filePath}}\',' 
      } 
     } 
     } 
    }, 
    sass: { 
    src: ['<%= yeoman.app %>/assets/styles/{,*/}*.{scss,sass}'], 
    ignorePath: /(\.\.\/){1,2}bower_components\// 
    } 
}, 

// Compiles Sass to CSS and generates necessary files if requested 
compass: { 
    options: { 
    sassDir: '<%= yeoman.app %>/assets/styles', 
    cssDir: '.tmp/styles', 
    generatedImagesDir: '.tmp/images/generated', 
    imagesDir: '<%= yeoman.app %>/assets/images', 
    javascriptsDir: '<%= yeoman.app %>/scripts', // ???? 
    fontsDir: '<%= yeoman.app %>/styles/fonts', 
    importPath: './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: { 
     sourcemap: true 
    } 
    } 
}, 

// Renames files for browser caching purposes 
filerev: { 
    dist: { 
    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 filerev and the useminPrepare configuration 
usemin: { 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    options: { 
    assetsDirs: [ 
     '<%= yeoman.dist %>', 
     '<%= yeoman.dist %>/styles', 
     '<%= yeoman.dist %>/scripts', 
     '<%= yeoman.dist %>/images' 
    ] 
    } 
}, 

// The following *-min tasks will produce minified files in the dist folder 
// 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' 
//  ] 
//  } 
// } 
// }, 
uglify: { 
    dist: { 
    files: { 
     '<%= yeoman.dist %>/scripts/scripts.js': [ 
     '<%= yeoman.dist %>/scripts/scripts.js' 
     ] 
    } 
    } 
}, 
// concat: { 
// dist: {} 
// }, 

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

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

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

// ng-annotate tries to make the code safe for minification automatically 
// by using the Angular long form for dependency injection. 
ngAnnotate: { 
    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', 
     'scripts/**/*.html', 
     'assets/images/{,*/}*.{webp}', 
     'assets/styles/fonts/{,*/}*.*' 
     ] 
    }, { 
     expand: true, 
     cwd: '.tmp/images', 
     dest: '<%= yeoman.dist %>/images', 
     src: ['generated/*'] 
    }, { 
     expand: true, 
     cwd: '.', 
     src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*', 
     dest: '<%= yeoman.dist %>' 
    }] 
    }, 
    styles: { 
    expand: true, 
    cwd: '<%= yeoman.app %>/assets/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', // Good - I think 
    'imagemin', // Good 
    'svgmin' // Good 
    ] 
}, 

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

Answer 1

Sie können versuchen,

Kompass Option zu ändern

httpImagesPath: '/images', 

zu

httpImagesPath: '../images', 

Answer 2

imagesDir wohl die Frage stellen:

// Compiles Sass to CSS and generates necessary files if requested 
compass: { 
    options: { 
    sassDir: '<%= yeoman.app %>/assets/styles', 
    cssDir: '.tmp/styles', 
    generatedImagesDir: '.tmp/images/generated', 
    imagesDir: '<%= yeoman.app %>/assets/images', 

bewusst sein, dass, wenn Sie grunzen machen sehen tmp verwendet Verzeichnis wahrscheinlich Grunzen Build macht den dist Katalog. bdw. Ich benutze gulp und libsass, was viel schneller ist.

Answer 3

müssen Sie das Muster geben für die references ändern.

options: { 
    assetsDirs: [ 
     '<%= yeoman.dist %>', 
     '<%= yeoman.dist %>/images', 
     '<%= yeoman.dist %>/styles' 
    ], 
    patterns: { 
     js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']] 
    } 
    }