reduce-css

Pack CSS into common shared bundles.

Features:

• Accept patterns to add entries.
• Use depsify to pack css files into bundles.
• Use postcss to preprocess css.
• Use watchify2 to watch files, which is able to detect new entries.
• Use common-bundle to create common shared modules by default, which make b.bundle() output a stream manipulatable by gulp plugins.

Example

Check the example.

var reduce = require('reduce-css')
var del = require('del')
var path = require('path')
 
bundle(createBundler())
 
function createBundler(watch) {
  var basedir = path.join(__dirname, 'src')
  var b = reduce.create(
    /* glob for entries */
    '*.css',
 
    /* options for depsify */
    {
      basedir,
      cache: {},
      packageCache: {},
    },
 
    /* options for common-bundle */
    // single bundle
    // 'bundle.css',
    // multiple bundles
    {
      groups: '*.css',
      common: 'common.css',
    },
 
    /* options for watchify2 */
    watch && { entryGlob: '*.css' }
  )
  return b
}
 
function bundle(b) {
  var build = path.join(__dirname, 'build')
  del.sync(build)
  return b.bundle().on('error', log)
    .pipe(b.dest(build, {
      maxSize: 0,
      name: '[name].[hash]',
      assetOutFolder: path.join(build, 'assets'),
    }))
}
 
function log() {
  console.log.apply(console, [].map.call(arguments, function (msg) {
    if (typeof msg === 'string') {
      return msg
    }
    return JSON.stringify(msg, null, 2)
  }))
}
 
 

To watch file changes:

var b = createBundler(true)
b.on('update', function update() {
  bundle(b)
  return update
}())
 

To work with gulp:

var gulp = require('gulp')
gulp.task('build', function () {
  return bundle(createBundler())
})
 
gulp.task('watch', function (cb) {
  var b = createBundler(true)
  b.on('update', function update() {
    bundle(b)
    return update
  }())
  b.on('close', cb)
})
 

API

var reduce = require('reduce-css')
var b = reduce.create(entries, depsifyOptions, bundleOptions, watchifyOptions)
 

reduce.create(entries, depsifyOptions, bundleOptions, watchifyOptions)

Return a depsify instance.

• entries: patterns to locate input files. Check globby for more details.
• depsifyOptions: options for depsify. If depsifyOptions.postcss is not false, the plugin reduce-css-postcss for depsify is applied, which use postcss to preprocess css.
• bundleOptions: options for common-bundle.
• watchifyOptions: options for watchify2. If specified, file changes are watched.

b.bundle()

Return a vinyl stream, which can be processed by gulp plugins.

b.bundle().pipe(require('gulp-uglifycss')()).pipe(b.dest('build'))
 

b.dest(outFolder, urlTransformOptions)

Works almost the same with gulp.dest, except that file contents are transformed using postcss-custom-url before written to disk.

urlTransformOptions is passed to both the inline and copy transformers for postcss-custom-url.

The actual processor:

var url = require('postcss-custom-url')
var postcss = require('postcss')
var urlProcessor = postcss(url([
  [ url.util.inline, urlTransformOptions ],
  [ url.util.copy, urlTransformOptions ],
]))
 

Related

• reduce-js
• reduce-css-postcss
• depsify