Путь к фоновому изображению не работает в файле css с использованием gulp js

Я работаю над проектом, в котором я объединяю все файлы, уменьшаю и переименовываю их с помощью gulp.

Когда я пишу путь к изображению в качестве фонового изображения в моем основном файле css, он не работает в уменьшенном файле. На самом деле я не могу установить путь к изображению, поскольку он компилируется в моем миниатюрном файле, который находится в другом каталоге.

Мой поток маршрута файла

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

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

   gulpfile.js

Я поместил файл изображения в папку assets / img и вызываю этот файл в моем main.css

My 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, но все еще не в состоянии заставить его работать.


javascript css gulp gulp-concat
person Amitabha Ghosh    schedule 02.07.2016    source источник
comment
Возможно, вы захотите добавить, как вы настроили gulp-css-url-adjuster, чтобы получить лучшую обратную связь.   -  person BillyNate    schedule 02.07.2016

Ответы (2)


arrow_upward
0
arrow_downward

У меня был лишь некоторый опыт работы с Grunt, к сожалению, не с Gulp. Но поскольку я сталкивался с чем-то похожим в прошлом, я расскажу вам, что я сделал.

Я использовал функцию replace, чтобы применить регулярное выражение, заменяющее «неправильные» URL-адреса на правильные.

В моем случае: replace: [{files: 'index.html', regex: /\.\.\/dist\/css/g, replacement: 'css'}], заменяя все ../dist/css на css в файле index.html. Например, <link href="../dist/css/style.css" /> станет <link href="css/style.css" />.

Я уверен, что в Gulp есть нечто подобное.

person BillyNate    schedule 02.07.2016
comment
Плагин gulp-css-url-adjuster, о котором он упоминает, на самом деле кажется идеальным решением (он делает то, о чем вы говорите). Вероятно, неправильно настроил. - person numbers1311407; 02.07.2016
comment
Да, я не могу настроить. На самом деле я застрял в prepend: '/ image_directory /', я пишу свой каталог изображений как 'assets / img', но он все еще не работает. Я действительно запутался, может ли кто-нибудь помочь мне разобраться. заранее спасибо - person Amitabha Ghosh; 04.07.2016

arrow_upward
0
arrow_downward

Я решил проблему css-url-adjuster сегодня, работая над другим проектом.

То, что я обнаружил, формат кодировки раньше мне не подходил. Так что я делюсь надеждой, что кому-то это может пригодиться.

Для этого я использовал 4 плагина Gulp. 1. gulp-clean-css 2. gulp-cssmin 3. gulp-rename 4. gulp-css-url-adjuster

и код:

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'))
});
person Amitabha Ghosh    schedule 17.11.2016