vfe

vfe

vfe is a components builder with specified directory structure, base on webpack and gulp.

• Usage
• Command Line
• Require Rules
• Custom Modules Directory
• API
• Expose Modules
• Configure

Usage

See example.

Installing:

npm install vfe --save

Using with gulp build tool, create a gulpfile.js file

var gulp = require('gulp')
var vfe = require('vfe')

gulp.task('default', function () {

	return vfe({
			entry: './index.js',
			libs: './lib/*.js'
		})
		.pipe(gulp.dest(dist))
})

Project folders specification:

./
 |___/c
 |   |
 |   |___/header
 |       |
 |       |____header.css
 |       |
 |       |____header.js
 |       |
 |       |____header.tpl
 |       |
 |       |___/images
 |           |____icon.png
 |
 |
 |____gulpfile.js
 |
 |____index.js
 |
 |___/lib
     |____*.js

• c/

  Component modules directory, default is "/c". Using require("$componentName") to load module, such as load header module: require("header") will auto load header.css and header.js.

  Note: It can be replaced of custom_directory using modulesDirectories option. See

• lib/

  Non-modularized js will concat with components' bundle file.

• index.js

  Components entry js.

Command line

Install vfe command line tool:

npm install vfe-cli -g

Run default build task

vfe

Start develop watcher

vfe start
## aliase
vfe s

Note: Start command support run with another task name, such as vfe start sometask, only if task name is start-sometask.

Releasing for production

vfe release
## aliase
vfe r

Note: Release command support run with another task name, such as vfe release sometask, only if task name is release-sometask.

模块引用规则

• require("$name")

  "/$components_modules/$name/$name.js" 的简写，一级目录同名规则

• require("$dir/$name")

  "/$components_modules/$dir/$name/$name.js" 的简写，二级目录同名规则

• require("$dir/$sub/$name")

  "/$components_modules/$dir/$sub/$name/$name.js" 的简写，三级目录同名规则

• require("/$components_modules/$name")

  "/$components_modules/$name/$name.js" 的简写，一级目录同名规则&绝对路径

• require("/$components_modules/$dir/$name")

  "/$components_modules/$dir/$name/$name.js" 的简写，二级目录同名规则&绝对路径

• require("/$components_modules/$dir/$sub/$name")

  "/$components_modules/$dir/$sub/$name/$name.js" 的简写，三级目录同名规则&绝对路径

• require("./$name.tpl")

  加载HTML模板作为渲染方法

Custom modules directory

vfe({
	entry: './index.js',
	libs: './lib/*.js',
	modulesDirectories: ['c', 'custom_modules']
})

If you don't want use "/c" as component modules directory, overwrite it:

vfe({
	modulesDirectories: ['components'] // use "/components" as modules directory
})

API

• vfe(options)

  options also is webpack's options. vfe only options:

  options

  • name output filename without extension.

  • hash enable/disable using output, default true

  • minify enable/disable compress css/js, default true

  • rule enable/disable require rule transform, default true

  • vfePlugins

    • extractText Custom options for extract-text-webpack-plugin.

  • vfeLoaders configuration for build in loaders, include:

    • tpl default enable, set false to disable
    • css default enable, set false to disable
    • less default disable, pass true/object to enable
    • image default enable, set false to disable

  For example:

  	vfe({
  		// ...
      	vfeLoaders: {
      		tpl: false, // disable html-loader for *.tpl
      		css: {
  				options: {
  					publicPath: '../'
  				}
  			},
  			less: {
  				test: /\.(ls|less)$/,
  				options: {
  					publicPath: '../'
  				}
  			},
  			image: {
  				loader: 'file-loader?name=images/[name]_[hash:6].[ext]'
  			}
      	}
      	// ...
  	})
  

• vfe.bundle(src[, options])

  options

  • name output filename without extension
  • hash enable/disable using output, default true
  • minify enable/disable compress css/js, default true
  • concats those files will be concat directly without minify

• vfe.HASH_LENGTH

  Vfe default output name's hash-length

• vfe.util

  • once( handler(next) ) run in once the the same time, run next after done, no queue

Expose modules

Using gulp module of vfe without require, such as:

vfe(options)
	.pipe(vfe.if())
	.pipe(vfe.rename)

Module	name
if	gulp-if
hash	gulp-hash
filter	gulp-filter
merge	merge2
rename	gulp-rename
clean	gulp-rimraf
concat	gulp-concat
uglify	gulp-uglify
multipipe	multipipe
webpack	webpack
ExtractTextPlugin	extract-text-webpack-plugin

Configure

• Override vfe's loader config

{
	vfeLoaders: {
		tpl: {},   // html-loader, default match: *.tpl
		css: {},   // css-loader,  default match: *.css
		image: {}, // file-loader, default match: png|jpg|gif|jpeg|webp
	}
}

• WebPack Using as vfe(options) , options will be passed through to webpack function.

License

MIT.