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

【问题标题】：Handling image paths in css files when processed by gulp在 gulp 处理时处理 css 文件中的图像路径
【发布时间】：2015-07-16 13:52:52
【问题描述】：

以前在我的 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，但不幸的是，它们没有考虑到我的站点拥有的域文件夹。

有什么想法吗？

提前致谢

【问题讨论】：

另外，您是否使用部分文件？我不熟悉 gulp-less api，但是对于 gulp-sass，您必须指定哪个目录包含部分文件并且会影响背景图像路径。

标签： css gulp gulp-less

【解决方案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'));
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：