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'，这样问题就解决了。

yeoman生成工程

相关推荐