如何禁用 gulp 使用 base64 编码图像？

Question

所以在 gulp 工作之后，我在 css 文件中用 base64 编码图像，大小为 2.8mb(((

这是我的gulp文件：

const path = {
  stylus: {
    src: './src/stylus/**/*.styl',
    dest: './build/styles',
  },
  build: {
    dest: 'build/**'
  }
}

function stylusTask() {
  return src(path.stylus.src)
    .pipe(plumber())
    .pipe(stylus({
      use: nib(),
      import: ['nib'],
      compress: true
    }))
    .pipe(dest(path.stylus.dest))
}

Answer 1

您可以将手写笔配置为仅对小于指定限制的图像进行编码。超过该限制的图像的 urls 将不会被修改。

在此示例中，仅对小于 2000 字节的图像进行编码：

function stylusTask() {
  return src(path.stylus.src)
    .pipe(plumber())
    .pipe(stylus({
      use: nib(),
      import: ['nib'],
      compress: true,
      define: {
        url: require('stylus').url({
          limit:2000
        })
      }       
    }))
    .pipe(dest(path.stylus.dest))
}

有关 url 函数的详细信息，请参阅以下文档： https://stylus-lang.com/docs/functions.url.html

如何禁用 gulp 使用 base64 编码图像？

How to disable gulp encoding images with base64?

gulp

stylus

gulp-stylus