创建插件

创建插件主要有以下几个步骤:

(1)通过 npm install -g grunt-init 命令安装 grunt-init 。
(2)通过 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin 命令安装grunt插件模版。
(3)在一个空的目录中执行 grunt-init gruntplugin 。
(4)执行 npm install 命令以准备开发环境。
(5)为你的插件(任务)书写代码。
(6)执行 npm publish 命令将你创建的 Grunt 插件(任务)发布到npm!

注意:你的task命名,"grunt-contrib" 命名空间保留给 Grunt 团队维护的task使用,请给你自己的task起一个合适名字,避免使用被保留的命名空间。

Grunt默认隐藏了error stack traces,但是可以通过 --stack 参数启用,方便你调试自己的task。如果你希望 Grunt 在出现错误时总是能记录下stack trace,可以在你的shell中创建一个命令别名(alias)。例如,在bash中,可以通过 alias grunt='grunt --stack' 命令创建一个别名。这样,你执行grunt时,其实就是在执行grunt --stack。

默认情况下,包含gruntfile文件的目录被设置为当前工作目录。用户可以在自己的gruntfile中通过执行grunt.file.setBase() 改变当前工作目录。

安装Grunt

Grunt 和 Grunt 插件应当在项目的package.json文件中的devDependencies小节中定义。这样就可以通过一个命令将当前项目依赖的模块安装完毕:npm install。当前 Grunt 的稳定版本和开发版本都会在项目的wiki页面中列出。

如果你需要某个特定版本的 Grunt 或 Grunt 插件,执行npm install grunt@VERSION --save-dev 命令,其中VERSION代表你所需要的版本。这样就安装完成了,然后将其添加到package.json文件中的devDependencies小节中。package.json文件中出现的将是波浪线标记的版本范围 。

随着新功能被开发出来,Grunt 会被定期的发布到npm上。如果不指定版本号,这种构建的版本是 根本 不会被安装的。

所以我们必须指定版本,跟安装指定版本的 Grunt 一样,执行npm install grunt@VERSION --save-dev命令,其中VERSION 是你指定的版本,npm将在项目目录中安装此版本的grunt,并将其添加到package.json文件中的devDependencies小节。

注意,不管你指定的是什么版本,都将按照[波浪线标记的版本范围]将其添加到package.json文件中。这个危害很大,当指定的开发版出现新版本,尤其是不兼容的patch版本时,也会被npm安装,这就有可能扰乱你的项目,使其无法编译。

一旦出现这种情况,最重要的是要手工编辑 package.json文件,将 ~ (tilde)从版本号中去除掉。这样就能锁定到你所指定的某个具体的开发版本了。这个技巧同样可以用于安装已经发布的 Grunt 插件的开发版本。

当然,你也可以从github上直接安装,这样将可以确保你的项目永远使用一个精确版本的grunt。

常见问题

Grunt可以在Windows上工作吗?

Grunt可以很好的在windows上工作,因为Node.js和npm都能够很好的在windows上工作。通常情况下,问题在于Cygwin,因为它捆绑着一个较老版本的Node.js。

避免这个问题最好的办法是使用msysGit installer安装二进制的git和使用Node.js installer去安装二进制的node和npm,然后使用内置的Windows command prompt 或 PowerShell 去替代Cygwin。

如何启用shell中的tab键自动补全功能?
为了给grunt增加tab键自动补全功能,可以在你的~/.bashrc文件中添加下面一行代码:

eval "$(grunt --completion=bash)"
当然,你已经使用npm install -g grunt,在全局安装好了Grunt,因为Grunt目前仅支持bash命令。

我如何让多个任务共享参数?
虽然每个任务可以使用它自己的参数,但是,这里有几个方法允许你在多个task中共享参数。

(1)"动态的" 任务别名

这是多个任务共享参数的首选方法

一个普通的task可以使用grunt.task.run方法来执行。在下面这个例子中,在命令行中执行grunt build:001,最终效果是执行foo:001、bar:001 和 baz:001这三个task。

grunt.registerTask('build', 'Run all my build tasks.', function(n) {
  if (n == null) {
    grunt.warn('Build num must be specified, like build:001.');
  }
  grunt.task.run('foo:' + n, 'bar:' + n, 'baz:' + n);
});

(2)选项

多个任务共享参数的方式可以使用grunt.option。在下面这个例子中,在命令行中执行grunt deploy --target=staging会让grunt.option('target')返回"staging"。

grunt.registerTask('upload', 'Upload code to specified target.', function(n) {
  var target = grunt.option('target');
  // do something useful with target here
});
grunt.registerTask('deploy', ['validate', 'upload']);

注意,布尔类型的参数可以使用一个没有值的键。例如,在命令行中执行grunt deploy --staging会让grunt.option('staging') 返回true。

(3)全局和配置

在其他情况下,你可能希望暴露一个配置的值或者全局的值。 在这种情况下,可以在注册任务时设置其参数作为一个全局对象的值或者项目配置的值。

在下面的例子中,在命令行运行grunt set_global:name:peter set_config:target:staging deploy,会导致global.name的值为"peter"以及grunt.config('target')将会返回"staging"。因此,deploy任务就可以使用这些值。

grunt.registerTask('set_global', 'Set a global variable.', function(name, val) {
  global[name] = val;
}); grunt.registerTask('set_config', 'Set a config property.', function(name, val) {
  grunt.config.set(name, val);
});

