各配置项含义
配置对象configure中各项的含义：
0.7版本将区分不同环境下的配置。
js
js.entries
Optional
用来定位入口模块。
与vinyl-fs#src一样，支持**与*等通配符。
Type: String, Array
一些实例：
'page/**/index.js''lib/*.js'['lib/*.js', '!lib/test.js']。!表示排除。
如果不是绝对路径，则必须是相对于js.reduce.basedir的。
js.bundleOptions
Optional
指定打包策略。
单包模式
Type: String
所有JS打成一个包，指定值为这个包的路径（相对于js.dest）。
实例：bundle.js。
多包模式
Type: Object
可以指定groups和common字段。
groups
Type: String，Array。
与js.entries一样的形式，匹配到的文件将独立打成包。
相匹配部分的值，为相对于js.dest的路径。
common
Optional
Type: String
指定公共包路径。
通过groups确定多个包后，从中提取出所有包公用的模块，生成一个公共包。
实例
{
js: {
reduce: { basedir: '/path/to/src' },
bundleOptions: {
groups: 'page/**/index.js',
common: 'common.js',
},
dest: '/path/to/build',
},
}
如果有模块/path/to/src/page/hi/index.js，则生成包/path/to/build/page/hi/index.js。
同时，从所有匹配生成的包中提取出公共模块，生成公共包/path/to/build/common.js。
js.reduce
直接传递给browserify的配置，请参考这里。
注意：不能再指定entries。
下面是几个常见的配置项。
basedir
Type: String
模块相对路径的根目录。
plugin
指定browserify插件。
transform
指定browserify使用的Transform。
js.plugin
指定处理JS包的插件。 由于JS包即vinyl文件，所以实际上gulp插件都可用在这里。
注意：这里指定的是在JS包生成后进行处理的插件，与browserify的插件不同。具体请参考插件说明和相关实例。
js.dest
指定生成JS包的根目录。
直接传给vinyl-fs#dest。
如果需要指定第二个参数，可以将js.dest指定为数组。
js.on
监听JS打包相关的事件。
{
js: {
on: {
'common.map': (bundleMap, inputMap) => {},
'reduce.end': (bytes, duration) => {},
log: msg => {},
error: err => {},
}
}
}
common.map。由[common-bundle]触发，提供模块和生成包的对应关系。reduce.end。每次生成包写入磁盘后自动触发。
css
css.entries
与js.entries一样。
css.bundleOptions
与js.bundleOptions一样。
css.reduce
直接传递给depsify的配置。
注意：不能再指定entries。
下面是几个常见的配置项。
basedir
Type: String
模块相对路径的根目录。
plugin
指定depsify插件。
transform
指定depsify使用的Transform。
css.plugin
与js.plugin一样。
css.dest
指定生成CSS包的根目录。
如果指定为数组，前面两个直接传给vinyl-fs#dest。 第三个参数用于配置url变换：
maxSize: 小于该大小（kb）的资源会以base-64的形式内嵌assetOutFolder: 非内嵌的资源被拷贝到该目录下name: 重命名拷贝的资源baseUrl: 指定最终CSS中url()的前缀
实例：
{
css: {
dest: [
'/path/to/build',
null,
{
// 小于5k的资源将被内嵌
maxSize: 5,
// 超过5k的资源被拷贝到/path/to/build/assets
assetOutFolder: '/path/to/build/assets',
// 被拷贝的目录将重命名
// 例如，octocat_setup.png重命名为octocat_setup.84f6371.png
name: '[name].[hash]',
// 如果指定的话，所有资源都用7位sha1重命名
// useHash: true,
// 如果指定的话，CSS中非内嵌的资源`url()`将以`i`为前缀
// 同时资源被拷贝到相应的目录
// 如`i/octocat_setup.84f6371.png`
// baseUrl: 'i',
}
]
}
}
css.on
与js.on一样。
css.postcss
详见定制PostCSS。
getStyle
指定JS与CSS的绑定关系。 如果某个JS有绑定的CSS，则当其它JS依赖它时，两者绑定的CSS会自动形成对应的依赖关系。
Type: Function
Signature: cssFiles = getStyle(jsFile)
cssFiles即与jsFile绑定的样式。
{
// 将page/hi/index.js与page/hi/index.css绑定起来
getStyle: jsFile => {
return path.dirname(jsFile) + '/index.css'
}
}
返回值也可以是Promise。
watch
直接传给watchify2的参数。
{
watch: {
// 监听新增的入口
js: { entryGlob: 'page/**/index.js' },
css: { entryGlob: 'page/**/index.css' },
}
}
reduce
同时指定js.reduce与css.reduce中相应的字段。