Emberjs 上手 - 使用Grunt进行项目组织与创建

浏览数：39 / 时间：2015年06月09日

在要开始构建Emberjs的应用前，首先考虑一个可以组织和管理好整个JavaScript项目的方法和工具，可以使用Ember-cli，也可以使用通用的JavaScript的构建工具Grunt。

为什么需要这样的工具呢？原因是软件项目的开发与管理离不开良好的代码组织方法与管理工具的使用，特别是团队开发人员多，项目结构复杂时，技术的组织管理就会是一个挑战。好比盖一幢楼房，如果不能够有效地管理建筑材料、工人与施工进度时，那么工程质量与交付就无法得到保障了。

Grunt 的功能

好了，现在来看看使用Grunt有些什么好处吧，

1. 支持在Linux及Windows上的命令行操作，无需界面

2. 自定义任务Task，可以完成各种软件项目的工作（包括创建、编译、压缩、测试等常见的需求）

3. 支持第三方插件，已经形成覆盖JavaScript软件项目的完整的生态系统，并且不断更新。
详细的插件库资料可以浏览 http://gruntjs.com/plugins

4. 由于被广泛支持，很多出名的JS框架都可以在grunt插件库里找到相应的可用插件

5. 使用JSON格式配置项目，实现灵活、简便，可以适合几乎任何项目的文件目录结构

环境安装

步骤1：安装npm

由于Grunt和Gurnt插件的安装和管理都是通过npm在进行, 所以你需要先安装npm, 也就是Node.js的包管理工具到你的电脑上。安装请点击 http://nodejs.org/, 下载安装包到你的电脑上安装好, 然后打开命令窗口，输入 npm help

[email protected] C:\Program Files\nodejs\node_modules\npm

你应该可以看到想用的版本信息，恭喜你，npm安装已经完成了

步骤2：安装Grunt CLI

接下来，你需要安装Grunt CLI，在命令窗口下输入

npm install -g grunt-cli

安装完毕后，你可以输入 grunt命令来查看版本信息。

grunt-cli: The grunt command line interface. (v0.1.13)

如果你看到类似上面的信息，你就完成了grunt cli的安装了

步骤3： Emberjs 项目目录结构

一个好的JS项目离不开好的目录结构，你可以根据自己的需要来配置目录名和层次。而在Ember项目里，由于Ember的设计特性会影响到你的功能结构组织方式，因此在这里我们采用以下的目录树结构作为一个例子供项目参考

这些目录未必你都用得着，但我们就拿它来作为一个普通的JS项目吧。对于多数的中大型项目来说，项目的模块化、组件化是整个项目结构的设计方向，主要目的是做到易于管理、可重用和方便测试。而Ember世界的设计理念为项目提供了这些组织结构, 我们可以把路由、控制器和模板分别放在不同的文件下。

技术分享

步骤4：创建Grunt配置文件

接下来，你需要创建一些Grunt的配置文件，以便可以使用Grunt来管理、编译、测试你的项目。先移到/scripts目录下，创建一下的文件

package.json文件

这是用于描述项目的metadata文件，内容如下

{
  "name": "Sample Project",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.5",
  }
}

Gruntfile.js文件

接着，要创建任务配置文件，内容如下

module.exports = function (grunt) {
    //configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
    });
    //tasks
    grunt.registerTask(‘default‘, []);
};

保存文件后，打开命令行，输入 npm install 该命令会读取package.json文件并找到依赖的工具 grunt 0.4.5并安装。如果没有错误信息，你就可以得到一个新的目录生成

/scripts
|_node_modules

步骤5：插件安装

要完成项目创建、编辑、压缩、测试等工作，你还需要各种插件，安装到你的项目里。

grunt-contrib-concat 合并插件

输入以下命令安装该插件，它的作用是把数个分割的js文件合并成一个

npm install grunt-contrib-concat --save-dev

上面的命令的参数 --save-dev 是让npm在安装完插件后同步跟新package.json元数据信息。

命令运行完成后，你可以看到grunt-contrib-concat被安装到你的机器上，打开package.json文件，看到以下信息

“grunt-contrib-concat”： “^0.5.0”

grunt-contrib-jshint 代码检验插件

输入以下命令安装该插件，它的作用是扫描你的代码并找到潜在的bug，并给出提示

npm install grunt-contrib-jshint --save-dev

命令运行完成后，你可以看到grunt-contrib-jshint被安装到你的机器上，打开package.json文件，看到以下信息

"grunt-contrib-jshint": "^0.10.0"

grunt-contrib-uglify压缩插件

输入以下命令安装该插件，它的作用是压缩你的js文件，并提供一定程度的加密

npm install grunt-contrib-uglify --save-dev

命令运行完成后，你可以看到grunt-contrib-uglify被安装到你的机器上，打开package.json文件，看到以下信息

"grunt-contrib-jshint": "^0.6.0"

grunt-ember-templates Ember模板插件

输入以下命令安装该插件，

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

命令运行完成后，你可以看到grunt-ember-templates被安装到你的机器上，打开package.json文件，看到以下信息

"ember-template-compiler": "^1.9.0-alpha","grunt-ember-templates": "^0.5.0-alpha","handlerbars": "^2.0.0"

步骤6：配置Grunt任务

完成插件的安装后，你就可以根据自己的目录结构来配置任务了。以下是供参考的任务配置例子

function config (name) {
    return require(‘./‘+name+‘.js‘);
}

module.exports = function (grunt) {
    //configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        concat: config(‘concat-build‘),
        jshint: config(‘jshint-build‘),
        emberTemplates: config(‘template-build‘)
    });

    //load
    grunt.loadNpmTasks(‘grunt-contrib-concat‘);
    grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
    grunt.loadNpmTasks(‘grunt-ember-templates‘);

    //tasks
    grunt.registerTask(‘default‘, [‘concat‘, ‘jshint‘, ‘emberTemplates‘]);

};

这里面按顺序加载了3个任务，分别是 concat, jshint 及 emberTemplates。每个任务都需要一个独立的配置文件，并放在与package.json相同目录下。参考以下写法

concat-build.js文件

module.exports = {
      
      option: {
         separator: ‘\n‘
      },
      
      basic_and_extras: {
        files: {
          ‘scripts/app/components.js‘: [‘scripts/app/components/**/*.js‘],
          ‘scripts/app/controllers.js‘: [‘scripts/app/controllers/**/*.js‘],
          ‘scripts/app/helpers.js‘: [‘scripts/app/helpers/**/*.js‘],
          ‘scripts/app/models.js‘: [‘scripts/app/models/**/*.js‘],
          ‘scripts/app/app.js‘: [‘scripts/app/routes/**/*.js‘]
         }
      }
      
}

* 这里的separator作用是分割每个JS文件的内容

jshint-build.js文件

module.exports = {

       files: [‘Gruntfile.js‘,
               ‘scripts/components/*.js‘,
               ‘scripts/controllers/*.js‘,
‘scripts/helpers/*.js‘,
               ‘scripts/locale/*.js‘,
               ‘scripts/models/*.js‘,
               ‘scripts/routes/*.js‘,
               ‘scripts/templates/**/*.js‘
       ],

       options: {
           globals: {
               jQuery: true,
               console: true,
               modules: true
           }

       }

}

template-build.js文件

module.exports = {

compile: {
options: {
templateName: function(sourceFile){
return sourceFile.replace(/scripts\/templates\//, ‘‘);
}
},
files: {
‘scripts/admin/templates.js‘: [‘scripts/templates/**/*.hbs‘]
}
}

}