gulp实现图片url转为base64内连

比较小的图片转为base64是为了减少请求，加快访问。gulp-css-base64可以实现这个功能，监听CSS文件将图片转为base64。

官方例子：

var cssBase64 = require('gulp-css-base64');
 
//Without options
gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(cssBase64())
        .pipe(gulp.dest('dist'));
});
 
//With options
gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(cssBase64({
            baseDir: "../../images",
            maxWeightResource: 100,
            extensionsAllowed: ['.gif', '.jpg']
        }))
        .pipe(gulp.dest('dist'));
});

这里要注意，gulp-css-base64需要监听css文件，并不能监听文件夹。

如果要集合gulp-sass、gulp-postcss、cssnano、autoprefixer一起应该怎么用呢？下面例子：

function styles() {
  const plugins = [
    autoprefixer(),
    cssnano({
      preset: 'default'
    })
  ]
  return (
    gulp
    .src(paths.styles.src)
    .pipe(changed(paths.styles.dest))
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(cssBase64())
    .pipe(
      rename({
        basename: 'style',
        suffix: '.min'
      })
    )
    .pipe(gulp.dest(paths.styles.dest))
  )
}

上面是按照官方的例子改的，.pipe(cssBase64())放在postcss之后，这样是不生效的，测试将sass转化和base64两个功能分开即可：

const autoprefixer = require('autoprefixer')
const changed = require('gulp-changed')
const cssBase64 = require('gulp-css-base64')
const cssnano = require('cssnano')
const gulp = require('gulp')
const postcss = require('gulp-postcss')
const rename = require('gulp-rename')
const sass = require('gulp-sass')

sass.compiler = require('node-sass')

const paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'assets/css/'
  }
}

function styles() {
  const plugins = [
    autoprefixer(),
    cssnano({
      preset: 'default'
    })
  ]
  return (
    gulp
    .src(paths.styles.src)
    .pipe(changed(paths.styles.dest))
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(
      rename({
        basename: 'style',
        suffix: '.min'
      })
    )
    .pipe(gulp.dest(paths.styles.dest))
  )
}

function base64() {
  return gulp.src(paths.styles.dest + 'style.min.css')
    .pipe(cssBase64())
    .pipe(
      rename({
        suffix: '.base64'
      })
    )
    .pipe(gulp.dest(paths.styles.dest))
}