CoffeeScriptGrunt入门

敏捷入门

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。正是由这同一体制,你可以于列之任意子目录中运行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任务还指某些配置数据,这些数量让定义在一个object内,并传递给grunt.initConfig
方法。
于脚的案例中,grunt.file.readJSON(‘package.json’)
将积存在package.json文件中之JSON元数据引入到grunt config中。 由于<%
%>模板字符串可以引用任意的布置属性,因此得以由此这种方式来指定诸如文件路径和文件列表类型的安排数据,从而减少部分复的行事。
汝得以斯布局对象中(传递让initConfig()方法的对象)存储任意的数目,只要其不跟汝任务部署所需要的习性冲突,否则会给忽视。此外,由于当下自便是JavaScript,你不光限于使用JSON;你可于这里运用任意的管事之JS代码。如果起必要,你居然可以为编程的艺术转配置。
以及大多数task一样,grunt-contrib-uglify
插件中的uglify 任务要求它们的配备于指定在一个以及名属性中。在此发生一个例子,
我们指定了一个banner选项(用于在文件顶部生成一个诠释),紧接着是一个十足的叫也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
被自定义了一个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方加载。