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.

varreduce=require('reduce-css')vardel=require('del')varpath=require('path')bundle(createBundler())functioncreateBundler(watch){varbasedir=path.join(__dirname,'src')varb=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'})returnb}functionbundle(b){varbuild=path.join(__dirname,'build')del.sync(build)returnb.bundle().on('error',log).pipe(b.dest(build,{maxSize: 0,name: '[name].[hash]',assetOutFolder: path.join(build,'assets'),}))}functionlog(){console.log.apply(console,[].map.call(arguments,function(msg){if(typeofmsg==='string'){returnmsg}returnJSON.stringify(msg,null,2)}))}

To watch file changes:

varb=createBundler(true)b.on('update',functionupdate(){bundle(b)returnupdate}())

To work with gulp:

vargulp=require('gulp')gulp.task('build',function(){returnbundle(createBundler())})gulp.task('watch',function(cb){varb=createBundler(true)b.on('update',functionupdate(){bundle(b)returnupdate}())b.on('close',cb)})

API

varreduce=require('reduce-css')varb=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:

varurl=require('postcss-custom-url')varpostcss=require('postcss')varurlProcessor=postcss(url([[url.util.inline,urlTransformOptions],[url.util.copy,urlTransformOptions],]))

Related

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