30天web实践3-yeoman

yeoman分三部分
yo 安装generator 可以安装许多generator项目中使用某个
bower 管理各种包 升级 卸载 或者制定使用某个版本
grunt 就是编译运行了 类似make
安装依赖

Node.js v0.10.x+
npm (which comes bundled with Node) v1.4.3+
git


 npm install --global yo

这个命令就直接安装了 yo bower gtunt

npm install --global generator-angular@0.9.2

$ mkdir mytodo && cd mytodo

$ yo

然后选择 等它刷屏 这时候出错 多半是网络问题 你懂的
成功的话 你会发现mytodo下面有很多文件夹和文件 这些文件要自己建的话
这就是自动话啊 祈祷半分钟

$ grunt serve

正常的话 它会打开你的浏览器 让你看到一个页面
但是如果你之前没玩过ruby 你会失望的
安装ruby gem

gem install compass

这时再grunt serve 前面都成功的话 就能看到久违的欢迎页面了

 half@half-All-Series:~/tmp/mytodo$ bower list
bower check-new     Checking for new versions of the project dependencies..
mytodo#0.0.0 /home/half/tmp/mytodo
├── angular#1.2.16 (latest is 1.3.0-rc.0)
├─┬ angular-animate#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16 (latest is 1.3.0-rc.0)
├─┬ angular-cookies#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-mocks#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-resource#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-route#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-sanitize#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-scenario#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-touch#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├── bootstrap-sass-official#3.1.1+2 (latest is 3.2.0+1)
├── es5-shim#3.1.1 (latest is 4.0.3)
├── jquery#1.11.1 (latest is 2.1.1)
└── json3#3.3.2

当然你也可以安装新的包

half@half-All-Series:~/tmp/mytodo$ bower search angular-ui-sortable
Search results:

angular-ui-sortable git://github.com/angular-ui/ui-sortable.git
angular-ui-sortable-multiselection git://github.com/thgreasi/ui-sortable-multiselection.git

搜索一下
下面安装 记得加--save

half@half-All-Series:~/tmp/mytodo$ bower install --save angular-ui-sortable
bower not-cached    git://github.com/angular-ui/ui-sortable.git#*
bower resolve       git://github.com/angular-ui/ui-sortable.git#*
bower download      https://github.com/angular-ui/ui-sortable/archive/v0.12.10.tar.gz
bower extract       angular-ui-sortable#* archive.tar.gz
bower invalid-meta  angular-ui-sortable is missing "ignore" entry in bower.json
bower resolved      git://github.com/angular-ui/ui-sortable.git#0.12.10
bower not-cached    git://github.com/components/jqueryui.git#>=1.9
bower resolve       git://github.com/components/jqueryui.git#>=1.9
bower download      https://github.com/components/jqueryui/archive/1.11.1.tar.gz
bower extract       jquery-ui#>=1.9 archive.tar.gz
bower resolved      git://github.com/components/jqueryui.git#1.11.1
bower install       angular-ui-sortable#0.12.10
bower install       jquery-ui#1.11.1

angular-ui-sortable#0.12.10 bower_components/angular-ui-sortable
├── angular#1.2.16
└── jquery-ui#1.11.1

jquery-ui#1.11.1 bower_components/jquery-ui
└── jquery#1.11.1

后面还有单元测试什么的 说实话 我不懂
我真的应该从头学 整这些东西 更像玩具

顺便说下harp
就是一个服务器程序 和apache同级别
他的特点是 Markdown, EJS, Jade, LESS, Sass, Stylus, and CoffeeScript这些类型的文件
你写好放到文件夹 做好逻辑关系

harp server 文件夹名 --port 3000

端口可以不制定 然后你访问127.0.0.1：3000 harp把所有上面类型的文件解释成对应html css javascript 呈现给你

当然这样会比较慢 你也可以直接

harp compile 文件夹名

这样就编译好了

总之使用harp 你就可以尽情的使用jade markdown 。。。什么 而不用考虑编译问题