gulp jsを使用してCSSファイルで背景画像パスが機能しない

Question

私はすべてのファイルを連結し、gulpで名前を変更して名前を変更するプロジェクトに取り組んでいます。

私のメインCSSファイルに画像パスを背景画像として書き込むと、そのファイルは縮小されたファイルでは機能しません。実際には、別のディレクトリにある私の縮小されたファイルでコンパイルされているイメージパスを設定することができません。

マイファイルのルートは、私は、資産/ IMGフォルダ内の画像ファイルを入れていると私のmain.css内でそのファイルを呼び出しています

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

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

    gulpfile.js 

流れ

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

と私の中でmain.css

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

は、私は、画像ファイルのため、このコンソールのエラーが見つからない

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

を見ていたソースは、distのフォルダを示しています。私もgulp-css-url-adjusterでチェックしましたが、それでも動作させることはできません。

Answer 1

今日私は別のプロジェクトで働いている間にcss-url-adjusterの問題を解決しました。

コーディングのフォーマットが私には間違っていました。だから私は誰かがこれから助けてくれることを願って共有している。

私は4つのGulpプラグインを使用しています。 1.一息-クリーンCSS 2.一気-cssmin 3. 4.一気-CSS-URL-調整

とコードを一口、名前の変更は次のとおりです。

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

私は残念なことにグルントではなく、グランと経験を積んでいます。 しかし、私は過去に似たようなものにぶつかったので、私がしたことを教えてくれるでしょう。

replaceの機能を使用して、正規表現に「間違った」URLを置き換えて正規表現を適用しました。

私の場合、replace: [{files: 'index.html', regex: /\.\.\/dist\/css/g, replacement: 'css'}]は、ファイルのcssのすべてを../dist/cssに置き換えます。たとえば、は<link href="css/style.css" />になります。

Gulpには似たようなものがあります。