6.2.0 • Published 9 years ago
reduce-css v6.2.0
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 makeb.bundle()
output a stream manipulatable bygulp
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. Checkglobby
for more details.depsifyOptions
: options fordepsify
. IfdepsifyOptions.postcss
is notfalse
, the pluginreduce-css-postcss
fordepsify
is applied, which usepostcss
to preprocess css.bundleOptions
: options forcommon-bundle
.watchifyOptions
: options forwatchify2
. 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