yeoman生成工程
1 安装npm
执行命令:
curl -L https://npmjs.org/install.sh | sh
如果安装中出现错误 在命令前加sudo
2 安装yo
执行命令:
npm install -g yo
这时可能也会出现错误,试一下用sudo安装
但是我在安装的时候出现错误,用npm安装的全局软件都装在了用户的目录下/home/liuqing/lib/npm/node_modules
使用 npm root查看一下路径:/home/liuqing/node_modules
使用npm root -g :/home/liuqing/lib/npm/node_modules(这是一个错误的路径)
解决办法:执行命令
echo "export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules" >> ~/.bashrc && source ~/.bashrc
所有用npm -g安装的东西都安装到文件目录/usr/local/lib/node_modules下
3 安装grunt
执行命令:
sudo npm install -g grunt
执行命令 grunt -v 查看grunt是否装好
4 安装bower(包管理器)
执行命令:
sudo npm install -g bower
执行命令 bower -v 查看bower是否装好
bower是一个包管理器,如果想在工程中加入某一个功能包,可以用bower来安装,安装方法:
执行命令:
bower install file_name
5 安装generator-angular
执行命令
npm install -g generator-angular
也可以在创建工程的文件目录下通过yo创建,选择angular生成器,但是这种方法可能会出现错误,出现错误的话就用上面的npm安装
6 使用yeoman创建工程:
cd projecgt 打开创建工程的文件目录 mkdir angular 创建一个新的文件夹用于存放创建的工程 cd angular 打开工程文件
在该文件目录下使用angular生成器
yo angular(或者执行 yo 选择 Run the Angular generator)
提醒 Would you like to use Sass (with Compass)? (Y/n) n
提醒 Would you like to include Bootstrap? (Y/n) y
工程将会自动生成
执行命令
grunt server
将会打开服务器,我在执行这个命令的时候出现错误,grunt的依赖包没有完全安装
执行命令
grunt install
将会安装
7 yeoman创建的工程不支持haml文件,要用haml写的话必须引入haml转化为html的文件包
执行命令:
npm install grunt-haml
找到Gruntfile.js文件
添加以下内容:
module.exports中加入: grunt.loadNpmTasks('grunt-haml'); grunt.initConfig的watch中加入: haml: { files: ['<%= yeoman.app %>/views/*'], tasks: ['haml'] }, grunt.initConfig 中加入: haml: { activity: { src: "app/views/activity.haml", dest: "app/views/activity.html" }, }(作用是使每一个haml转化成html,所以在创建一个haml文件的时候就要在grunt.initConfig 中添加该haml向html的转化)
但是我在做的时候创建一个haml不能自动加载成对应的html文件,然后在grunt.registerTask('build', [])中添加'haml',这样问题就解决了。