文档章节

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

YipChooli
 YipChooli
发布于 2015/03/28 09:23
字数 1887
阅读 764
收藏 1

在要开始构建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项目工具箱,让你灵活配置自己的行装。万一如果你找不到自己想要的,也可以自行编写。 


© 著作权归作者所有

YipChooli
粉丝 17
博文 12
码字总数 11566
作品 0
广州
私信 提问
【AngularJs学习笔记四】Grunt+Bower+Requirejs+Angular

AngularJs学习笔记 【AngularJs学习笔记一】Bower解决js的依赖管理 【AngularJs学习笔记二】Yeoman自动构建js项目 【AngularJs学习笔记三】Grunt任务管理器 【AngularJs学习笔记四】Grunt +...

陶邦仁
2016/01/25
923
0
前端工程化——构建工具选型

注:文章源于2017年8月的一次内部分享,部分数据可能已经过时。 一、什么是前端工程化 前端工程化是依据业务特点,将前端开发的规范、流程、技术、工具、经验等形成规范并建立成一种标准的体...

Bellhe
2018/01/08
0
0
gulp完全开发指南 => 快来换掉你的Grunt吧

最近一直在构建Angular应用,通过bower管理前端包依赖,然后通过gulp和它配合.发现gulp相比于grunt真的很轻,现在我的项目中已经取代了grunt.这里把我的一些实践记录下来和大家分享一下. gulp定...

顽Shi
2014/06/03
1K
3
如何挑选适合的前端框架?

最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架。 每次新开业务线或启动新项目时,首先第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法。 ...

kongjiea
2015/05/18
0
0
前端工程化系列[02]-Grunt构建工具的基本使用

本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况、安装、使用和常见插件的安装、配置和使用等内容。 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具。对于需要反复重...

文顶顶水水
2018/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
6
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部