grunt急迅入门

迅速入门

Grunt和 Grunt
插件是透过 npm 安装并管制的,npm是 Node.js 的包管理器。

Grunt 0.4.x 必须合作Node.js >= 0.8.0本子选择。;奇数版本号的 Node.js
被认为是不安定的开发版。

在装置 Grunt
前,请确定保障当前条件中所安装的 npm 已经是新型版本,执行 npm update -g npm 指令实行升级换代(在一些系统中或许必要 sudo 指令)。

假设您早就设置了
Grunt,未来急需参考一些文书档案手册,那就请看一看 Gruntfile 实例 和如何 配置职分吧。

安装 CLI

还在运用 Grunt 0.3 版本吗?请查看 Grunt 0.3
注意事项

在三番五次攻读前,你须求先将Grunt命令行(CLI)安装到全局环境中。安装时或许要求选取sudo(针对OSX、*nix、BSD等系统中)权限也许当做管理员(对于Windows环境)来执行以下命令。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被参加到你的种类路径中了,未来就可以在任何目录下实施此命令了。

注意,安装grunt-cli并不等于安装了 Grunt!Grunt
CLI的任务一点也不细略:调用与Gruntfile在平等目录中
Grunt。那样带来的补益是,允许你在同三个系统上同时设置七个本子的 Grunt。

如此就能让八个本子的 Grunt 同时设置在平等台机器上。

CLI 是什么工作的

每一次运维grunt 时,他就接纳node提供的require()系统查找本地安装的
Grunt。便是由于那第1建工公司制,你能够在品种的任意子目录中运作grunt 。

假诺找到一份本地安装的
Grunt,CLI就将其加载,并传递Gruntfile中的配置新闻,然后实施你所钦点的义务。为了更好的精通Grunt
CLI的推行原理,请开卷源码

拿一份现有的 Grunt 项目练手

若果Grunt
CLI已经不错安装,并且一度有一份配置好package.json 和 Gruntfile 文件的品类了,接下去就很简单拿Grunt练手了:

  1. 将命令行的当前目录转到项指标根目录下。
  2. 执行npm install命令安装项目注重的库。
  3. 执行 grunt 命令。

OK,正是这样简单。还足以经过grunt --help 命令列出富有已设置的Grunt职责(task),不过一般更提出去查看项指标文书档案以博得协理消息。

防患未然一份新的 Grunt 项目

诚如须要在你的种类中添加两份文件:package.json 和 Gruntfile

package.json:
此文件被npm用以存储项目标元数据,以便将此项目揭发为npm模块。你能够在此文件中列出档次依赖的grunt和Grunt插件,放置于devDependencies安顿段内。

Gruntfile:
此文件被取名为 Gruntfile.js 或 Gruntfile.coffee,用来布置或概念职务(task)并加载Grunt插件的。 此文书档案中关系的 Gruntfile 其实说的是三个文件,文件名是 Gruntfile.js 或Gruntfile.coffee

package.json

package.json相应放置于项指标根目录中,与Gruntfile在平等目录中,并且应该与类型的源代码一起被提交。在上述目录(package.json随处目录)中运转npm install将依据package.json文本中所列出的种种注重来机关安装适当版本的注重。

上边列出了二种为你的档次创设package.json文件的格局:

  • 大部分 grunt-init 模版都会活动成立特定于项指标package.json文件。
  • npm
    init
    命令会创设贰当中坚的package.json文件。
  • 复制上面包车型客车案例,并依据须要做扩张,参考此说明.

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

安装Grunt 和 grunt插件

向已经存在的package.json 文件中添加Grunt和grunt插件的最不难易行方法是通过npm install <module> --save-dev一声令下。此命令不光安装了<module>,还会自行将其添加到devDependencies 配置段中,服从tilde
version range
格式。

例如,上面那条命令将设置Grunt最新版本到品种目录中,并将其添加到devDependencies内:

npm install grunt --save-dev

平等,grunt插件和任何node模块都能够按相同的艺术安装。上面浮现的实例正是设置
JSHint 职分模块:

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

在 Grunt 插件 页面能够观望近来可用的
Grunt 插件,他们得以一贯在品种中安装并利用。

设置插件之后,请务必确认保障将革新之后的 package.json 文件提交到项目仓库中。

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 文件是立竿见影的 JavaScript 或
CoffeeScript
文件,应当放在你的档次根目录中,和package.json文件在同一目录层级,并和类型源码一起投入源码管理器。

Gruntfile由以下几有的组成:

  • “wrapper” 函数
  • 品类与任务布署
  • 加载grunt插件和职务
  • 自定义任务

Gruntfile文件案例

在上面列出的那些 Gruntfile 中,package.json文件中的项目元数据(metadata)被导入到
Grunt
配置中, grunt-contrib-uglify 插件中的uglify 职分(task)被布署为缩减(minify)源码文件并依据上述元数据动态变化三个文书头注释。当在指令行中执行 grunt 命令时,uglify 职责将被私下认可执行。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);

};

前边已经向您来得了全套 Gruntfile,接下去将详细分解在那之中的每一有个别。

“wrapper” 函数

每一份 Gruntfile (和grunt插件)都服从平等的格式,你所书写的Grunt代码必须放在此函数内:

module.exports = function(grunt) {
  // Do grunt-related things in here
};

花色和任务安插

多数的Grunt职务都凭借某个配置数据,那几个数量被定义在3个object内,并传递给grunt.initConfig 方法。

在上边包车型大巴案例中,grunt.file.readJSON('package.json') 将积存在package.json文件中的JSON元数据引入到grunt
config中。
由于<% %>模板字符串能够引用任意的安顿属性,由此得以因此那种格局来内定诸如文件路径和文件列表类型的安顿数据,从而缩小一些再度的工作。

你能够在那些布局对象中(传递给initConfig()方法的指标)存款和储蓄任意的多寡,只要它不与您任务安排所需的习性争执,不然会被忽视。其它,由于那小编正是JavaScript,你不仅仅限于使用JSON;你能够在此处运用任意的灵光的JS代码。就算有必不可少,你还能够以编制程序的法子生成配置。

与超越48%task一样,grunt-contrib-uglify 插件中的uglify 职分供给它的安插被钦赐在3个同名属性中。在这边有3个事例,
大家钦赐了三个banner慎选(用于在文书顶部生成1个阐明),紧接着是三个纯粹的名为build的uglify目的,用于将三个js文件减少为二个对象文件。

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

加载 Grunt 插件和职分

像 concatenation、[minification]、grunt-contrib-uglify 和 linting那么些常用的职分(task)都曾经以grunt插件的款式被开发出来了。只要在 package.json 文件中被列为dependency(正视)的包,并由此npm install设置之后,都足以在Gruntfile中以简练命令的花样利用:

// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');

注意: grunt --help 命令将列出全数可用的任务。

自定义职务

因而定义 default 任务,能够让Grunt默许执行一个或多个义务。在底下的那一个案例中,执行 grunt 命令时只要不内定二个任务的话,将会实行uglify任务。那和执行grunt uglify 或者 grunt default的效果等同。default职分列表数组中能够钦点任意数目标职责(能够带参数)。

// Default task(s).
grunt.registerTask('default', ['uglify']);

假定Grunt插件中的职务(task)无法知足你的门类须求,你还足以在Gruntfile中自定义职务(task)。例如,在底下的 Gruntfile 中自定义了3个default 义务,并且她竟然不借助职分布署:

module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

特定于项目标天职不必在 Gruntfile 中定义。他们得以定义在表面.js 文件中,并通过grunt.loadTasks格局加载。