vfe
vfe is a components builder with specified directory structure, base on webpack and gulp.
Usage
See example.
Installing:
npm install vfe --save
Using with gulp build tool, create a gulpfile.js
file
var gulp = var vfe = gulp
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 isstart-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 isrelease-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
If you don't want use "/c" as component modules directory, overwrite it:
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.bundle(src[, options])
options
name
output filename without extensionhash
enable/disable using output, default trueminify
enable/disable compress css/js, default trueconcats
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:
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.