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

相关推荐