css - 在 gulp 处理时处理 css 文件中的图像路径

Question

以前在我的 MVC 应用程序中，我使用 .NET 优化(连接、缩小等)我的 CSS 文件。我不得不使用自定义转换类来处理我的 CSS 中的路径，例如:

.brand {
    background-image: url("../images/logo.png");
}

甚至:

.brand {
    background-image: url("/Content/images/logo.png");
}

我已将 gulp 添加到我最近的前端测试元素中，我想我也可以使用它来自动优化我的 CSS 和 JS 文件。这是我处理 CSS 文件的 gulp 任务:

var gulp = require('gulp');
var concat = require('gulp-concat');
var cssmin = require('gulp-minify-css');
var rename = require("gulp-rename");
var less = require('gulp-less');
var uglify = require('gulp-uglify');

gulp.task('styles', function () {
    return gulp.src('./Content/custom/site.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'))
        .pipe(cssmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css'));
});

CSS 文件已成功缩小、丑化等，但图像链接等不正确。当然，相对路径现在引用类似 http://localhost/site-folder/dist/css/Content/images/logo 的内容。最初类似于 /Content/images/logo.png 的路径最终变成了 http://localhost/Content/images/logo.png，但不幸的是，它们没有'不考虑我的网站拥有的域文件夹。

有什么想法吗？

提前致谢

Answer 1

最简单的方法是在您的 css 管道中使用 gulp-replace，并将您当前的 url 替换为新的图像地址。 (我还添加了 gulp-load-plugins 以减少 require() 膨胀。

这假设您也在单独的任务中迁移图像。

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins'); // replaces all your requires

var yourDirectory = "/Content/images/";

gulp.task('styles', function () {
    return gulp.src('./Content/custom/site.less')
        .pipe(plugins.less())
        .pipe(gulp.dest('./dist/css'))
        .pipe(plugins.replace('url("../images/', 'url("' + yourDirectory)
        .pipe(plugins.cssmin())
        .pipe(plugins.rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css'));
});