使用Yeoman你必须要知道的

标签：angularjs   grunt.js   框架   前端   bootstrap   

不得不说，这年头写JS程序变得越来越复杂了。虽然大家都为了让写JS变得更简单而创建框架、创建工具，但是感觉已经开始偏离了最初的目的。

今天来说说Yeoman，一帮人为了让写AngularJS程序更高端智能而创建的一个工具。可以利用简单的命令行操作帮你初始化一个Angular App，CSS、图片、View和JS应该放哪都帮你决定好了，连复杂的Grunt都帮你配好了。前端同志只要用”grunt serve“就可以预览你的Web App而不用配置Web服务器，用"grunt build"就可以导出经过压缩的CSS/HTML/JS甚至是图片，连路径都帮你改好了，岂不是很酷！

但是！决定用它就需要知道以下几点：

1. 配置麻烦。新机需要装：
   • Node.js & NPM
   • Grunt Cli
   • Bower
   • Git Bash
   • 部分Mac需要全局装某个Karma的NPM包
     关于这个问题我已经忘了包的名字，但当时运行grunt test做单元测试的时候总是给我报找不到karma任务的错误，头疼的很，最终是在stackoverflow上找到一个老兄的建议而解决的。
   • Yeoman
   • 对应的generator包，如Angular用generator-angular包
   以上除了Node和Git之外其余都可用npm命令完成。很多npm包的源都在github上，所以碰到网不好的很容易杯具。
   装完之后用yo命令初始化项目，根据你的选项最后会运行bower install和npm intall命令来自动获取项目所以依赖的包。但根据我几次使用的经验，通常都会碰到奇怪的问题而导致失败，然后自己还得手动运行bower install和npm install命令……这配置过程真漫长
   
   
2. 想要不根据Yeoman初始化给你的路径来，你就得好好改GruntFile了。根据GruntFile的内容，可以知道在grunt build压缩和导出文件时：
   
   • /app/styles/font里的文件会被拷到/dist/fonts，svg文件会被压缩，但是不认子目录下文件
   • /app/images里的图片文件会被压缩拷贝到/dist/images，但是对格式有所筛选
   • HTML是只压缩拷贝读取/app根目录和/app/views目录及其子目录下文件
   • CSS和JS则是根据你在index.html引用文件的代码和用注释配置的目标文件来压缩合并
   • 其中bower获取的包会由Grunt的一个任务根据你的bower.js来将对JS和css的引用写入index.html里
   改GruntFile的时候，再次对谷歌的同志五体投地，这思路……我之前还没写过这么长的Grunt配置文件
   
   
3. 用复制黏贴的方式拷贝转移项目需要注意。
   拷贝项目文件夹到另一台机器内最好不要包括node_components文件夹，拷过去后再运行一遍npm install命令确保程序能运行。
   在windows机器中拷贝和删除node_components文件夹很有可能遇到因为路径过长或者文件名过长这种很微妙的问题。
   另外因为node_components文件夹真的比较大。本来要用十分钟去压缩的文件夹，删掉压缩瞬间就好了……
   
   
4. 文件路径的问题：
   
   • 前面说到/app/styles/font里的文件会被拷到/dist/fonts，那就造成了字体文件路径的更改。
     Yeoman是用grunt-usemin来扫描更改文件里的路径，但默认的配置是将用<!--build:...--><!--endbuild-->标记包起来的文件们拷到指定路径后进行处理的。
     也就是说你把css和js的引用不放在该标记内，build时这文件既不会被导出到dist文件夹内，也不会被压缩进某个文件内，更不会自动更改文件内字体文件引用的路径。
   • 观察一下index.html就可以发现通过bower引用的文件，路径是以"bower_compoenents/"开头，而在/app/styles里的CSS文件路径是以"styles"开头，/app/scripts里的JS文件的路径是以"scripts"开头的。
     问题就来了。你在用grunt运行你的app是没有问题的，因为人家配置了很多grunt任务来对路径进行处理。那么如果说在前后端开发人员合作时，后端人员有必要在他的机器上添加修改你的代码源文件，那就麻烦了……
     
     
5. 运行yo angular来初始化angular项目时会先问要不要用SASS，然后在问要不要用bootstrap。
   • 槽点一：好吧，虽然个人比较喜欢SASS，但是bootstrap对less的支持更好，SASS版本貌似没文档？
     
   • 槽点二：结果用bower智能下下来bootstrap的CSS版本，既不没有SASS也么有Less。
   • 槽点三：bootstrap的JS对angular支持性不好，真要用还得搞个angular-ui出的angular-bootstrap。

使用Yeoman你必须要知道的

标签：angularjs   grunt.js   框架   前端   bootstrap   

原文地址：http://blog.csdn.net/jennieji/article/details/39435947