Windows下Ember应用开发环境搭建

作者： Jun Yang – Aug 14, 2013

环境：windows 7

安装nodejs

安装grunt

安装grunt命令行工具grunt-cli

执行全局安装

1
2
3
4

  # grunt 必须依赖
  npm install -g grunt-cli
  # 生成项目脚手架 grunt-init --help
  npm install -g grunt-init

安装Yeoman

Yeoman 是 yo + bower + grunt

• yo: 生成 项目脚手架
• bower: 包管理工具

1

  npm install -g yo

自动安装grunt 和 bower

1
2

  # 生成项目脚手架
  npm install -g generator-webapp

准备项目文件夹

创建项目文件夹

安装grunt及插件，安装在项目根目录

进入项目根目录

1
2

  npm install grunt --save-dev
  npm install grunt-contrib-qunit --save-dev

验证版本 grunt -version

1
2

  grunt-cli v0.1.9
  grunt v0.4.1

创建一个项目脚手架代码

1

  yo wabapp

查看目录下的文件，自动生成 package.json 和 Gruntfile

安装依赖的模块

1

  npm install

运行

1

  grunt server --force

http://localhost:9000 出现欢迎页面

与ember集成

下载ember相关包

1

  bower install ember

app 目录下自动生成 bower_components

安装模版编译插件

1

  npm install grunt-ember-templates --save-dev

建立模版文件夹 templates

1

  mkdir app/templates

修改Gruntfile.js 自动编译模版

在Gruntfile.js文件添加

1

  grunt.loadNpmTasks('grunt-ember-templates');

在grunt.initConfig内添加

1
2
3
4
5
6
7
8
9
10
11
12

emberTemplates: {
  compile: {
    options: {
      templateName: function(sourceFile) {
        return sourceFile.replace(/app\/templates\//, '');
      }
    },
    files: {
      "<%= yeoman.app %>/scripts/templates.js": ["<%= yeoman.app%>/templates/**/*.handlebars"]
    }
  }
},

在 watch处添加如下内容：

1
2
3
4

emberTemplates: {
    files: '<%= yeoman.app %>/templates/**/*.handlebars',
    tasks: ['emberTemplates']
},

最后添加emberTemplates到server任务

1
2
3
4
5
6
7
8
9
10

grunt.registerTask('server', function (target) {
    ...
    grunt.task.run([
        ...
        'compass:server',
        ' emberTemplates', // Add this line.
        'livereload-start',
        ...
    ]);
});

开发一个简单应用

在app/scripts/main.js 中 添加如下代码

1
2
3
4
5
6
7

App = Em.Application.create({
  rootElement: $('#app'),
});

App.Router.map(function(){
  this.route('about');
});

在 index.html

1
2

 <div id="app" class="container">   
 </div>

添加js文件

1
2
3
4
5
6

  <script src="bower_components/jquery/jquery.js"></script>       
  <script src="bower_components/handlebars/handlebars.js"></script>
  <script src="bower_components/ember/ember.js"></script>

  <script src="scripts/main.js"></script>
  <script src="scripts/templates.js"></script>

建立模版

在 app/templates目录下建立模版文件

• application.handlebars

1
2

  <h1>My App</h1>
  {{outlet}}

• index.handlebars

1
2
3

  <h1>My App</h1>
  <h1>index</h1>
  {{#linkTo "about"}}About{{/linkTo}}

• about.handlebars

1
2

  <h1>About</h1>
  {{#linkTo "index"}}index{{/linkTo}}

运行

1

  grunt server --force

http://localhost:9000 出现欢迎页面，内容如下：

My App index About

下一步，修改 grunt Gruntfile.js

对components、controllers、models、routes、views等js文件进行合并和压缩。