Gulpfile中的图片在CSS中未显示

Question

我正在使用gulp做一系列工作，但某种原因它没有输出CSS图片。这里是代码：

var
    source = 'source/',
    dest = 'build/',

    html = {
        in: source + '*.html',
        watch: [source + '*.html', source + 'template/**/*'],
        out: dest,
        context: {
            devBuild: devBuild,
            author: pkg.author,
            version: pkg.version
        }
    },

    images = {
        in: source + 'images/*.*',
        out: dest + 'images/'
    },

    imguri = {
        in: source + 'images/inline/*',
        out: source + 'scss/images/',
        filename: '_datauri.scss',
        namespace: 'img'
    },

    css = {
        in: source + 'scss/main.scss',
        watch: [source + 'scss/**/*', '!' + imguri.out + imguri.filename],
        out: dest + 'css/',
        sassOpts: {
            outputStyle: 'nested',
            imagePath: '../images',
            precision: 3,
            errLogToConsole: true
        },
        pleeeaseOpts: {
            autoprefixer: { browsers: ['last 2 versions', '> 2%'] },
            rem: ['16px'],
            pseudoElements: true,
            mqpacker: true,
            minifier: !devBuild
        }
    },

    fonts = {
        in: source + 'fonts/*.*',
        out: css.out + 'fonts/'
    },

    js = {
        in: source + 'js/**/*',
        out: dest + 'js/',
        filename: 'main.js'
    },

    syncOpts = {
        server: {
            baseDir: dest,
            index: 'index.html'
        },
        open: false,
        notify: true
    };


console.log(pkg.name + ' ' + pkg.version + ', ' + (devBuild ? 'development' : 'production') + ' build');


gulp.task('clean', function() {
    del([
        dest + '*'
    ]);
});


gulp.task('html', function() {
    var page = gulp.src(html.in).pipe(preprocess({ context: html.context }));
    if (!devBuild) {
        page = page
            .pipe(size({ title: 'HTML in' }))
            .pipe(htmlclean())
            .pipe(size({ title: 'HTML out' }));
    }
    return page.pipe(gulp.dest(html.out));
});


gulp.task('images', function() {
    return gulp.src(images.in)
        .pipe(newer(images.out))
        .pipe(imagemin())
        .pipe(gulp.dest(images.out));
});


gulp.task('imguri', function() {
    return gulp.src(imguri.in)
        .pipe(imagemin())
        .pipe(imacss(imguri.filename, imguri.namespace))
        .pipe(gulp.dest(imguri.out));
});


gulp.task('fonts', function() {
    return gulp.src(fonts.in)
        .pipe(newer(fonts.out))
        .pipe(gulp.dest(fonts.out));
});


gulp.task('sass', ['imguri'], function() {
    return gulp.src(css.in)
        .pipe(sass(css.sassOpts))
        .pipe(size({title: 'CSS in '}))
        .pipe(pleeease(css.pleeeaseOpts))
        .pipe(size({title: 'CSS out '}))
        .pipe(gulp.dest(css.out))
        .pipe(browserSync.reload({ stream: true }));
});


gulp.task('js', function() {
    if (devBuild) {
        return gulp.src(js.in)
            .pipe(newer(js.out))
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(jshint.reporter('fail'))
            .pipe(gulp.dest(js.out));
    }
    else {
        del([
            dest + 'js/*'
        ]);
        return gulp.src(js.in)
            .pipe(deporder())
            .pipe(concat(js.filename))
            .pipe(size({ title: 'JS in '}))
            .pipe(stripdebug())
            .pipe(uglify())
            .pipe(size({ title: 'JS out '}))
            .pipe(gulp.dest(js.out));
    }
});


gulp.task('browserSync', function(){
  browserSync.init({
    server:{
      baseDir: "build/"
    },
  })
});


gulp.task('default', ['html', 'images', 'fonts', 'sass', 'js', 'browserSync'], function() {

    gulp.watch(html.watch, ['html', browserSync.reload]);

    gulp.watch(images.in, ['images']);

    gulp.watch(fonts.in, ['fonts']);

    gulp.watch([css.watch, imguri.in], ['sass']);

    gulp.watch(js.in, ['js', browserSync.reload]);
});

这是 CSS 代码：

#features {
    width: 100%;
    padding: 5vh 5vw;
    background: $color-dark image-url("3.jpg") 50% 50% no-repeat;
    background-size: cover;

我认为这与文件夹/文件位置有关。

- joe blo

Answer 1

应该是这样的 CSS：

background: $color-dark url("3.jpg") no-repeat 50% 50%;

而不是

background: $color-dark image-url("3.jpg") 50% 50% no-repeat;

- llobet

---

非常感谢，那个方法可行。我必须包含文件夹位置 "../images/3.jpg"。我为此苦苦挣扎了三天，哇，再次感谢你。 - joe blo