Доброго времени суток!
Верстая макет при помощи LESS и сборщика Gulp, и прописывая пути к картинкам следующим образом:
background: url(../../img/main-img.png) no-repeat;
при использовании browser-sync в браузере отображается все нормально.
Но после сборки проекта (gulp.task('build')) картинки прописаные в css не отображаются.
Помогает лишь в ручную изменять все пути уже непосредственно в css вот так, тогда всё ок:
background: url(../img/main-img.png) no-repeat;
Как правильно прописывать пути чтобы не изменять в ручную.
Вот конфиг gulp:
gulp.task('less', function() {
return gulp
.src('src/less/style.less')
.pipe(less())
.pipe(
autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {
cascade: true
})
)
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
});
gulp.task(
'css-min',
gulp.series('less', function() {
return gulp
.src('src/css/style.css')
.pipe(cssnano())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('src/css'));
})
);
gulp.task('clean', gulp.series(function(){
return del.sync('dist');
}));
gulp.task(
'server',
gulp.series('less', function() {
browserSync.init({
server: './src'
});
gulp.watch('src/less/**/*.less', gulp.series('less'));
gulp.watch('src/*.html').on('change', browserSync.reload);
})
);
gulp.task('build', gulp.series(function(){
var buildCss = gulp.src('src/css/**/*.css')
.pipe(gulp.dest('dist/css'));
var buildFonts = gulp.src('src/fonts/**/*')
.pipe(gulp.dest('dist/fonts/'));
var bulidJs = gulp.src('src/js/**/*')
.pipe(gulp.dest('dist/js'));
var bulidImg = gulp.src('src/img/**/*')
.pipe(gulp.dest('dist/img'));
var bulidHtml = gulp.src('src/*.html')
.pipe(gulp.dest('dist/'));
}));
Средний
Простой
