A FIS generator for Yeoman
Trick question. It's not a thing. It's this guy:
Basically, he wears a top hat, lives in your computer, and waits for you to tell him what kind of application you wish to create.
Not every new computer comes with a Yeoman pre-installed. He lives in the npm package repository. You only have to ask for him once, then he packs up and moves into your hard drive. Make sure you clean up, he likes new and shiny things.
$ npm install -g yo
Yeoman travels light. He didn't pack any generators when he moved in. You can think of a generator like a plug-in. You get to choose what type of application you wish to create, such as a Backbone application or even a Chrome extension.
To install generator-fis from npm, run:
$ npm install -g generator-fis
Make a new directory and cd
into it:
mkdir my-new-project && cd $_
Finally, initiate the generator:
$ yo fis
Available generators:
- fis 初始化一个 Project
- fis:h 显示帮助
- fis:h5 生成一个HTML5页面模板
- fis:h4 生成一个HTML4页面模板
- fis:webapp 生成一个完整的网站模板
- fis:module 初始化一个模块单元
- fis:page 生成一个Page
- fis:widget 创建标准的组件 Example: fis:widget 1.0.0
yo fis #初始化一个 Project
yo fis:page 生成一个Page
gulp 构建项目
gulp styles css的检测、压缩和合并
gulp scripts js的检测、压缩和合并
gulp html
gulp images 图片压缩和图片精灵
gulp clean 清除 tmp 和 dist 目录内容
gulp wiredep Inject bower components
gulp build 处理html、css、js等
gulp watch 自动监听文件的改变和F5刷新
gulp publish 发布项目
-
--skip-install
Skips the automatic execution of
bower
andnpm
after scaffolding has finished. -
--skip-install-message
welcome message
-
--test-framework=[framework]
Defaults to
mocha
. Can be switched for another supported testing framework likejasmine
.
Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced.
If you'd like to get to know Yeoman better and meet some of his friends, Grunt and Bower, check out the complete Getting Started Guide.
site
src
components //来自网络的bower_components
page //模板文件目录
page-1
/index.html
/index.css
/index.js
...
module //页面模块,增进页面结构(模板组件,CSS组件)
base
/base.css
/layout.css
/modules.css
header
/index.js
/index.css
/index.html
footer
content
sidebar
nav
menu
...
widget // JS组件
dialog
1.0.0
src
/*.js
/*css
demo
/index.html
test
plugin (待定)
1.0.1
1.0.2
...
doc
dist
components
1.0.0
images
/icon
/_res
/sp.png
/js
/libs
/global.js
/css
/base.css
/page.css
/page-proj.css
/index.html
/page.html
1.0.1
1.0.2
...
static
*.jpg
*.png
test
webapp
app
js
scss | stylus | less | css
img
index.html
dist
js
css
img
index.html
MIT