gulp js를 사용하는 CSS 파일에서 배경 이미지 경로가 작동하지 않습니다.

Question

모든 파일을 연결하여 꿀꺽 꿀꺽 거리며 이름을 바꾸는 프로젝트에서 작업하고 있습니다.

내 주 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 개의 꿀풀 플러그인을 사용했다. 꿀꺽 - cssmin이 3. 4. 꿀꺽-CSS-URL-조정

하고 코드를 꿀꺽-이름을 변경 2. 1. 꿀꺽 - 클린 CSS는 다음과 같습니다

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에 대한 '잘못된'URL을 대체하는 정규식을 적용했습니다.

내 경우 : replace: [{files: 'index.html', regex: /\.\.\/dist\/css/g, replacement: 'css'}], 파일의 css의 경우 모두 ../dist/css으로 바꿉니다. 예를 들어 은 <link href="css/style.css" />이됩니다.

나는 꿀꺽 꿀꺽 비슷한 것이라고 확신한다.