6.2.0 • Published 9 years ago

reduce-css v6.2.0

Weekly downloads
6
License
MIT
Repository
github
Last release
9 years ago

reduce-css

version status coverage dependencies devDependencies node

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

6.2.0

9 years ago

6.1.0

9 years ago

6.0.1

9 years ago

6.0.0

9 years ago

5.2.1

9 years ago

5.2.0

9 years ago

5.1.0

9 years ago

5.0.0

9 years ago

4.0.0

9 years ago

3.0.1

10 years ago

3.0.0

10 years ago

2.0.2

10 years ago

2.0.1

10 years ago

2.0.0

10 years ago

1.0.3

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.0.1

10 years ago