How to disable gulp encoding images with base64?

Question

So after gulp work, i have encoded images in base64 in css file which size is 2.8mb(((

Here is my gulpfile:

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

You can configure stylus to only encode images smaller than a specified limit. The urls for images which exceed that limit will not be modified.

In this example, only images smaller than 2000 bytes are encoded:

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))
}

For more information on the url function, see the following documentation: https://stylus-lang.com/docs/functions.url.html