css - tutorial - install grunt windows




Grunt Build: CSS ne regarde pas dans le répertoire de l'image droite (2)

J'ai une application angulaire générée via yeoman.

Quand je lance une construction grunt, main.css cherche des fichiers dans le répertoire / assets / images, qui est ma structure de projet. Les emplacements des fichiers ne sont pas modifiés dans le CSS.

Ma structure de projet de répertoire dist :

  • dist /
    • bower_components /
    • images/
    • scripts
    • modes/
    • index.html

Le problème

main.css recherche / assets / images au lieu de / images. Je ne suis pas sûr du plugin qui cause cela.

Plus précisément, j'utilise une image de fond.

.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');
}

Voici mon 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"

}

Voici mes tâches de fichier grunt:

// 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
  }
}

Vous pouvez essayer de changer l'option de la boussole

httpImagesPath: '/images',

à

httpImagesPath: '../images',

imagesDir fait probablement le problème:

// 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',

Sachez que lorsque vous faites grunt regarder il utilise le répertoire .tmp probablement grunt build rend le catalogue dist. bdw. J'utilise gulp et libsass, ce qui est beaucoup plus rapide.





gruntfile