изображения не отображаются в браузере - PullRequest
Новая
       6

изображения не отображаются в браузере

0 голосов
/ 10 ноября 2018

Я использую gulp в качестве системы автоматизации и сборки, и когда я создаю веб-сайты, когда у меня есть фоновое изображение в моем файле css, добавленное как свойство background-image, когда я запускаю gulp, все правильно отображается в браузере, когда я пытаюсь открыть индекс HTML-файл с изображениями, полученными из CSS-файлов, не отображается, только те, которые встроены с тегом img в мой HTML-файл, работают нормально, даже в сборочной версии моего сайта.

my gulpfile.js 

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed');
var htmlReplace = require('gulp-html-replace');
var htmlMin = require('gulp-htmlmin');
var del = require('del');
var sequence = require('run-sequence');


// Server
gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: 'src'
    });

    gulp.watch("src/*.html").on('change', browserSync.reload);
    gulp.watch('src/sass/**/*.scss', ['sass']);
});

// Compile SASS to CSS
gulp.task('sass', function() {
    return gulp.src('src/sass/**/*.scss')
               .pipe(sass().on('error', sass.logError))
               .pipe(autoprefixer({
                browsers: ['last 3 versions']
               }))
               .pipe(gulp.dest('src/css'))
               .pipe(browserSync.stream());
});

gulp.task('css', function() {
    return gulp.src('src/css/**/*.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));

});

gulp.task('js', function() {
    return gulp.src('src/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));

});

gulp.task('img', function() {
    return gulp.src('src/img/**/*.{jpg,jpeg,png,gif}')
        .pipe(changed('dist/img'))
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));

});

gulp.task('html', function() {
    return gulp.src('src/*.html')
        .pipe(htmlReplace({
            'css': 'css/main.css',
            'js': 'js/script.js'
        }))
        .pipe(htmlMin({
            sortAttributes: true,
            sortClassName: true
        }))
        .pipe(gulp.dest('dist/'));
});

gulp.task('clean', function() {
    return del(['dist'])
});

gulp.task('build', function() {
    sequence('clean', ['html', 'js', 'css', 'img']);
});

gulp.task('default', ['serve']);

package.json 

"devDependencies": {
    "browser-sync": "^2.26.0",
    "del": "^3.0.0",
    "eslint": "^5.6.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-changed": "^3.2.0",
    "gulp-clean-css": "^3.10.0",
    "gulp-html-replace": "^1.6.2",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.1",
    "node-sass": "^4.9.3",
    "run-sequence": "^2.2.1"
}
...