为什么我得到一个调用栈大小超过最大值的错误?
你可能用普通的任务名创建了一个别名任务, 比如: grunt.registerTask('uglify', ['uglify:my_target']); 应该改成: grunt.registerTask('myUglify', ['uglify:my_target']);。

我怎么样才能移除我不想要的插件?
至少有两种方法解决:

第一种方法是通过npm remove [GRUNT_PLUGIN] --save-dev这个命令来移除,这将会从你的package.json文件中以及node模块包中移除。

你也可以从package.json文件中删除这个插件,然后运行npm prune。

在Windows的 Grunt 0.3中,为什么当我尝试运行grunt时我的JS编辑器会打开?

如果你在Gruntfile所在的目录中,当你输入grunt时Windows会尝试去执行那个文件。因此你需要输入grunt.cmd。

另一个选择是使用DOSKEY命令去创建一个Grunt宏,这样就可以使用grunt替代grunt.cmd了。

可以使用所示如下的DOSKEY命令:DOSKEY grunt=grunt.cmd $*

加油!

grunt入门讲解5:创建插件,安装Grunt以及常见问题的更多相关文章

  1. grunt入门讲解4:如何创建task(任务)

    每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情. 如果你没有指定一个任务,并且你已经定义一个名为 "default" 的任务, ...

  2. grunt入门讲解3:实例讲解使用 Gruntfile 配置任务

    这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify      grunt-contrib-qunitgrunt-contrib-concatgrun ...

  3. grunt入门讲解1:grunt的基本概念和使用

    Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...

  4. grunt入门讲解2:如何使用 Gruntfile 配置任务

    Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要包括以任务名称命名的属性,和其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相 ...

  5. Grunt入门学习之(1) -- 环境安装

    Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...

  6. grunt入门讲解6:grunt使用步骤和总结

    Grunt是啥? 很火的前端自动化小工具,基于任务的命令行构建工具. Grunt能帮我们干啥? 假设有这样一个场景: 编码完成后,你需要做以下工作 HTML去掉注析.换行符 - HtmlMin CSS ...

  7. grunt入门讲解7:项目脚手架grunt-init

    grunt-init是一个用于自动创建项目脚手架的工具.它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构.至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给 ...

  8. cordova 环境配制和创建插件

    环境配制 英文网站:http://cordova.apache.org/ 中文网站:http://cordova.axuer.com/ 安装Cordova Cordova的命令行运行在Node.js ...

  9. grunt的使用方法,环境配置和插件安装

    虽然现在grunt的用的越来越少了,但是插件数量还是相当多的,另外grunt和gulp的使用相当相似: grunt需要安装node和npm 验证node是否安装:node -v 验证npm是否安装:n ...

随机推荐

  1. ExcelVBA实现一键生成word文字报告及批量操作[原创]

    在很多工作中,经常需要写一些类似的报告,使用同一个模板,只是里面的数据不同,人工操作工程量大且容易出错,如果能用程序直接实现可以省去不少麻烦. 本文使用ExcelVBA实现,主要思路是使用word邮件 ...

  2. SSM整合思路

    引自网友: https://zhuanlan.zhihu.com/p/23917781

  3. JavaWeb基础—JDBC(二)事务与批处理

    一.批处理 这里给出PrepareStatement的示例,优点是可以发送预编译的SQL,缺点是SQL语句无法更换,但参数可以更换 批处理:多条语句的处理 mysql默认是关闭的,要打开需要在url后 ...

  4. 2015306 白皎 《网络攻防》Exp4 恶意代码分析

    2015306 白皎 <网络攻防>Exp4 恶意代码分析 netstat [Mac.Linux.Win] sysinteral [MS]:1 2 3 一.系统监控--Windows计划任务 ...

  5. 20145226 2016-2017-2 夏艺华 《Java程序设计》 课程总结

    20145226夏艺华 <Java程序设计>课程总结 每周读书笔记链接汇总 第一周读书笔记 了解Java编程风格,认识Java的类型与变量,掌握Java流程控制的方法(分支.循环). ht ...

  6. 20145234黄斐《网络对抗技术》实验九、Web安全基础实践

    PS:我是分了两次做的这次试验,第二次实验的时候电脑出了一点问题熄火了……原本后面的是有图的结果博客没保存图没了…… WebGoat WebGoat是由著名的OWASP负责维护的一个漏洞百出的J2EE ...

  7. 11 stark组件之delete按钮、filter过滤

    1.构建批量删除按钮 1.admin中每个页面默认都有 2.stark之构建批量删除 3.coding {% extends 'base.html' %} {% block title %} < ...

  8. 【HNOI2014】米特运输

    题面 题解 首先我们需要看懂题目 然后我们需要发现一个结论 只要有一个节点的权值确定,那么整棵树的权值就确定了 就像这样:(图片来源于网络,侵删) 然后我们根据这张图片,可以设\(f[i] = a[i ...

  9. [HNOI2015]开店 树链剖分,主席树

    [HNOI2015]开店 LG传送门 蒟蒻表示不会动态淀粉质. 先把点按年龄排序, 设\(dis[i]\)表示\(i\)到根的距离. 把我们要算的东西稍微变下形:\(ans\) \[ = \sum \ ...

  10. [JLOI2013]地形生成[组合计数]

    题意 \(n\) 元素各有一个高度 \(h\) 和关键数字 \(b\) .求有多少个下标序列和高度序列,满足对任意 \(i\),\(j< i\) 且 \(h_j < h_i\)的 \(j\ ...