gulp-css2txt

gulp-css2txt is a gulp plugin to extract possible characters from css which may be appear in browser.

install

$ npm install -D gulp-css2txt

Simple usage

Static import

import gulp from 'gulp'
import css2txt from 'gulp-css2txt'

gulp.task('css2txt', () => {
  gulp.src(['path/to/the.css'])
    .pipe(css2txt())
    .pipe(gulp.dest('dist/'))
})

CommonJS style

const gulp = require('gulp')
const css2txt = require('gulp-css2txt')

gulp.task('css2txt', () => {
  gulp.src(['path/to/the.css'])
    .pipe(css2txt({ opts }))
    .pipe(gulp.dest('dist/'))
})

Overview of transformation

input

CSS is acceptable input.

.foo::before {
  content: 'abc'
}
.bar::before {
  content: "def"
}
.baz::after {
  content: '\47'; /* G */
}

output

Output willbe aggregated characters.

abcdefG

Example stack of font subsetting with gulp-fontmin

prepare

$ npm install -D gulp gulp-css2txt gulp-fontmin
$ npm install -S font-awesome

import gulp    from 'gulp'
import css2txt from 'gulp-css2txt'
import fontmin from 'gulp-fontmin'

gulp.task('font', cb => {

  const texts = []

  gulp.src(['./dist/*.css'])
    .pipe(css2txt())
    .on('data', file => texts.push(file.contents.toString()))
    .on('end', () => {

      const text = texts.join('')
      const formats = ['eot', 'ttf', 'woff', 'svg']

      gulp.src('./node_modules/font-awesome/fonts/**/*.ttf')
        .pipe(fontmin({ text, formats }))
        .pipe(gulp.dest('./dist'))
        .on('end', () => cb())
    })