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

在要开始构建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

npm@1.4.28 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的设计特性会影响到你的功能结构组织方式，所以在这里咱们采用如下的目录树结构做为一个例子供项目参考

/scripts
   |_app
     |_components
       |_sample-comp.js
     |_controllers
       |_sample-controller.js
     |_helpers
     |_models
     |_routes
       |_sample-route.js
     |_styles
     |_templates
       |_sample.hbs
     |_views

这些目录未必你都用得着，但咱们就拿它来做为一个普通的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']
        }
    }

}

 

步骤7：运行Grunt任务

当完成上述全部配置后，你就能够运行Grunt任务了。打开命令窗口，并进入到你的项目目录，也就是上述的Gruntfile.js所在文件夹，而后输入如下命令

grunt

正常状况下，你将看到如下信息

Running "concat:option" (concat) task

Running "concat:basic_and_extras" (concat) task
File scripts/components.js created.
File scripts/controllers.js created.
File scripts/app.js created.

Running "jshint:files" (jshint) task
>> 34 files lint free.

Running "emberTemplates:compile" (emberTemplates) task
File "scripts/templates.js" created.

Done, without errors.

 

若是你的JS文件出错，将会获得相关的提示信息。

 

总结

Grunt的插件可让你完成几乎任何的项目任务，你能够到Grunt的官方网站去找你想要的插件，他就像你的JS项目工具箱，让你灵活配置本身的行装。万一若是你找不到本身想要的，也能够自行编写。