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文件已成功缩小，uglified等，但例如，图像链接不正确。当然，相对路径引用http://localhost/site-folder/dist/css/Content/images/logo之类的东西。最初类似于/Content/images/logo.png的路径最终为http://localhost/Content/images/logo.png，但不幸的是，它们不会考虑我的网站所拥有的域文件夹。

有什么想法吗？

提前致谢

Answer 1

最简单的方法是在css的管道中使用gulp-replace，并用新的图片地址替换当前的网址。（我还添加了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任务来压缩图像或制作精益求精的精灵。虽然你不需要像这个先进的设置，我建议浏览gulp-starter https://github.com/vigetlabs/gulp-starter（具体看他们如何进行Sass管道和图像压缩步骤）。

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

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

2 个答案: