8

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

有任何想法吗？

提前致谢

4

2 回答 2

1

最简单的方法是gulp-replace在管道中为您的 css 使用，并用新的图像地址替换您当前的 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'));
});
于 2016-07-01T14:00:37.147 回答
0

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

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

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

于 2015-11-18T01:23:27.020 回答