使用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，但不幸的是，他们没有考虑到我的网站的域文件夹。

任何想法?

Thanks in advance

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'));
});

Answer 2

通常我最终做的是创建一个/dest, /public或/build目录，与我的源代码分开。这样，在我的预处理器文件中，我可以只说images/img.png，而不必担心正确的路径，因为我知道gulp将始终在构建目录中转储图像。

我也喜欢这种风格，因为它迫使我安全地考虑我要向用户公开的文件，并且可以配置我的web服务器只从那里提供静态服务(避免路径遍历等[参见:如果您使用Express，请参阅express.static()])。这样做的另一个好处是，你可以有一个单独的任务来压缩图像或制作精灵，这对性能很有帮助。虽然您不需要这么高级的设置，但我建议您浏览gulp-starter https://github.com/vigetlabs/gulp-starter(具体看看它们是如何完成Sass管道和图像压缩步骤的)。

如果该解决方案不适合您的项目，您可以从流程中获取路径。在Node中，这很容易与__dirname或path.cwd()…但我觉得这是个更糟糕的主意