html - 图像不会在浏览器中呈现

Question

我使用 gulp 作为自动化和构建系统，当我构建网站时，当我在我的 css 文件中添加背景图像作为背景图像属性时，当我运行 gulp 时，一切都在浏览器中正确呈现，当我尝试打开 index.html 时gulp off 来自 css 文件的图像不会仅渲染那些在我的 html 文件中嵌入了 img 标签的图像，即使在我的网站的构建版本中也能正常工作。

我的 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']); 

包.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"
}

标签： htmlcssgulpgulp-sass