1

我正在使用 Grunt 中的 cssmin 插件缩小我的 css 文件。我注意到背景属性得到优化。Gruntfile.js

cssmin: {
    options: {
      // ...
    },
    target: {
        files: [{
            expand: true,
            cwd: './htdocs/css/src',
            src: '**/*.css',
            dest: './htdocs/css/dist',
            ext: '.min.css'
        }]
    }
}

.carousel {
    background: linear-gradient(70deg, #c12365 0%, #c72570 1%, #c12365 calc(0% + 1px), #c12365 40%, #404040 calc(20% + 1px), #404040 75%, #404040 calc(75% + 1px), #404040 100%);
    overflow: visible;
}

我为实现背景而编写的代码但是在运行 grunt 任务运行程序后，生成的 min 文件已优化为

.carousel{background:linear-gradient(70deg, #c12365 0, #c72570 1%, #c12365 calc(0 + 1px), #c12365 40%, #404040 calc(20% + 1px), #404040 75%, #404040 calc(75% + 1px), #404040 100%);overflow:visible}

注意： cssmin 将0%值转换为0使背景不同的值。

我什至阅读了文档并尝试将所有级别 1 和级别 2 属性设置为 false by 作为选项参数

options: {
    level: {
        1: {
            all: false // set all values to `false`
        },
        2: {
            all: false // set all values to `false`
        }
    }
}

仍然没有得到想要的结果。

有人可以帮我吗

4

1 回答 1

1

Set the zeroUnits option to false in your cssmin task.

For instance:

cssmin: {
  options: {
    compatibility: {
      properties: {
        zeroUnits: false   // <------
      }
    }
  },
  target: {
    files: [{
      expand: true,
      cwd: './htdocs/css/src',
      src: '**/*.css',
      dest: './htdocs/css/dist',
      ext: '.min.css'
    }]
  }
}

Result:

.carousel{background:linear-gradient(70deg,#c12365 0%,#c72570 1%,#c12365 calc(0% + 1px),#c12365 40%,#404040 calc(20% + 1px),#404040 75%,#404040 calc(75% + 1px),#404040 100%);overflow:visible}

Note: the 0% values have been preserved.

于 2020-06-03T09:15:16.953 回答