grunt的基本概念和使用

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

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。老版本的 Node.js 被认为是不稳定的开发版。之前,在用grunt来合并文件时,老是报错,原因是node.js的版本太低了。

在安装grunt之前,你需要先将Grunt命令行(CLI)安装到全局环境中。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。

注意,安装了grunt-cli并不等于安装了 Grunt!

Grunt CLI的任务很简单:调用与Gruntfile文件在同一目录中的Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。这样就能让多个版本的 Grunt 同时安装在同一台机器上。

Grunt CLI的运行原理:每次运行grunt 时,Grunt CLI就利用node提供的require(),去系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt,CLI就将其加载,并传递Gruntfile中的配置信息,然后执行你所指定的任务。

如何打造一个 Grunt 项目?

一般需要在你的项目中添加两份文件:package.json 和 Gruntfile。

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

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。

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.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

向已经存在的package.json 文件中,添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。此命令不光安装了<module>,还会自动将其添加到package.json 文件的devDependencies 配置段中。

例如,下面这条命令将安装Grunt最新版本到项目目录中,并将其添加到devDependencies内:

npm install grunt --save-dev
同样,grunt插件和其它node模块都可以按相同的方式安装。安装完成后一定要记得把被修改的package.json文件提交到源码管理器中。

Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件,应当放在你的项目根目录中,和package.json文件在同一目录层级,并和项目源码一起加入源码管理器。

Gruntfile由以下几部分构成:

(1)包装函数
(2)项目与任务配置
(3)加载grunt插件和任务
(4)自定义任务

举个例子:

  1. module.exports = function(grunt) {
  2. grunt.initConfig({
  3.   pkg: grunt.file.readJSON('package.json'),
  4.   uglify: {
  5.     options: {
  6.       banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
  7.     },
  8.     build: {
  9.       src: 'src/<%= pkg.name %>.js',
  10.       dest: 'build/<%= pkg.name %>.min.js'
  11.     }
  12.   }
  13. });
  14. // 加载包含 "uglify" 任务的插件。
  15. grunt.loadNpmTasks('grunt-contrib-uglify');
  16. // 默认被执行的任务列表。
  17. grunt.registerTask('default', ['uglify']);
  18. };

每一份 Gruntfile 都遵循同样的格式,你所书写的Grunt代码必须放在此包装函数内:

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

大部分的Grunt任务都依赖某些配置数据,这些数据被定义在一个json对象内,并传递给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文件压缩为一个目标文件。

像 concatenation、[minification]、grunt-contrib-uglify 和 linting这些常用的任务(task)都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:grunt.loadNpmTasks('grunt-contrib-uglify');

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

通过定义 default 任务,可以让Grunt默认执行一个或多个任务。在上面的例子中,执行 grunt 命令时如果不指定一个任务的话,将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务(可以带参数)。grunt.registerTask('default', ['uglify']);

如果Grunt插件中的任务(task)不能满足你的项目需求,你还可以在Gruntfile中自定义任务(task)。例如,在下面的 Gruntfile 中自定义了一个default 任务,并且他甚至不依赖任务配置:

module.exports = function(grunt) {

  grunt.registerTask('default', 'Log some stuff.'  ,  function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

当然,特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中,并通过grunt.loadTasks 方法加载。

在上面列出的这个 Gruntfile 中,package.json文件中的项目元数据(metadata)被导入到 Grunt 配置中, grunt-contrib-uglify 插件中的uglify 任务(task)被配置为压缩源码文件,并依据上述元数据动态生成一个文件头注释。当在命令行中执行 grunt 命令时,uglify 任务将被默认执行。

加油!

 

grunt的基本概念和使用的更多相关文章

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

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

  2. 如何自定义Grunt任务

    任务(Tasks)是grunt的核心概念,你所做的很多工作比如资源合并(concat).压缩(uglify)都是在配置任务.每次grunt运行的时候,你指定的一个或多个任务也在运行,如果你没有指定任务 ...

  3. 关于Yeoman使用的总结

    Yeoman由三部分组成 Yo 用于项目构建. Grunt 用于项目管理,任务制定. Bower 用于项目依赖管理. 经过一段时间的使用,对这些东西有了一些个人总结: 总体上说这些内容学习曲线略高,不 ...

  4. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  5. [译]为什么我要离开gulp和grunt转投npm脚本的怀抱

    原文链接:https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.n7m1855 ...

  6. gulp和grunt的区别

    1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...

  7. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...

  8. Grunt vs Gulp

    grunt vs gulp 虽然gulp已经出来很久了,但是一直没有去使用过.得益于最近项目需要,就尝试了一下,以下从几个要点讲一下grunt和gulp使用的区别,侧重讲一下在使用gulp过程中发现的 ...

  9. gulp完全开发指南 => 快来换掉你的Grunt吧

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

随机推荐

  1. C# 字段、属性、成员变量

    引言: C#与java,C++中的这些基本概念略有不同. 由于easy混淆,所以这里总结下差别. 希望能对刚開始学习的人有帮助! 一.定义与作用 1.字段(field):是C#类级别定义的,和方法同一 ...

  2. Spring-MVC4 + JPA2 + MySql-5.5 + SLF4J + JBoss WildFly-8.1开发环境的搭建

    面试被问Spring4,它的目的是把过去Spring3所有升级项目Spring4.现在将记录在此环境搭建过程. 第一次使用Maven Archetype创建一个项目框架,运行以下命令: mvn arc ...

  3. iPhone&amp;iPad DFU及恢复模式刷机、降级教程

    再次提醒,刷机需慎重处理. http://blog.csdn.net/ztp800201/article/details/11980643 iphone一共同拥有三种工作模式,各自是正常模式,恢复模式 ...

  4. tomcatserver乱码问题,tomcat与数据库之间的编码统一转换

    在tomcat文件夹的conf文件夹下,改动server.xml文件,在以下截图中的位置加上URIEncoding="UTF-8"则表示tomcat编码转换为utf-8风格, 一般 ...

  5. 人迹罕至的android要完全退出程序的一种方法

    最近的一个项目,无意中发现了一个方法,使android要完全退出程序的一种方法,遥想当年,以便找到让的有效途径android遇险完全退出程序,我不由得有些感慨. 在这里,不敢独享.和大家分享一下,还启 ...

  6. android4.4组件分析--service组件-bindService源代码分析

    6.1.1.    bindService 由于有前面分析startService的代码实现过程,则对于bindService的代码分析就不用那么具体介绍,在介绍流程的同一时候更关注一些细节上的部分. ...

  7. 编写爬虫程序的神器 - Groovy + Jsoup + Sublime(转)

    写过很多个爬虫小程序了,之前几次主要用C# + Html Agility Pack来完成工作.由于.NET FCL只提供了"底层"的HttpWebRequest和"中层& ...

  8. ssis t-sql返回值

    原文:ssis t-sql返回值 sql类似如下,不需要使用return 语句,SQL语句的ConnectionType必须是"ADO.NET" select @proID=fie ...

  9. VB6基本数据库应用(五):数据的查找与筛选

    同系列的第五篇,上一篇在:http://blog.csdn.net/jiluoxingren/article/details/9633139 数据的查找与筛选 第4篇发布到现在已经过了4天,很抱歉,学 ...

  10. 开展.net mvc3遇到怪事+解

    发展到今天.net mvc3遇到怪事. 使用Firefox浏览器.打开index页,求index该控制器是很多次,代码查询数据库的多个运行.server减速. 而且没有刷新页面,随着时间的推移有十二请 ...