阿小信大人的头像
Talk is cheap. Show me the code. Linus Torvalds

Yeoman的使用2014-09-03 03:02

Yeoman文档:https://github.com/yeoman/yeoman/wiki/Getting-Started

Yeoman由yo、bower、grunt三部分组成,yo用来生成文件结构框架,bower用来管理web开发用到的各种css、js包,grunt用来build css、js等前端文件的。


安装Yeoman(要先安装npm):npm install -g yo

如果npm版本小于1.2.10需要手动安装grunt-cli和bower


安装web application对应生成器:npm install -g generator-webapp

其他application生成器如angularjs:npm install -g generator-angular


生成结构框架:yo webapp (yo后加上对应的generator-XXX)

生成后会有类似文件:

ashin@ubuntu:~/test/yeomantest$ ls
app  bower.json  Gruntfile.js  node_modules  package.json  test

Gruntfile.js是grunt的任务管理配置文件,bower.json是bower定义包的配置文件。

最后我们需要用Yeoman生成的文件都是app目录下产生的

使用bower list可以查看各包的依赖关系,可以使用bower查找、安装、更新包


运行Node server:

grunt server 会自动打开预览页面看到效果。前端需要完成的效果通过修改index页面调试,满意后编译他。


编译生成目标文件:

运行grunt 默认会生成dist目录,这个可以配置,里面就是编译后的文件,css、js文件都经过了优化。要编译自己写的css可以把写好的css命名为main.css放在app下的styles目录下,运行grunt就会产生编译后的自己的css文件,必须是名为main的css或者scss。如果新增了js文件,那么必须把js文件名作为参数加入到app下的main.js这个配置文件的最后一行里面。

dist目录:

ashin@ubuntu:~/test/yeomantest/dist$ ls
404.html          favicon.ico  robots.txt  styles
bower_components  index.html   scripts

把他复制到你需要地方后,对HTML进行dist下文件名引用的修改就行了。

如果您觉得从我的分享中得到了帮助,并且希望我的博客持续发展下去,请点击支付宝捐赠,谢谢!

若非特别声明,文章均为阿小信的个人笔记,转载请注明出处。文章如有侵权内容,请联系我,我会及时删除。

#WEB/前端#  
分享到:
阅读[857] 评论[0]

你可能也感兴趣的文章推荐

本文最近访客

发表评论