javascript - 一口-cssmin : How to change relative URLs in minified CSS

Question

我是 gulp 的新手，需要您帮助我使用 gulp-cssmin 插件来缩小我的 CSS 文件。我的简单元素结构:

gulpfile.js
  css/
    myCss.css
    min/
      myCss.min.css
  images/
    myImg.jpg

我现在的目标是缩小文件夹 css/ 中的 CSS 文件 myCSS.css，将其重命名为 myCSS.min.css 并将其复制到文件夹 css/min/。这按预期工作。现在我在我的 CSS 文件中使用相对 URL 路径:

background-image: url("../images/myImg.jpg");

将文件复制到文件夹 css/min/ 时，路径不再正确。我需要重新设置 URL。我该怎么做呢？我尝试设置 target 选项，但没有效果。我的 gulpfile.js:

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('default', function () {
    gulp.src('css/*.css')
        .pipe(cssmin({ showLog: true, target: '../', keepBreaks: true }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('css/min'));
});

Answer 1

你需要两个 options :

• relativeTo:输入文件所在的文件夹(即 css/)
• target:输出文件写入的文件夹(即 css/min/)

所以你最终得到:

gulp.task('default', function () {
  gulp.src('css/*.css')
   .pipe(cssmin({ 
      showLog: true, 
      relativeTo: 'css/',
      target: 'css/min/', 
      keepBreaks: true
    }))
   .pipe(rename({ suffix: '.min' }))
   .pipe(gulp.dest('css/min'));
});