Vfem NPM | npm.io

vfe

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

Usage

Installing:

npm install vfe --save

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

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

gulp.task('default', function () {
	
	return builder({
			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

	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](https://github.com/switer/vfe#custom-modules-directory)

lib/

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

index.js
```
	Components entry js.
```

Require rules

require("/$components_modules/name/$resource.js")
```
	Component resources absolute path.
```

require("$name")

	Short name of `"/$components_modules/name/$name.js"`.

require("$dir/$name")

	Short name of `"/$components_modules/dir/$name/$name.js"`.

require("./$name.tpl")

	Load html template file as a string module.

See more usage

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
})

Command line

Install cli

npm install vfe -g

Init project using vfe-template

vfe init

Note: Using proxy option, vfe init -p $proxy. Such as vfe init -p tx. See $tx

Run default build task

vfe

Start develop watcher

vfe start

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

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

Configure

####Vfe config

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