Le chemin de l'image de fond ne fonctionne pas dans le fichier css en utilisant gulp js

Question

Je travaille sur un projet où je concatène tous les fichiers, les réduisant et les renommant en gulp.

Lorsque j'écris un chemin d'image en tant qu'image d'arrière-plan dans mon fichier css principal, il ne fonctionne pas dans le fichier réduit. En fait, je suis incapable de définir le chemin de l'image car il est compilé dans mon fichier minifié qui se trouve dans un autre répertoire.

Mon flux route fichier

assets --> 
      --css 
      --main.css 
      --img 

    dist --> 
      --css 
      --all-styles-min.css 

    gulpfile.js 

J'ai mis un fichier image dans l'actif/dossier img et je appeler ce fichier dans mon main.css

Mon gulp.js

return gulp.src([ 
     'assets/css/animate.min.css', 
     'assets/css/bootstrap.css', 
     'assets/css/vendor/bootstrap-select.min.css', 
     'assets/css/vendor/bootstrap-datepicker3.min.css', 
     'assets/css/vendor/jquery.timepicker.css', 
     'assets/css/default.css', 
      'assets/css/main.css', 
      'assets/css/responsive.css', 
     ]) 
     .pipe(concat('all_styles.css')) 
     .pipe(cleanCSS({compatibility: 'ie8'})) 
     .pipe(autoprefixer({ 
     browsers: ['last 2 versions'], 
     cascade: false 
     })) 
     .pipe(rename('all_styles.min.css')) 
     .pipe(gulp.dest('dist/css')) 
}); 

et dans mon main.css

.black-bg{ 
    background:url('../img/black-multiply-bg.png') 0 0 repeat; 
} 

Je vois cette erreur de la console pour le fichier image not found

http://localhost/projects/P-09-sakha/html/dist/css/assets/img/black-multiply-bg.png 404 (Not Found) 

La source montre le dossier dist. J'ai également vérifié avec gulp-css-url-adjuster mais suis toujours incapable de le faire fonctionner.

Answer 1

J'ai résolu le problème de css-url-adjuster aujourd'hui tout en travaillant pour un autre projet.

Ce que j'ai trouvé le format du codage n'était pas correct pour moi avant. Donc, je partage dans l'espoir que quelqu'un peut trouver utile de cela.

Pour cela, j'ai utilisé 4 plugins Gulp. 1. gulp-propre-css 2. gulp-cssmin 3. gulp-renomme 4. gulp-css-url-régleur

et le code est:

gulp.task('css', function(){ 
return gulp.src([ 
'../html/assets/css/main.css', 
    ]) 

/** 
* 
* Note 
* To Use minify and fixing the image path, you have 
* to use both gulp-clean-css & gulp-cssmin & gulp-css-url-adjuster 
* and the format must follow the below code 
* else you will get error 
*/ 

.pipe(concat('apps.css')) 
.pipe(gulp.dest('../html/assets/css')) 
.pipe(cleanCSS({compatibility: 'ie8'})) 
.pipe(urlAdjuster({ 
     prepend: '../img/', 
     })) 
.pipe(cssmin()) 
.pipe(rename({suffix:'.min'})) 
.pipe(gulp.dest('../html/assets/css')) 
}); 

Answer 2

J'ai seulement eu de l'expérience avec Grunt, pas Gulp malheureusement. Mais comme j'ai déjà rencontré quelque chose de similaire dans le passé, je vais vous dire ce que j'ai fait.

J'ai utilisé la fonctionnalité replace pour appliquer une regex en remplaçant les "mauvaises" URL par les bonnes.

Dans mon cas: replace: [{files: 'index.html', regex: /\.\.\/dist\/css/g, replacement: 'css'}], en remplaçant tous ../dist/css par css dans le fichier index.html. Par exemple, deviendra <link href="css/style.css" />. Je suis sûr que Gulp a quelque chose de similaire.